Merge branch 'master' into 5782-update-breakdown-down-mixin

carbon-design-system · Apr 6, 2020 · f83bacd · f83bacd
2 parents de35015 + 7a2831f
commit f83bacd
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 27 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -3523,6 +3523,7 @@ $carbon--spacing-08: 2.5rem;
 - **Used by**:
   - [snippet [mixin]](#snippet-mixin)
   - [listbox [mixin]](#listbox-mixin)
+  - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [search [mixin]](#search-mixin)
   - [text-area [mixin]](#text-area-mixin)
   - [text-input [mixin]](#text-input-mixin)
@@ -3548,6 +3549,7 @@ $carbon--spacing-09: 3rem;
   - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [modal [mixin]](#modal-mixin)
+  - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [tile [mixin]](#tile-mixin)
 
 ### ✅carbon--spacing-10 [variable]
@@ -13975,12 +13977,6 @@ Button styles
     cursor: not-allowed;
   }
 
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
-    .#{$prefix}--assistive-text,
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before {
-    display: none;
-  }
-
   .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
     padding-left: rem(11px);
     padding-right: rem(11px);
@@ -19491,7 +19487,8 @@ Modal styles
   }
 
   .#{$prefix}--modal-container {
-    position: relative;
+    position: fixed;
+    top: 0;
     display: grid;
     grid-template-rows: auto 1fr auto;
     grid-template-columns: auto;
@@ -19508,6 +19505,7 @@ Modal styles
     transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
+      position: static;
       width: 84%;
       max-height: 90%;
       height: auto;
@@ -19874,6 +19872,7 @@ Inline notification styles
     @include reset;
 
     display: flex;
+    flex-wrap: wrap;
     position: relative;
     height: auto;
     min-height: rem(48px);
@@ -19886,6 +19885,7 @@ Inline notification styles
 
     @include carbon--breakpoint(md) {
       max-width: rem(608px);
+      flex-wrap: nowrap;
     }
 
     @include carbon--breakpoint(lg) {
@@ -20008,7 +20008,11 @@ Inline notification styles
   .#{$prefix}--inline-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $carbon--spacing-05;
+    margin: 0 $carbon--spacing-09 0 $carbon--spacing-05;
+
+    @include carbon--breakpoint(md) {
+      margin: 0 $carbon--spacing-05;
+    }
   }
 
   .#{$prefix}--inline-notification__icon {
@@ -20035,7 +20039,12 @@ Inline notification styles
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
     height: rem(32px);
-    margin: $carbon--spacing-03 0;
+    margin-bottom: $carbon--spacing-03;
+    margin-left: $carbon--spacing-08;
+
+    @include carbon--breakpoint(md) {
+      margin: $carbon--spacing-03 0;
+    }
 
     &,
     &:hover,
@@ -20062,6 +20071,9 @@ Inline notification styles
 
   .#{$prefix}--inline-notification__close-button {
     @include focus-outline('reset');
+    position: absolute;
+    top: 0;
+    right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -20085,6 +20097,10 @@ Inline notification styles
     .#{$prefix}--inline-notification__close-icon {
       fill: $inverse-01;
     }
+
+    @include carbon--breakpoint(md) {
+      position: static;
+    }
   }
 
   .#{$prefix}--inline-notification--low-contrast {
@@ -20128,8 +20144,10 @@ Inline notification styles
   - [support-04 [variable]](#support-04-variable)
   - [inverse-support-03 [variable]](#inverse-support-03-variable)
   - [support-03 [variable]](#support-03-variable)
+  - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
   - [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
 

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -234,12 +234,6 @@
     cursor: not-allowed;
   }
 
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
-    .#{$prefix}--assistive-text,
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before {
-    display: none;
-  }
-
   .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
     padding-left: rem(11px);
     padding-right: rem(11px);

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -67,7 +67,8 @@
   }
 
   .#{$prefix}--modal-container {
-    position: relative;
+    position: fixed;
+    top: 0;
     display: grid;
     grid-template-rows: auto 1fr auto;
     grid-template-columns: auto;
@@ -84,6 +85,7 @@
     transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
+      position: static;
       width: 84%;
       max-height: 90%;
       height: auto;

diff --git a/packages/components/src/components/time-picker/time-picker--light.hbs b/packages/components/src/components/time-picker/time-picker--light.hbs
@@ -6,9 +6,9 @@
 -->
 
 <div class="{{prefix}}--form-item">
+  <label for="time-picker-5" class="{{prefix}}--label">Select a time</label>
   <div class="{{prefix}}--time-picker{{#if light}} {{prefix}}--time-picker--light{{/if}}">
     <div class="{{prefix}}--time-picker__input">
-      <label for="time-picker-5" class="{{prefix}}--label">Select a time</label>
       <input id="time-picker-5" type="text"
         class="{{prefix}}--text-input{{#if light}} {{prefix}}--text-input--light{{/if}} {{prefix}}--time-picker__input-field"
         pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?" placeholder="hh:mm" maxlength="5" />

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2937,6 +2937,9 @@ Map {
       "description": Object {
         "type": "string",
       },
+      "id": Object {
+        "type": "string",
+      },
       "small": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -15,6 +15,7 @@ const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 function Loading({
+  id,
   active,
   className: customClassName,
   withOverlay,
@@ -32,7 +33,7 @@ function Loading({
     [`${prefix}--loading-overlay`]: true,
     [`${prefix}--loading-overlay--stop`]: !active,
   });
-  const loadingId = `loading-id-${instanceId}`;
+  const loadingId = id || `loading-id-${instanceId}`;
   const spinnerRadius = small ? '26.8125' : '37.5';
 
   const loading = (
@@ -73,6 +74,11 @@ function Loading({
 }
 
 Loading.propTypes = {
+  /**
+   * Provide an `id` to uniquely identify the label
+   */
+  id: PropTypes.string,
+
   /**
    * Specify whether you want the loading indicator to be spinning or not
    */

diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js
@@ -215,9 +215,9 @@ export default class TimePicker extends Component {
 
     return (
       <div className={`${prefix}--form-item`}>
+        {label}
         <div className={timePickerClasses}>
           <div className={`${prefix}--time-picker__input`}>
-            {label}
             <input
               {...other}
               {...timePickerInputProps}

diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -37,6 +37,13 @@ const { prefix } = settings;
  * @property {number} left The left position.
  */
 
+/**
+ * The structure for the target container.
+ * @typedef {object} FloatingMenu~container
+ * @property {DOMRect} rect Return of element.getBoundingClientRect()
+ * @property {string} position Position style (static, absolute, relative...)
+ */
+
 export const DIRECTION_LEFT = 'left';
 export const DIRECTION_TOP = 'top';
 export const DIRECTION_RIGHT = 'right';
@@ -71,6 +78,7 @@ const hasChangeInOffset = (oldMenuOffset = {}, menuOffset = {}) => {
  * @param {string} [params.direction=bottom] The menu direction.
  * @param {number} [params.scrollX=0] The scroll position of the viewport.
  * @param {number} [params.scrollY=0] The scroll position of the viewport.
+ * @param {FloatingMenu~container} [params.container] The size and position type of target element.
  * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
  * @private
  */
@@ -81,13 +89,24 @@ const getFloatingPosition = ({
   direction = DIRECTION_BOTTOM,
   scrollX = 0,
   scrollY = 0,
+  container,
 }) => {
   const {
     left: refLeft = 0,
     top: refTop = 0,
     right: refRight = 0,
     bottom: refBottom = 0,
   } = refPosition;
+  const relativeDiff =
+    container.position !== 'static'
+      ? {
+          top: container.rect.top,
+          left: container.rect.left,
+        }
+      : {
+          top: 0,
+          left: 0,
+        };
 
   const { width, height } = menuSize;
   const { top = 0, left = 0 } = offset;
@@ -96,20 +115,24 @@ const getFloatingPosition = ({
 
   return {
     [DIRECTION_LEFT]: () => ({
-      left: refLeft - width + scrollX - left,
-      top: refCenterVertical - height / 2 + scrollY + top - 9,
+      left: refLeft - width + scrollX - left - relativeDiff.left,
+      top:
+        refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top,
     }),
     [DIRECTION_TOP]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refTop - height + scrollY - top,
+      left:
+        refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refTop - height + scrollY - top - relativeDiff.top,
     }),
     [DIRECTION_RIGHT]: () => ({
-      left: refRight + scrollX + left,
-      top: refCenterVertical - height / 2 + scrollY + top + 3,
+      left: refRight + scrollX + left - relativeDiff.left,
+      top:
+        refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top,
     }),
     [DIRECTION_BOTTOM]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refBottom + scrollY + top,
+      left:
+        refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refBottom + scrollY + top - relativeDiff.top,
     }),
   }[direction]();
 };
@@ -269,6 +292,10 @@ class FloatingMenu extends React.Component {
             offset,
             scrollX: window.pageXOffset,
             scrollY: window.pageYOffset,
+            container: {
+              rect: this.props.target().getBoundingClientRect(),
+              position: getComputedStyle(this.props.target()).position,
+            },
           }),
         });
       }