box-ui-elements 14.0.0 → 14.1.0-beta.11

package/es/icon/fill/LightningBolt16.js

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../components/accessible-svg/AccessibleSVG';
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+var LightningBolt16 = function LightningBolt16(props) {
+  return React.createElement(AccessibleSVG, _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16"
+  }, props), React.createElement("path", {
+    fill: vars.bdlGray50,
+    d: "M11.503 1a.496.496 0 01.447.712L9.302 6.998h2.193a.5.5 0 01.423.766L6.91 14.792a.5.5 0 01-.902-.365L6.836 9H4.493a.496.496 0 01-.483-.602l1.516-7A.495.495 0 016.008 1h5.495z"
+  }));
+};
+
+export default LightningBolt16;
+//# sourceMappingURL=LightningBolt16.js.map

package/es/icon/fill/LightningBolt16.js.flow

@@ -0,0 +1,28 @@
+// @flow
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../icons/accessible-svg';
+import type { Icon } from '../../icons/flowTypes';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const LightningBolt16 = (props: Icon) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path
+            fill={vars.bdlGray50}
+            d="M11.503 1a.496.496 0 01.447.712L9.302 6.998h2.193a.5.5 0 01.423.766L6.91 14.792a.5.5 0 01-.902-.365L6.836 9H4.493a.496.496 0 01-.483-.602l1.516-7A.495.495 0 016.008 1h5.495z"
+        />
+    </AccessibleSVG>
+);
+
+export default LightningBolt16;

package/es/icon/fill/LightningBolt16.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icon/fill/LightningBolt16.tsx"],"names":["React","vars","AccessibleSVG","LightningBolt16","props","bdlGray50"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AACA,OAAOC,aAAP,MAAwC,+CAAxC;AAEA;;;;;;;;;;;AAWA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SACpB,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAE,EAAtB;AAA0B,IAAA,MAAM,EAAE,EAAlC;AAAsC,IAAA,OAAO,EAAC;AAA9C,KAA8DA,KAA9D,GACI;AACI,IAAA,IAAI,EAAEH,IAAI,CAACI,SADf;AAEI,IAAA,CAAC,EAAC;AAFN,IADJ,CADoB;AAAA,CAAxB;;AASA,eAAeF,eAAf","sourcesContent":["/* eslint-disable react/jsx-sort-props */\nimport * as React from 'react';\nimport * as vars from '../../styles/variables';\nimport AccessibleSVG, { SVGProps } from '../../components/accessible-svg/AccessibleSVG';\n\n/**\n * This is an auto-generated component and should not be edited\n * manually in contributor pull requests.\n *\n * If you have problems with this component:\n * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md\n *\n * If there are missing features in this component:\n * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md\n */\n\nconst LightningBolt16 = (props: SVGProps) => (\n    <AccessibleSVG width={16} height={16} viewBox=\"0 0 16 16\" {...props}>\n        <path\n            fill={vars.bdlGray50}\n            d=\"M11.503 1a.496.496 0 01.447.712L9.302 6.998h2.193a.5.5 0 01.423.766L6.91 14.792a.5.5 0 01-.902-.365L6.836 9H4.493a.496.496 0 01-.483-.602l1.516-7A.495.495 0 016.008 1h5.495z\"\n        />\n    </AccessibleSVG>\n);\n\nexport default LightningBolt16;\n"],"file":"LightningBolt16.js"}

package/es/icon/fill/LightningBolt16.stories.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import LightningBolt16 from './LightningBolt16';
+export var lightningBolt16 = function lightningBolt16() {
+  return React.createElement(LightningBolt16, null);
+};
+export default {
+  title: 'Icon|Fill|LightningBolt16',
+  component: LightningBolt16,
+  parameters: {
+    notes: "`import LightningBolt16 from 'box-ui-elements/es/icon/fill/LightningBolt16';`"
+  }
+};
+//# sourceMappingURL=LightningBolt16.stories.js.map

package/es/icon/fill/LightningBolt16.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icon/fill/LightningBolt16.stories.tsx"],"names":["React","LightningBolt16","lightningBolt16","title","component","parameters","notes"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,SAAM,oBAAC,eAAD,OAAN;AAAA,CAAxB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,2BADI;AAEXC,EAAAA,SAAS,EAAEH,eAFA;AAGXI,EAAAA,UAAU,EAAE;AACRC,IAAAA,KAAK,EAAE;AADC;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport LightningBolt16 from './LightningBolt16';\n\nexport const lightningBolt16 = () => <LightningBolt16 />;\n\nexport default {\n    title: 'Icon|Fill|LightningBolt16',\n    component: LightningBolt16,\n    parameters: {\n        notes: \"`import LightningBolt16 from 'box-ui-elements/es/icon/fill/LightningBolt16';`\",\n    },\n};\n"],"file":"LightningBolt16.stories.js"}

