Merge branch 'master' into loading-explicit-id

carbon-design-system · Apr 3, 2020 · d149792 · d149792
2 parents c523131 + 254eaa0
commit d149792
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 71 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -22883,8 +22883,9 @@ Tabs styles
     @include carbon--breakpoint(md) {
       background: transparent;
       height: auto;
-      & + .#{$prefix}--tabs__nav-item {
-        margin-left: rem(2px);
+
+      + .#{$prefix}--tabs__nav-item {
+        margin-left: rem(1px);
       }
     }
   }

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -24,6 +24,7 @@
     @include reset;
 
     display: flex;
+    flex-wrap: wrap;
     position: relative;
     height: auto;
     min-height: rem(48px);
@@ -36,6 +37,7 @@
 
     @include carbon--breakpoint(md) {
       max-width: rem(608px);
+      flex-wrap: nowrap;
     }
 
     @include carbon--breakpoint(lg) {
@@ -158,7 +160,11 @@
   .#{$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 {
@@ -185,7 +191,12 @@
 
   .#{$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,
@@ -212,6 +223,9 @@
 
   .#{$prefix}--inline-notification__close-button {
     @include focus-outline('reset');
+    position: absolute;
+    top: 0;
+    right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -235,6 +249,10 @@
     .#{$prefix}--inline-notification__close-icon {
       fill: $inverse-01;
     }
+
+    @include carbon--breakpoint(md) {
+      position: static;
+    }
   }
 
   .#{$prefix}--inline-notification--low-contrast {

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -7,6 +7,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/layout';
 @import '../../globals/scss/tooltip';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';

diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -7,6 +7,8 @@
 
 @import 'helper-mixins';
 @import 'css--helpers';
+@import 'layout';
+@import 'typography';
 
 // Tooltip
 // Tooltip caret visual styles

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -56,16 +56,6 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-const itemToElement = item => {
-  const itemAsArray = item.text.split(' ');
-  return (
-    <div>
-      <span>{itemAsArray[0]}</span>
-      <span style={{ color: 'blue' }}> {itemAsArray[1]}</span>
-    </div>
-  );
-};
-
 const ControlledComboBoxApp = props => {
   const [selectedItem, setSelectedItem] = useState(items[0]);
   let uid = items.length;
@@ -119,24 +109,6 @@ storiesOf('ComboBox', module)
       },
     }
   )
-  .add(
-    'items as components',
-    () => (
-      <div style={{ width: 300 }}>
-        <ComboBox
-          items={items}
-          itemToString={item => (item ? item.text : '')}
-          itemToElement={itemToElement}
-          {...props()}
-        />
-      </div>
-    ),
-    {
-      info: {
-        text: 'ComboBox',
-      },
-    }
-  )
   .add(
     'application-level control for selection',
     () => <ControlledComboBoxApp {...props()} />,

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -72,21 +72,6 @@ const props = () => ({
   ),
 });
 
-const itemToElement = item => {
-  const [first, ...rest] = item.text.split(' ');
-  return (
-    <div
-      style={{
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-      }}>
-      <span>{first}</span>
-      <span style={{ color: 'blue' }}> {rest.join(' ')}</span>
-    </div>
-  );
-};
-
 storiesOf('Dropdown', module)
   .addDecorator(withKnobs)
   .add(
@@ -124,25 +109,6 @@ storiesOf('Dropdown', module)
       },
     }
   )
-  .add(
-    'items as components',
-    () => (
-      <div style={{ width: 300 }}>
-        <Dropdown
-          {...props()}
-          items={items}
-          itemToString={item => (item ? item.text : '')}
-          itemToElement={itemToElement}
-          onChange={action('onChange')}
-        />
-      </div>
-    ),
-    {
-      info: {
-        text: `Rendering items as custom components`,
-      },
-    }
-  )
   .add(
     'fully controlled',
     () => (

diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
@@ -26,11 +26,7 @@ const notificationProps = () => ({
   lowContrast: boolean('Use low contrast variant (lowContrast)', false),
   role: text('ARIA role (role)', 'alert'),
   title: text('Title (title)', 'Notification title'),
-  subtitle: (
-    <span>
-      Subtitle text goes here. <a href="#example">Example link</a>
-    </span>
-  ),
+  subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
   iconDescription: text(
     'Icon description (iconDescription)',
     'describes the close button'