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 ( -