package/es/icon/line/GenericCopy16.js

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../components/accessible-svg/AccessibleSVG';
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+var GenericCopy16 = function GenericCopy16(props) {
+  return React.createElement(AccessibleSVG, _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16"
+  }, props), React.createElement("path", {
+    fill: vars.bdlGray,
+    d: "M13 3c.557 0 .942.345.994.875L14 4v11H4V3h9zm0 1H5v10h8V4zm-2-3v1H3v10H2V1h9z"
+  }));
+};
+
+export default GenericCopy16;
+//# sourceMappingURL=GenericCopy16.js.map

package/es/icon/line/GenericCopy16.js.flow

@@ -0,0 +1,25 @@
+// @flow
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../icons/accessible-svg';
+import type { Icon } from '../../icons/flowTypes';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const GenericCopy16 = (props: Icon) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path fill={vars.bdlGray} d="M13 3c.557 0 .942.345.994.875L14 4v11H4V3h9zm0 1H5v10h8V4zm-2-3v1H3v10H2V1h9z" />
+    </AccessibleSVG>
+);
+
+export default GenericCopy16;

package/es/icon/line/GenericCopy16.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icon/line/GenericCopy16.tsx"],"names":["React","vars","AccessibleSVG","GenericCopy16","props","bdlGray"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AACA,OAAOC,aAAP,MAAwC,+CAAxC;AAEA;;;;;;;;;;;AAWA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAAA,SAClB,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAE,EAAtB;AAA0B,IAAA,MAAM,EAAE,EAAlC;AAAsC,IAAA,OAAO,EAAC;AAA9C,KAA8DA,KAA9D,GACI;AAAM,IAAA,IAAI,EAAEH,IAAI,CAACI,OAAjB;AAA0B,IAAA,CAAC,EAAC;AAA5B,IADJ,CADkB;AAAA,CAAtB;;AAMA,eAAeF,aAAf","sourcesContent":["/* eslint-disable react/jsx-sort-props */\nimport * as React from 'react';\nimport * as vars from '../../styles/variables';\nimport AccessibleSVG, { SVGProps } from '../../components/accessible-svg/AccessibleSVG';\n\n/**\n * This is an auto-generated component and should not be edited\n * manually in contributor pull requests.\n *\n * If you have problems with this component:\n * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md\n *\n * If there are missing features in this component:\n * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md\n */\n\nconst GenericCopy16 = (props: SVGProps) => (\n    <AccessibleSVG width={16} height={16} viewBox=\"0 0 16 16\" {...props}>\n        <path fill={vars.bdlGray} d=\"M13 3c.557 0 .942.345.994.875L14 4v11H4V3h9zm0 1H5v10h8V4zm-2-3v1H3v10H2V1h9z\" />\n    </AccessibleSVG>\n);\n\nexport default GenericCopy16;\n"],"file":"GenericCopy16.js"}

package/es/icon/line/GenericCopy16.stories.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import GenericCopy16 from './GenericCopy16';
+export var genericCopy16 = function genericCopy16() {
+  return React.createElement(GenericCopy16, null);
+};
+export default {
+  title: 'Icon|Line|GenericCopy16',
+  component: GenericCopy16,
+  parameters: {
+    notes: "`import GenericCopy16 from 'box-ui-elements/es/icon/line/GenericCopy16';`"
+  }
+};
+//# sourceMappingURL=GenericCopy16.stories.js.map

package/es/icon/line/GenericCopy16.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/icon/line/GenericCopy16.stories.tsx"],"names":["React","GenericCopy16","genericCopy16","title","component","parameters","notes"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAM,oBAAC,aAAD,OAAN;AAAA,CAAtB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEH,aAFA;AAGXI,EAAAA,UAAU,EAAE;AACRC,IAAAA,KAAK,EAAE;AADC;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport GenericCopy16 from './GenericCopy16';\n\nexport const genericCopy16 = () => <GenericCopy16 />;\n\nexport default {\n    title: 'Icon|Line|GenericCopy16',\n    component: GenericCopy16,\n    parameters: {\n        notes: \"`import GenericCopy16 from 'box-ui-elements/es/icon/line/GenericCopy16';`\",\n    },\n};\n"],"file":"GenericCopy16.stories.js"}

