diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 65b8306eb175..cb1fd2a8f5e1 100644 --- 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 index bb53c5345ab5..213a2127f4b8 100644 --- 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 index bcc73b6f5270..d2d7990c1541 100644 --- 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 index 2ba0a2ff6f5f..9430d5e5c716 100644 --- 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 index 38f85dab2af1..714ff5921298 100644 --- 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 ( -
- {itemAsArray[0]} - {itemAsArray[1]} -
- ); -}; - const ControlledComboBoxApp = props => { const [selectedItem, setSelectedItem] = useState(items[0]); let uid = items.length; @@ -119,24 +109,6 @@ storiesOf('ComboBox', module) }, } ) - .add( - 'items as components', - () => ( -
- (item ? item.text : '')} - itemToElement={itemToElement} - {...props()} - /> -
- ), - { - info: { - text: 'ComboBox', - }, - } - ) .add( 'application-level control for selection', () => , diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js index 28e271789a00..1057c5cf07b5 100644 --- 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 ( -
- {first} - {rest.join(' ')} -
- ); -}; - storiesOf('Dropdown', module) .addDecorator(withKnobs) .add( @@ -124,25 +109,6 @@ storiesOf('Dropdown', module) }, } ) - .add( - 'items as components', - () => ( -
- (item ? item.text : '')} - itemToElement={itemToElement} - onChange={action('onChange')} - /> -
- ), - { - 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 index 91555afe9c1a..825c449ad2db 100644 --- 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: ( - - Subtitle text goes here. Example link - - ), + subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'), iconDescription: text( 'Icon description (iconDescription)', 'describes the close button'