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

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/styles/variables.js

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

package/src/styles/variables.json

@@ -96,9 +96,17 @@
     "overlay-z-index": "190",
     "tooltip-z-index": "190",
     "bdl-border-radius-size": "4px",
-    "bdl-border-radius-large-size": "10px",
+    "bdl-border-radius-size-med": "6px",
+    "bdl-border-radius-size-large": "8px",
+    "bdl-border-radius-size-xlarge": "12px",
     "bdl-grid-unit": "4px",
     "bdl-grid-unit-px": "4",
+    "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": "16px",
     "bdl-transitionDurationBase": "0.15s",
     "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"]
 }

package/src/styles/variables.ts

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

package/src/utils/createTheme.stories.js

@@ -24,7 +24,7 @@ const Swatch = styled.div`
     border: 1px solid ${vars.bdlGray30};
     height: 1em;
     width: 1em;
-    border-radius: 4px;
+    border-radius: ${vars.bdlBorderRadiusSize};
 `;
 
 const BaseButton = styled(BoxButton)`
@@ -33,7 +33,7 @@ const BaseButton = styled(BoxButton)`
     color: ${props => props.theme.base.buttonForeground};
 
     font-weight: bold;
-    border-radius: 6px;
+    border-radius: ${vars.bdlBorderRadiusSizeMed};
     font-size: ${vars.bdlFontSizeDejaBlue};
 
     .btn:not(.is-disabled)&:hover {
@@ -52,7 +52,7 @@ const PrimaryButton = styled(BoxButton)`
     color: ${props => props.theme.primary.buttonForeground};
 
     font-weight: bold;
-    border-radius: 6px;
+    border-radius: ${vars.bdlBorderRadiusSizeMed};
     font-size: ${vars.bdlFontSizeDejaBlue};
 
     .btn:not(.is-disabled)&:hover {
@@ -69,7 +69,7 @@ const ThemeDemo = styled.div`
     width: 200px;
     min-height: 500px;
     padding: 8px;
-    border-radius: 4px;
+    border-radius: ${vars.bdlBorderRadiusSize};
     display: flex;
     flex-direction: column;
     color: ${p => p.theme.primary.foreground};
@@ -82,7 +82,7 @@ const ThemeDemoMenuItem = styled.div`
     cursor: pointer;
     padding: 8px 12px;
     margin: 2px 4px;
-    border-radius: 8px;
+    border-radius: ${vars.bdlBorderRadiusSizeLarge};
     font-weight: bold;
     transition: 0.15s;
     border: 1px solid;

package/src/components/guide-tooltip/__tests__/__snapshots__/GuideTooltip.test.js.snap

@@ -1,142 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/guide-tooltip/GuideTooltip should render with all options 1`] = `
-<Tooltip
-  className="bdl-GuideTooltip "
-  constrainToScrollParent={false}
-  constrainToWindow={true}
-  isDisabled={false}
-  isShown={true}
-  position="top-center"
-  showCloseButton={true}
-  text={
-    <React.Fragment>
-      <div
-        className="bdl-GuideTooltip-icon"
-      >
-        <FolderShared32 />
-      </div>
-      <div
-        className="bdl-GuideTooltip-right"
-      >
-        <div
-          className="bdl-GuideTooltip-title"
-        >
-          <div>
-            title
-          </div>
-        </div>
-        <div
-          className="bdl-GuideTooltip-body"
-        >
-          <div>
-            body
-          </div>
-        </div>
-        <div
-          className="bdl-GuideTooltip-bottom"
-        >
-          <div
-            className="bdl-GuideTooltip-navigation"
-          >
-            <Button
-              className="bdl-GuideTooltip-previousButton"
-              isLoading={false}
-              showRadar={false}
-              type="submit"
-            >
-              Previous
-            </Button>
-            <Button
-              className="bdl-GuideTooltip-nextButton"
-              isLoading={false}
-              showRadar={false}
-              type="submit"
-            >
-              Next
-            </Button>
-          </div>
-          <div
-            className="bdl-GuideTooltip-steps"
-          >
-            <FormattedMessage
-              defaultMessage="{currentStepIndex} of {totalNumSteps}"
-              id="boxui.core.guidetooltip.navigation"
-              values={
-                Object {
-                  "currentStepIndex": 1,
-                  "totalNumSteps": 3,
-                }
-              }
-            />
-          </div>
-        </div>
-      </div>
-    </React.Fragment>
-  }
-  theme="callout"
-/>
-`;
-
-exports[`components/guide-tooltip/GuideTooltip should render with just body 1`] = `
-<Tooltip
-  className="bdl-GuideTooltip "
-  constrainToScrollParent={false}
-  constrainToWindow={true}
-  isDisabled={false}
-  isShown={true}
-  position="top-center"
-  showCloseButton={true}
-  text={
-    <React.Fragment>
-      <div
-        className="bdl-GuideTooltip-right"
-      >
-        <div
-          className="bdl-GuideTooltip-body"
-        >
-          <div>
-            body
-          </div>
-        </div>
-      </div>
-    </React.Fragment>
-  }
-  theme="callout"
-/>
-`;
-
-exports[`components/guide-tooltip/GuideTooltip should render with title and body 1`] = `
-<Tooltip
-  className="bdl-GuideTooltip "
-  constrainToScrollParent={false}
-  constrainToWindow={true}
-  isDisabled={false}
-  isShown={true}
-  position="top-center"
-  showCloseButton={true}
-  text={
-    <React.Fragment>
-      <div
-        className="bdl-GuideTooltip-right"
-      >
-        <div
-          className="bdl-GuideTooltip-title"
-        >
-          <div>
-            title
-          </div>
-        </div>
-        <div
-          className="bdl-GuideTooltip-body"
-        >
-          <div>
-            body
-          </div>
-        </div>
-      </div>
-    </React.Fragment>
-  }
-  theme="callout"
-/>
-`;