package/es/src/components/button/Button.d.ts

@@ -9,6 +9,8 @@ export interface ButtonProps {
     children?: React.ReactNode;
     /** Custom class for the button */
     className: string;
+    /** icon component, can be paired with children (text) or on its own */
+    icon?: React.ReactElement;
     /** whether the button is disabled or not */
     isDisabled?: boolean;
     /** whether the button is loading or not */
@@ -19,6 +21,8 @@ export interface ButtonProps {
     onClick?: Function;
     /** to set buttons inner ref */
     setRef?: Function;
+    /** size of the button */
+    size?: 'large';
     /** whether to show a radar */
     showRadar: boolean;
     /** type for the button */

package/es/src/components/button/Button.stories.d.ts

@@ -3,6 +3,10 @@ export declare const regular: () => JSX.Element;
 export declare const loading: () => JSX.Element;
 export declare const disabled: () => JSX.Element;
 export declare const withRadar: () => JSX.Element;
+export declare const large: () => JSX.Element;
+export declare const iconButton: () => JSX.Element;
+export declare const iconAndTextButton: () => JSX.Element;
+export declare const fixingMargins: () => JSX.Element;
 declare const _default: {
     title: string;
     component: typeof Button;

package/es/src/components/context-menu/__tests__/ContextMenu.stories.test.d.ts

@@ -1 +0,0 @@
-export {};

package/es/src/components/date-picker/__tests__/DatePicker.stories.test.d.ts

@@ -1 +0,0 @@
-export {};

package/es/src/components/footer-indicator/__tests__/FooterIndicator.stories.test.d.ts

@@ -1 +0,0 @@
-export {};

package/es/src/components/guide-tooltip/GuideTooltip.d.ts

@@ -8,10 +8,12 @@ declare type Props = TooltipProps & {
     title?: React.ReactNode;
     /** 32px x 32px */
     icon?: React.ReactNode;
+    /** A React component representing the image */
+    image?: React.ReactNode;
     /** displays guide progress e.g. 1 of 4 */
     steps?: [number, number];
     primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
     secondaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
 };
-declare function GuideTooltip({ body, children, className, icon, isShown, primaryButtonProps, steps, secondaryButtonProps, showCloseButton, title, ...rest }: Props): JSX.Element;
+declare function GuideTooltip({ body, children, className, icon, image, isShown, primaryButtonProps, steps, secondaryButtonProps, showCloseButton, title, ...rest }: Props): JSX.Element;
 export default GuideTooltip;

package/es/src/components/link/LinkButton.d.ts

@@ -3,6 +3,7 @@ import { LinkBaseProps } from './LinkBase';
 export interface LinkButtonProps extends LinkBaseProps {
     children: React.ReactChild;
     className?: string;
+    size?: 'large';
 }
-declare const LinkButton: ({ className, ...rest }: LinkButtonProps) => JSX.Element;
+declare const LinkButton: ({ className, size, ...rest }: LinkButtonProps) => JSX.Element;
 export default LinkButton;

package/es/src/components/link/LinkPrimaryButton.d.ts

@@ -1,7 +1,5 @@
-import * as React from 'react';
-import { LinkBaseProps } from './LinkBase';
-export interface LinkPrimaryButtonProps extends LinkBaseProps {
-    children: React.ReactChild;
+import { LinkButtonProps } from './LinkButton';
+export interface LinkPrimaryButtonProps extends LinkButtonProps {
     className?: string;
 }
 declare const LinkPrimaryButton: ({ className, ...rest }: LinkPrimaryButtonProps) => JSX.Element;

package/es/src/components/link/stories/LinkButton.stories.d.ts

@@ -1,8 +1,9 @@
 export declare const basic: () => JSX.Element;
+export declare const large: () => JSX.Element;
 export declare const withCustomComponent: () => JSX.Element;
 declare const _default: {
     title: string;
-    component: ({ className, ...rest }: import("../LinkButton").LinkButtonProps) => JSX.Element;
+    component: ({ className, size, ...rest }: import("../LinkButton").LinkButtonProps) => JSX.Element;
     parameters: {
         notes: string;
     };

package/es/src/components/link/stories/LinkPrimaryButton.stories.d.ts

@@ -1,4 +1,5 @@
 export declare const basic: () => JSX.Element;
+export declare const large: () => JSX.Element;
 export declare const withCustomComponent: () => JSX.Element;
 declare const _default: {
     title: string;

package/es/src/components/plain-button/PlainButton.stories.d.ts

@@ -1,5 +1,6 @@
 export declare const regular: () => JSX.Element;
 export declare const disabled: () => JSX.Element;
+export declare const fixingMargins: () => JSX.Element;
 declare const _default: {
     title: string;
     component: ({ children, className, getDOMRef, isDisabled, type, ...rest }: import("./PlainButton").PlainButtonProps) => JSX.Element;

package/es/src/icon/fill/LightningBolt16.d.ts

@@ -0,0 +1,13 @@
+import { SVGProps } from '../../components/accessible-svg/AccessibleSVG';
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+declare const LightningBolt16: (props: SVGProps) => JSX.Element;
+export default LightningBolt16;

package/es/src/icon/fill/LightningBolt16.stories.d.ts

@@ -0,0 +1,9 @@
+export declare const lightningBolt16: () => JSX.Element;
+declare const _default: {
+    title: string;
+    component: (props: import("../../components/accessible-svg/AccessibleSVG").SVGProps) => JSX.Element;
+    parameters: {
+        notes: string;
+    };
+};
+export default _default;

package/es/src/icon/line/GenericCopy16.d.ts

@@ -0,0 +1,13 @@
+import { SVGProps } from '../../components/accessible-svg/AccessibleSVG';
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+declare const GenericCopy16: (props: SVGProps) => JSX.Element;
+export default GenericCopy16;

package/es/src/icon/line/GenericCopy16.stories.d.ts

@@ -0,0 +1,9 @@
+export declare const genericCopy16: () => JSX.Element;
+declare const _default: {
+    title: string;
+    component: (props: import("../../components/accessible-svg/AccessibleSVG").SVGProps) => JSX.Element;
+    parameters: {
+        notes: string;
+    };
+};
+export default _default;

package/es/src/styles/variables.d.ts

@@ -85,8 +85,16 @@ export declare const notificationsWrapperZIndex = "180";
 export declare const overlayZIndex = "190";
 export declare const tooltipZIndex = "190";
 export declare const bdlBorderRadiusSize = "4px";
-export declare const bdlBorderRadiusLargeSize = "10px";
+export declare const bdlBorderRadiusSizeMed = "6px";
+export declare const bdlBorderRadiusSizeLarge = "8px";
+export declare const bdlBorderRadiusSizeXlarge = "12px";
 export declare const bdlGridUnit = "4px";
 export declare const bdlGridUnitPx = "4";
+export declare const bdlBtnBorderWidth = "1px";
+export declare const bdlBtnHeight = "32px";
+export declare const bdlBtnHeightLarge = "40px";
+export declare const bdlBtnIconSize = "20px";
+export declare const bdlBtnTextIconSize = "16px";
+export declare const bdlBtnPaddingHorizontal = "16px";
 export declare const bdlTransitionDurationBase = "0.15s";
 export declare const bdlTimingFunction: string[];

package/es/styles/_inputs.scss

@@ -4,7 +4,7 @@
     padding: 7px;
     color: $bdl-gray;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
     transition: border-color linear .15s, box-shadow linear .1s;
     -webkit-font-smoothing: antialiased;

package/es/styles/_variables.scss

@@ -4,9 +4,11 @@
 @import './constants/animation';
 @import './constants/typography';
 @import './constants/themes';
+@import './constants/buttons';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins
 @import './mixins/animation';
 @import './mixins/layout';
 @import './mixins/typography';
+@import './mixins/buttons';

package/es/styles/common/_buttons.scss

@@ -1,17 +1,24 @@
+@import '../constants/typography';
+@import '../constants/layout';
+@import '../constants/buttons';
+@import '../mixins/buttons';
+
 /**************************************
  * Buttons
  **************************************/
 
 .btn {
+    $bdl-btn-padding-vertical: 10px; // @deprecated Use flexbox or line-height instead in future implementation
+
     position: relative;
     display: inline-block;
     box-sizing: border-box;
-    margin: 5px;
-    padding: 10px 16px;
+    margin: 5px; // This causes problems for composition (breaking change needed to fix)
+    padding: $bdl-btn-padding-vertical $bdl-btn-padding-horizontal;
     color: $bdl-gray-80;
-    font-weight: normal;
-    font-size: 13px;
-    line-height: 10px;
+    font-weight: bold;
+    font-size: $bdl-fontSize;
+    line-height: $bdl-btn-height - 2 * $bdl-btn-border-width - 2 * $bdl-btn-padding-vertical;
     letter-spacing: .035em;
     white-space: nowrap;
     text-align: center;
@@ -19,10 +26,10 @@
     text-shadow: none;
     vertical-align: top;
     background-color: $white;
-    border: 1px solid $bdl-gray-30;
+    border-color: $bdl-gray-30;
     border-style: solid;
-    border-width: 1px;
-    border-radius: 4px;
+    border-width: $bdl-btn-border-width;
+    border-radius: $bdl-border-radius-size-med;
     cursor: pointer;
     -webkit-transition: border-color linear .15s, box-shadow linear .15s, background-color linear .15s;
     transition: background-color .05s ease-in-out, border-color .05s ease-in-out;
@@ -30,6 +37,45 @@
     zoom: 1;
     -webkit-font-smoothing: antialiased;
 
+    &.bdl-btn--large {
+        @include bdl-Button--large;
+    }
+
+    &.bdl-has-icon {
+        // Buttons with icons use flexbox to align content instead of line-height/padding
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: $bdl-btn-height;
+        padding: 0; // Content provides padding
+        line-height: 0;
+
+        .btn-content {
+            margin-left: $bdl-btn-padding-horizontal;
+        }
+
+        .bdl-btn-icon {
+            // Icon without text:
+            margin: ($bdl-btn-height - $bdl-btn-icon-size) / 2 - $bdl-btn-border-width;
+
+            // Icon with text:
+            & + .btn-content {
+                // Buttons with icons have a smaller margin on the icon side for optical alignment:
+                margin-right: $bdl-grid-unit * 3;
+                // Spacing between button and text:
+                margin-left: $bdl-grid-unit * 2;
+            }
+        }
+
+        &.bdl-btn--large {
+            height: $bdl-btn-height-large;
+
+            .bdl-btn-icon {
+                margin: ($bdl-btn-height-large - $bdl-btn-icon-size) / 2 - $bdl-btn-border-width;
+            }
+        }
+    }
+
     &:active,
     &:hover,
     &:focus {
@@ -62,7 +108,8 @@
     }
 
     &.is-loading {
-        .btn-content {
+        .btn-content,
+        .bdl-btn-icon {
             visibility: hidden;
         }
 
@@ -85,6 +132,8 @@
     }
 }
 
+// TODO: :hover/:active should inherit styles instead of specifying
+// This would be a breaking change to fix
 .btn-plain,
 .btn-plain:hover,
 .btn-plain:active {
@@ -122,7 +171,7 @@ button svg {
     &:not(.is-disabled) {
         &:focus {
             background-color: lighten($primary-color, 8%);
-            border: 1px solid $primary-color;
+            border: $bdl-btn-border-width solid $primary-color;
             box-shadow: inset 0 0 0 1px fade-out($white, .2), 0 1px 2px fade-out($black, .9);
         }
 
@@ -139,7 +188,8 @@ button svg {
     }
 
     &.is-loading {
-        .btn-content {
+        .btn-content,
+        .bdl-btn-icon {
             background-color: $bdl-gray-30;
         }
     }

package/es/styles/common/_forms.scss

@@ -210,7 +210,7 @@ textarea {
 .select-container .select-button {
     background-color: $white;
     border: 1px solid $bdl-gray-20;
-    border-radius: 2px;
+    border-radius: $bdl-border-radius-size-med;
     box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .05);
     -webkit-transition: border-color linear .15s, box-shadow linear .1s;
     transition: border-color linear .15s, box-shadow linear .1s;

package/es/styles/common/_inline-notifications.scss

@@ -1,3 +1,5 @@
+@import '../variables';
+
 /**************************************
  * Inline Notifications
  **************************************/
@@ -7,7 +9,7 @@
     margin: 10px 0;
     padding: 14px 10px;
     color: $bdl-gray;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size-med;
 
     &.inline-alert-visible {
         display: block;

package/es/styles/common/_pills.scss

@@ -18,7 +18,7 @@ $pillTextColorDark: lighten($black, 31%);
     white-space: nowrap;
     text-overflow: ellipsis;
     background-color: $primary-color;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     .bdl-Pill-text {
         display: block;

package/es/styles/constants/_buttons.scss

@@ -0,0 +1,6 @@
+$bdl-btn-border-width: 1px;
+$bdl-btn-height: 32px;
+$bdl-btn-height-large: 40px;
+$bdl-btn-icon-size: 20px;
+$bdl-btn-text-icon-size: 16px;
+$bdl-btn-padding-horizontal: $bdl-grid-unit * 4;

package/es/styles/constants/_layout.scss

@@ -7,7 +7,9 @@ $tooltip-z-index: 190 !default;
 
 // Borders
 $bdl-border-radius-size: 4px;
-$bdl-border-radius-large-size: 10px; // Slowly migrating certain components, such as Classification Labels, to this larger radius
+$bdl-border-radius-size-med: $bdl-border-radius-size * 1.5;
+$bdl-border-radius-size-large: $bdl-border-radius-size * 2;
+$bdl-border-radius-size-xlarge: $bdl-border-radius-size * 3;
 
 // Spacing
 $bdl-grid-unit: 4px !default;

package/es/styles/constants/_typography.scss

@@ -1,6 +1,14 @@
 $bdl-line-height: 20px;
 
-// font sizes
+// Font sizes
 $bdl-fontSize: 13px;
 $bdl-fontSize-minimum: 11px;
 $bdl-fontSize--dejaBlue: 14px;
+
+// "--dejaBlue" size will become default at some point
+// Migration Steps:
+// 1. New or restyled code should use --dejaBlue variable
+// 2. Find any hardcoded font sizes and change to use variables
+// 3. Once most components are DJB styled, change bdl-fontSize to 14px
+// 4. Fix any issues with components due to change of base variable
+// 5. Replace all references to $bdl-fontSize--dejaBlue with $bdl-fontSize and delete --dejaBlue

package/es/styles/mixins/_buttons.scss

@@ -1,3 +1,8 @@
+@import '../constants/buttons';
+
+/**
+ * Mixin for PlainButton to handle overriding margins for the hover/active states.
+ */
 @mixin bdl-Button-margins($margin) {
     margin: $margin;
 
@@ -6,3 +11,13 @@
         margin: $margin;
     }
 }
+
+/**
+ * Mixin to create large buttons. Should not often be needed directly,
+ * use the size="large" prop on the Button component instead.
+ */
+@mixin bdl-Button--large {
+    padding: 0 $bdl-btn-padding-horizontal;
+    font-size: $bdl-fontSize--dejaBlue;
+    line-height: $bdl-btn-height-large - 2 * $bdl-btn-border-width;
+}

package/es/styles/mixins/_overlay.scss

@@ -7,7 +7,7 @@
  */
 @mixin bdl-Overlay-listItemContainer {
     padding: ($bdl-grid-unit * 2) ($bdl-grid-unit * 12) ($bdl-grid-unit * 2) ($bdl-grid-unit * 2);
-    border-radius: $bdl-border-radius-size * 2;
+    border-radius: $bdl-border-radius-size-large;
     cursor: pointer;
 
     &.is-active {
@@ -29,7 +29,7 @@
     padding: $bdl-grid-unit * 3;
     background-color: $white;
     border: 1px solid $bdl-gray-10;
-    border-radius: $bdl-border-radius-size * 2;
+    border-radius: $bdl-border-radius-size-large;
 
     @include bdl-Overlay-containerShadow;
 }

package/es/styles/variables.js

@@ -173,12 +173,28 @@ export var tooltipZIndex = '190'; // tooltip-z-index
 
 export var bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
 
-export var bdlBorderRadiusLargeSize = '10px'; // bdl-border-radius-large-size
+export var bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med
+
+export var bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large
+
+export var bdlBorderRadiusSizeXlarge = '12px'; // bdl-border-radius-size-xlarge
 
 export var bdlGridUnit = '4px'; // bdl-grid-unit
 
 export var bdlGridUnitPx = '4'; // bdl-grid-unit-px
 
+export var bdlBtnBorderWidth = '1px'; // bdl-btn-border-width
+
+export var bdlBtnHeight = '32px'; // bdl-btn-height
+
+export var bdlBtnHeightLarge = '40px'; // bdl-btn-height-large
+
+export var bdlBtnIconSize = '20px'; // bdl-btn-icon-size
+
+export var bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size
+
+export var bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
+
 export var bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
 
 export var bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction