diff --git a/config/stylelint-config-carbon/package.json b/config/stylelint-config-carbon/package.json index 9d788aa131b3..18c4b90189f3 100644 --- a/config/stylelint-config-carbon/package.json +++ b/config/stylelint-config-carbon/package.json @@ -1,7 +1,7 @@ { "name": "stylelint-config-carbon", "description": "Stylelint configuration for Carbon", - "version": "1.1.0", + "version": "1.2.0", "license": "Apache-2.0", "main": "index.js", "repository": "https://github.com/carbon-design-system/carbon/tree/master/config/stylelint-config-carbon", diff --git a/package.json b/package.json index eb6c95814e15..fd8c6e2adfef 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,8 @@ "perf", "refactor", "revert", - "test" + "test", + "style" ] ] } diff --git a/packages/colors/package.json b/packages/colors/package.json index eb327d48959a..ed013d0445cd 100644 --- a/packages/colors/package.json +++ b/packages/colors/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/colors", "description": "Colors for digital and software products using the Carbon Design System", - "version": "10.13.0", + "version": "10.14.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 39b7bd61967b..7433a02c4f32 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -2407,6 +2407,7 @@ Generate a media query for a given breakpoint - [toast-notifications [mixin]](#toast-notifications-mixin) - [pagination [mixin]](#pagination-mixin) - [unstable_pagination [mixin]](#unstable_pagination-mixin) + - [tabs [mixin]](#tabs-mixin) - [carbon-header [mixin]](#carbon-header-mixin) ### ✅carbon--container-01 [variable] @@ -3863,6 +3864,7 @@ $spacing-09: $carbon--spacing-09; - [modal [mixin]](#modal-mixin) - [search [mixin]](#search-mixin) - [select [mixin]](#select-mixin) + - [tabs [mixin]](#tabs-mixin) - [carbon-side-nav [mixin]](#carbon-side-nav-mixin) ### ✅spacing-10 [variable] @@ -6863,6 +6865,7 @@ $ui-05: if( - [progress-indicator [mixin]](#progress-indicator-mixin) - [select [mixin]](#select-mixin) - [slider [mixin]](#slider-mixin) + - [tabs [mixin]](#tabs-mixin) - [tile [mixin]](#tile-mixin) ### ✅text-01 [variable] @@ -7035,9 +7038,6 @@ $text-05: if( - **Type**: `{undefined}` - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) - - [date-picker [mixin]](#date-picker-mixin) - - [search [mixin]](#search-mixin) - - [time-picker [mixin]](#time-picker-mixin) ### ✅text-error [variable] @@ -7253,6 +7253,7 @@ $field-01: if( - [overflow-menu [mixin]](#overflow-menu-mixin) - [search [mixin]](#search-mixin) - [select [mixin]](#select-mixin) + - [tabs [mixin]](#tabs-mixin) - [text-area [mixin]](#text-area-mixin) - [text-input [mixin]](#text-input-mixin) @@ -7288,6 +7289,7 @@ $field-02: if( - [overflow-menu [mixin]](#overflow-menu-mixin) - [search [mixin]](#search-mixin) - [select [mixin]](#select-mixin) + - [tabs [mixin]](#tabs-mixin) - [text-area [mixin]](#text-area-mixin) - [text-input [mixin]](#text-input-mixin) - [time-picker [mixin]](#time-picker-mixin) @@ -7934,6 +7936,7 @@ $hover-ui: if( - [pagination [mixin]](#pagination-mixin) - [unstable_pagination [mixin]](#unstable_pagination-mixin) - [select [mixin]](#select-mixin) + - [tabs [mixin]](#tabs-mixin) - [tile [mixin]](#tile-mixin) - [time-picker [mixin]](#time-picker-mixin) - [treeview [mixin]](#treeview-mixin) @@ -17398,8 +17401,7 @@ Date picker styles } &::placeholder { - color: $text-05; - opacity: 1; + @include placeholder-colors; } } @@ -17474,7 +17476,6 @@ Date picker styles - [field-01 [variable]](#field-01-variable) - [ui-04 [variable]](#ui-04-variable) - [disabled-02 [variable]](#disabled-02-variable) - - [text-05 [variable]](#text-05-variable) - [icon-01 [variable]](#icon-01-variable) - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable) @@ -22619,8 +22620,7 @@ Search styles } &::placeholder { - color: $text-05; - font-weight: 400; + @include placeholder-colors; } &::-ms-clear { @@ -22636,7 +22636,6 @@ Search styles &::placeholder { color: $disabled; - font-weight: 400; } } @@ -22842,7 +22841,6 @@ Search styles - [text-01 [variable]](#text-01-variable) - [field-01 [variable]](#field-01-variable) - [ui-04 [variable]](#ui-04-variable) - - [text-05 [variable]](#text-05-variable) - [field-02 [variable]](#field-02-variable) - [spacing-07 [variable]](#spacing-07-variable) - [spacing-08 [variable]](#spacing-08-variable) @@ -23483,131 +23481,126 @@ Tabs styles @include reset; @include type-style('body-short-01'); - display: flex; + position: relative; width: 100%; height: auto; - min-height: rem(40px); color: $text-01; + @include carbon--breakpoint(md) { + min-height: rem(40px); + background: none; + } } .#{$prefix}--tabs--container { - min-height: rem(48px); + @include carbon--breakpoint(md) { + min-height: rem(48px); + } } - .#{$prefix}--tabs__nav { + .#{$prefix}--tabs-trigger { display: flex; - flex-direction: row; - width: auto; - max-width: 100%; - margin: 0; - padding: 0; - overflow: auto hidden; - list-style: none; - transition: max-height $duration--fast-01 motion(standard, productive); - - // hide scrollbars - scrollbar-width: none; - - &::-webkit-scrollbar { + align-items: center; + justify-content: space-between; + height: rem(40px); + padding: 0 $spacing-09 0 $spacing-05; + color: $text-01; + background-color: $field-01; + border-bottom: 1px solid $ui-04; + outline: 2px solid transparent; + cursor: pointer; + @include carbon--breakpoint(md) { display: none; } } - //----------------------------- - // Overflow Nav Buttons - //----------------------------- - .#{$prefix}--tabs__overflow-indicator--left, - .#{$prefix}--tabs__overflow-indicator--right { - z-index: 1; - flex: 1 0 auto; - width: $carbon--spacing-03; + .#{$prefix}--tabs-trigger:focus, + .#{$prefix}--tabs-trigger:active { + @include focus-outline('outline'); } - .#{$prefix}--tabs__overflow-indicator--left { - margin-right: -$carbon--spacing-03; - background-image: linear-gradient(to left, transparent, $ui-background); + .#{$prefix}--tabs-trigger svg { + position: absolute; + right: $spacing-05; + transition: transform $duration--fast-01 motion(standard, productive); + fill: $ui-05; } - .#{$prefix}--tabs__overflow-indicator--right { - margin-left: -$carbon--spacing-03; - background-image: linear-gradient(to right, transparent, $ui-background); - } + .#{$prefix}--tabs-trigger--open:focus, + .#{$prefix}--tabs-trigger--open:active { + @include focus-outline('reset'); - .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, transparent, $ui-01); + transition: outline $duration--fast-01 motion(standard, productive); } - .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, transparent, $ui-01); + .#{$prefix}--tabs-trigger--open { + background: $ui-03; } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, transparent, $ui-03); + .#{$prefix}--tabs-trigger--open svg { + @include rotate(-180deg, $duration--fast-01, 50% 45%); } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, transparent, $ui-03); + // There is only a difference in tab color when in mobile/dropdown view + .#{$prefix}--tabs--light.#{$prefix}--tabs-trigger { + background-color: $field-02; } - // Safari-only media query - // won't appear correctly with CSS custom properties - // see: code snippet and modal overflow indicators - @media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .#{$prefix}--tabs__overflow-indicator--left { - margin-right: -$carbon--spacing-05; - background-image: linear-gradient( - to left, - rgba($ui-background, 0), - $ui-background - ); - } + .#{$prefix}--tabs-trigger-text { + padding-top: 2px; + overflow: hidden; + color: $text-01; + font-weight: 400; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + } - .#{$prefix}--tabs__overflow-indicator--right { - margin-left: -$carbon--spacing-05; - background-image: linear-gradient( - to right, - rgba($ui-background, 0), - $ui-background - ); - } + .#{$prefix}--tabs-trigger-text:hover { + color: $text-01; + } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03); - } - .#{$prefix}--tabs--container - .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03); - } - } + .#{$prefix}--tabs-trigger-text:focus { + outline: none; } - .#{$prefix}--tab--overflow-nav-button { - @include button-reset; + .#{$prefix}--tabs__nav { + @include box-shadow; + position: absolute; + z-index: z('dropdown'); display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - width: $carbon--spacing-08; + flex-direction: column; + width: 100%; + max-height: 600px; - &:focus { - @include focus-outline('outline'); - } - } + margin: 0; + padding: 0; + list-style: none; + background: $ui-01; + transition: max-height $duration--fast-01 motion(standard, productive); - .#{$prefix}--tab--overflow-nav-button--hidden { - display: none; + @include carbon--breakpoint(md) { + z-index: auto; + flex-direction: row; + width: auto; + background: none; + box-shadow: none; + transition: inherit; + } } - .#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button { - width: $carbon--spacing-09; - margin: 0; - background-color: $ui-03; - } + .#{$prefix}--tabs__nav--hidden { + max-height: 0; + overflow: hidden; + transition: max-height $duration--fast-01 motion(standard, productive); - .#{$prefix}--tab--overflow-nav-button svg { - fill: $icon-01; + @include carbon--breakpoint(md) { + display: flex; + max-width: 100%; + max-height: none; + overflow-x: auto; + transition: inherit; + } } //----------------------------- @@ -23617,34 +23610,38 @@ Tabs styles @include reset; display: flex; + width: 100%; + height: rem(40px); padding: 0; + background-color: $ui-01; cursor: pointer; transition: background-color $duration--fast-01 motion(standard, productive); - } - .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item { - margin-left: rem(1px); + @include carbon--breakpoint(md) { + height: auto; + background: transparent; + + + .#{$prefix}--tabs__nav-item { + margin-left: rem(1px); + } + } } .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item { - background-color: $ui-03; - } + @include carbon--breakpoint(md) { + background-color: $ui-03; - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item - + .#{$prefix}--tabs__nav-item { - margin-left: 0; - // Draws the border without affecting the inner-content - box-shadow: rem(-1px) 0 0 0 $ui-04; - } + + .#{$prefix}--tabs__nav-item { + margin-left: 0; + // Draws the border without affecting the inner-content + box-shadow: -1px 0 0 0 $ui-04; + } - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item - + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected - + .#{$prefix}--tabs__nav-item { - box-shadow: none; + + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected, + &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item { + box-shadow: none; + } + } } .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link { @@ -23656,8 +23653,30 @@ Tabs styles //----------------------------- // Item Hover //----------------------------- - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover { - background-color: $hover-selected-ui; + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected) { + @include carbon--breakpoint(md) { + background: transparent; + } + } + + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + background-color: $hover-ui; + box-shadow: 0 -1px 0 $hover-ui; + + @include carbon--breakpoint(md) { + background-color: transparent; + + + .#{$prefix}--tabs__nav-item { + box-shadow: none; + } + } + } + + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + @include carbon--breakpoint(md) { + background-color: $hover-selected-ui; + } } //--------------------------------------------- @@ -23665,7 +23684,6 @@ Tabs styles //--------------------------------------------- .#{$prefix}--tabs__nav-item--disabled, .#{$prefix}--tabs__nav-item--disabled:hover { - background-color: transparent; outline: none; cursor: not-allowed; } @@ -23674,94 +23692,138 @@ Tabs styles .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled, .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover { - background-color: $disabled-02; + @include carbon--breakpoint(md) { + background-color: $disabled-02; + } + } + + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item--disabled + .#{$prefix}--tabs__nav-link { + @include carbon--breakpoint(md) { + color: $disabled-03; + border-bottom: none; + } } //----------------------------- // Item Selected //----------------------------- - .#{$prefix}--tabs__nav-item--selected { + .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) { + display: none; + border: none; transition: color $duration--fast-01 motion(standard, productive); - } - - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link, - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active { - @include type-style('productive-heading-01'); - - color: $text-01; - border-bottom: 2px solid $interactive-04; - } - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover { - background-color: $ui-01; + @include carbon--breakpoint(md) { + display: flex; + .#{$prefix}--tabs__nav-link, + .#{$prefix}--tabs__nav-link:focus, + .#{$prefix}--tabs__nav-link:active { + @include type-style('productive-heading-01'); - .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-link:active { - box-shadow: none; + color: $text-01; + border-bottom: 2px solid $interactive-04; + } } } .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected - .#{$prefix}--tabs__nav-link { - // height - vertical padding - line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); - // Draws the border without affecting the inner-content - box-shadow: inset 0 2px 0 0 $interactive-04; - } + .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled), + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + @include carbon--breakpoint(md) { + background-color: $ui-01; + + .#{$prefix}--tabs__nav-link { + padding: $spacing-03 $spacing-05; + // height - vertical padding + // Draws the border without affecting the inner-content + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: none; + box-shadow: inset 0 2px 0 0 $interactive-04; + } - .#{$prefix}--tabs--light.#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--light.#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected:hover { - background-color: $ui-background; + .#{$prefix}--tabs__nav-link:focus, + .#{$prefix}--tabs__nav-link:active { + box-shadow: none; + } + } } //----------------------------- // Link //----------------------------- - .#{$prefix}--tabs__nav-link { + a.#{$prefix}--tabs__nav-link { @include focus-outline('reset'); - width: rem(160px); - padding: $spacing-04 $spacing-05 $spacing-03; + display: inline-block; + width: calc(100% - 32px); + height: rem(40px); + margin: 0 $spacing-05; + padding: $spacing-04 0; overflow: hidden; color: $text-02; + font-weight: 400; + line-height: 1rem; white-space: nowrap; text-decoration: none; text-overflow: ellipsis; - border-bottom: $tab-underline-color; + border-bottom: 1px solid $ui-03; transition: border $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); &:focus, &:active { @include focus-outline('outline'); + + width: 100%; + margin: 0; + padding-left: 16px; + } + + @include carbon--breakpoint(md) { + width: rem(160px); + margin: 0; + padding: $spacing-04 $spacing-05 $spacing-03; + line-height: inherit; + border-bottom: $tab-underline-color; + + &:focus, + &:active { + width: rem(160px); + border-bottom: 2px; + } } } - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link { - height: rem(48px); - padding: $spacing-03 $spacing-05; - // height - vertical padding - line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); - border-bottom: 0; + .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link { + @include carbon--breakpoint(md) { + height: rem(48px); + padding: $spacing-03 $spacing-05; + // Height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: none; + } } //----------------------------- // Link Hover //----------------------------- - .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link { + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) + .#{$prefix}--tabs__nav-link { color: $text-01; - border-bottom: $tab-underline-color-hover; + @include carbon--breakpoint(md) { + color: $text-01; + border-bottom: $tab-underline-color-hover; + } } .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) .#{$prefix}--tabs__nav-link { - border-bottom: none; + @include carbon--breakpoint(md) { + border-bottom: none; + } } //----------------------------- @@ -23770,47 +23832,28 @@ Tabs styles .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link { color: $tab-text-disabled; border-bottom: $tab-underline-disabled; + pointer-events: none; } .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link { - color: $tab-text-disabled; border-bottom: $tab-underline-disabled; - cursor: not-allowed; - pointer-events: none; + cursor: no-drop; } .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active { + .#{$prefix}--tabs__nav-item--disabled a.#{$prefix}--tabs__nav-link:active { border-bottom: $tab-underline-disabled; outline: none; } - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled:hover - .#{$prefix}--tabs__nav-link { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled + //----------------------------- + // Link Focus + //----------------------------- + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link:active { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link { - color: $disabled-03; - border-bottom: none; + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) + a.#{$prefix}--tabs__nav-link:active { + color: $text-02; } //----------------------------- @@ -23832,18 +23875,409 @@ Tabs styles @include skeleton; width: rem(75px); + height: rem(12px); } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger { @include skeleton; - width: rem(75px); - margin-right: rem(1px); + width: rem(100px); } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg { @include hidden; } + + // TODO: remove namespace and suffix in next major release + .#{$prefix}--tabs--scrollable { + .#{$prefix}--tabs--scrollable { + @include reset; + @include type-style('body-short-01'); + + display: flex; + width: 100%; + height: auto; + min-height: rem(40px); + color: $text-01; + } + + .#{$prefix}--tabs--scrollable--container { + min-height: rem(48px); + } + + .#{$prefix}--tabs--scrollable__nav { + display: flex; + flex-direction: row; + width: auto; + max-width: 100%; + margin: 0; + padding: 0; + overflow: auto hidden; + list-style: none; + transition: max-height $duration--fast-01 motion(standard, productive); + + // hide scrollbars + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + //----------------------------- + // Overflow Nav Buttons + //----------------------------- + .#{$prefix}--tabs__overflow-indicator--left, + .#{$prefix}--tabs__overflow-indicator--right { + z-index: 1; + flex: 1 0 auto; + width: $carbon--spacing-03; + } + + .#{$prefix}--tabs__overflow-indicator--left { + margin-right: -$carbon--spacing-03; + background-image: linear-gradient(to left, transparent, $ui-background); + } + + .#{$prefix}--tabs__overflow-indicator--right { + margin-left: -$carbon--spacing-03; + background-image: linear-gradient(to right, transparent, $ui-background); + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, transparent, $ui-01); + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, transparent, $ui-01); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, transparent, $ui-03); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, transparent, $ui-03); + } + + // Safari-only media query + // won't appear correctly with CSS custom properties + // see: code snippet and modal overflow indicators + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .#{$prefix}--tabs__overflow-indicator--left { + margin-right: -$carbon--spacing-05; + background-image: linear-gradient( + to left, + rgba($ui-background, 0), + $ui-background + ); + } + + .#{$prefix}--tabs__overflow-indicator--right { + margin-left: -$carbon--spacing-05; + background-image: linear-gradient( + to right, + rgba($ui-background, 0), + $ui-background + ); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03); + } + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03); + } + } + } + + .#{$prefix}--tab--overflow-nav-button { + @include button-reset; + + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: $carbon--spacing-08; + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--tab--overflow-nav-button--hidden { + display: none; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tab--overflow-nav-button { + width: $carbon--spacing-09; + margin: 0; + background-color: $ui-03; + } + + .#{$prefix}--tab--overflow-nav-button svg { + fill: $icon-01; + } + + //----------------------------- + // Item + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item { + @include reset; + + display: flex; + padding: 0; + cursor: pointer; + transition: background-color $duration--fast-01 motion(standard, productive); + } + + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item { + margin-left: rem(1px); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item { + background-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item { + margin-left: 0; + // Draws the border without affecting the inner-content + box-shadow: rem(-1px) 0 0 0 $ui-04; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected + + .#{$prefix}--tabs--scrollable__nav-item { + box-shadow: none; + } + + .#{$prefix}--tabs--scrollable__nav-item + .#{$prefix}--tabs--scrollable__nav-link { + transition: color $duration--fast-01 motion(standard, productive), border-bottom-color + $duration--fast-01 motion(standard, productive), + outline $duration--fast-01 motion(standard, productive); + } + + //----------------------------- + // Item Hover + //----------------------------- + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item:hover { + background-color: $hover-selected-ui; + } + + //--------------------------------------------- + // Item Disabled + //--------------------------------------------- + .#{$prefix}--tabs--scrollable__nav-item--disabled, + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover { + background-color: transparent; + outline: none; + cursor: not-allowed; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover { + background-color: $disabled-02; + } + + //----------------------------- + // Item Selected + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item--selected { + transition: color $duration--fast-01 motion(standard, productive); + } + + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link, + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link:active { + @include type-style('productive-heading-01'); + + color: $text-01; + border-bottom: 2px solid $interactive-04; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected:hover { + background-color: $ui-01; + + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-link:active { + box-shadow: none; + } + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link { + // height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + // Draws the border without affecting the inner-content + box-shadow: inset 0 2px 0 0 $interactive-04; + } + + .#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected:hover { + background-color: $ui-background; + } + + //----------------------------- + // Link + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-link { + @include focus-outline('reset'); + + width: rem(160px); + padding: $spacing-04 $spacing-05 $spacing-03; + overflow: hidden; + color: $text-02; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + border-bottom: $tab-underline-color; + transition: border $duration--fast-01 motion(standard, productive), outline + $duration--fast-01 motion(standard, productive); + + &:focus, + &:active { + @include focus-outline('outline'); + } + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-link { + height: rem(48px); + padding: $spacing-03 $spacing-05; + // height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: 0; + } + + //----------------------------- + // Link Hover + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item:hover + .#{$prefix}--tabs--scrollable__nav-link { + color: $text-01; + border-bottom: $tab-underline-color-hover; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom: none; + } + + //----------------------------- + // Link Disabled + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + color: $tab-text-disabled; + border-bottom: $tab-underline-disabled; + } + + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover + .#{$prefix}--tabs--scrollable__nav-link { + color: $tab-text-disabled; + border-bottom: $tab-underline-disabled; + cursor: not-allowed; + pointer-events: none; + } + + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:active { + border-bottom: $tab-underline-disabled; + outline: none; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:active { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + color: $disabled-03; + border-bottom: none; + } + + //----------------------------- + // Tab Content Container + //----------------------------- + .#{$prefix}--tab-content { + padding: $carbon--spacing-05; + } + + //----------------------------- + // Skeleton state + //----------------------------- + .#{$prefix}--tabs.#{$prefix}--skeleton { + cursor: default; + pointer-events: none; + } + + .#{$prefix}--tabs.#{$prefix}--skeleton + .#{$prefix}--tabs--scrollable__nav-link { + @include skeleton; + + width: rem(75px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger { + @include skeleton; + + width: rem(75px); + margin-right: rem(1px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg { + @include hidden; + } + } } ``` @@ -23851,25 +24285,31 @@ Tabs styles - **Group**: [tabs](#tabs) - **Requires**: + - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin) - [prefix [variable]](#prefix-variable) - [text-01 [variable]](#text-01-variable) - - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable) - - [ui-background [variable]](#ui-background-variable) - - [ui-01 [variable]](#ui-01-variable) - - [ui-03 [variable]](#ui-03-variable) - - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable) - - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable) - - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable) - - [icon-01 [variable]](#icon-01-variable) + - [spacing-09 [variable]](#spacing-09-variable) + - [spacing-05 [variable]](#spacing-05-variable) + - [field-01 [variable]](#field-01-variable) - [ui-04 [variable]](#ui-04-variable) + - [ui-05 [variable]](#ui-05-variable) + - [ui-03 [variable]](#ui-03-variable) + - [field-02 [variable]](#field-02-variable) + - [ui-01 [variable]](#ui-01-variable) + - [hover-ui [variable]](#hover-ui-variable) - [hover-selected-ui [variable]](#hover-selected-ui-variable) - [disabled-02 [variable]](#disabled-02-variable) + - [disabled-03 [variable]](#disabled-03-variable) - [interactive-04 [variable]](#interactive-04-variable) - [spacing-03 [variable]](#spacing-03-variable) - [spacing-04 [variable]](#spacing-04-variable) - - [spacing-05 [variable]](#spacing-05-variable) - [text-02 [variable]](#text-02-variable) - - [disabled-03 [variable]](#disabled-03-variable) + - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable) + - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable) + - [ui-background [variable]](#ui-background-variable) + - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable) + - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable) + - [icon-01 [variable]](#icon-01-variable) ## tag @@ -24561,6 +25001,13 @@ Tile styles &:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } } @@ -24644,6 +25091,13 @@ Tile styles transform-origin: center; transition: $duration--fast-02 motion(standard, productive); fill: $ui-05; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } &:hover { @@ -24707,6 +25161,13 @@ Tile styles > .#{$prefix}--tile__checkmark svg { fill: $ui-05; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } .#{$prefix}--tile-content { @@ -24787,7 +25248,7 @@ Time picker styles $duration--fast-01 motion(standard, productive); &::placeholder { - color: $text-05; + @include placeholder-colors; } } @@ -24815,7 +25276,6 @@ Time picker styles - **Requires**: - [prefix [variable]](#prefix-variable) - [carbon--spacing-01 [variable]](#carbon--spacing-01-variable) - - [text-05 [variable]](#text-05-variable) - [field-02 [variable]](#field-02-variable) - [hover-ui [variable]](#hover-ui-variable) - [disabled-02 [variable]](#disabled-02-variable) @@ -25252,7 +25712,7 @@ Toggle styles .#{$prefix}--toggle-input--small:disabled:checked + .#{$prefix}--toggle-input__label .#{$prefix}--toggle__check { - fill: $disabled-02; + fill: $disabled-01; } //---------------------------------------------- diff --git a/packages/components/package.json b/packages/components/package.json index d83a1831c1f2..164691d1b48e 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "10.20.0", + "version": "10.21.0", "license": "Apache-2.0", "main": "umd/index.js", "module": "es/index.js", @@ -79,9 +79,9 @@ "@babel/preset-env": "^7.10.0", "@babel/preset-react": "^7.10.0", "@babel/runtime": "^7.10.0", - "@carbon/elements": "^10.19.0", - "@carbon/icons-handlebars": "^10.18.0", - "@carbon/icons-react": "^10.18.0", + "@carbon/elements": "^10.20.0", + "@carbon/icons-handlebars": "^10.19.0", + "@carbon/icons-react": "^10.19.0", "@carbon/test-utils": "^10.11.0", "@frctl/fractal": "^1.1.0", "adaro": "1.0.4", diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss index 0c42251f3c97..63c1de491ab8 100644 --- a/packages/components/src/components/content-switcher/_content-switcher.scss +++ b/packages/components/src/components/content-switcher/_content-switcher.scss @@ -48,7 +48,8 @@ &:focus { z-index: 3; - box-shadow: inset 0 0 0 2px $focus; + border-color: $focus; + box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $ui-01; } &:hover { diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss index 62eab7fbacb3..e690b1866e80 100644 --- a/packages/components/src/components/date-picker/_date-picker.scss +++ b/packages/components/src/components/date-picker/_date-picker.scss @@ -96,8 +96,7 @@ } &::placeholder { - color: $text-05; - opacity: 1; + @include placeholder-colors; } } diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss index 61d4286fc0e6..91b96e1cd0a8 100644 --- a/packages/components/src/components/search/_search.scss +++ b/packages/components/src/components/search/_search.scss @@ -52,8 +52,7 @@ } &::placeholder { - color: $text-05; - font-weight: 400; + @include placeholder-colors; } &::-ms-clear { @@ -69,7 +68,6 @@ &::placeholder { color: $disabled; - font-weight: 400; } } diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss index db536a75fc0f..aa232abfdd1b 100644 --- a/packages/components/src/components/tabs/_tabs.scss +++ b/packages/components/src/components/tabs/_tabs.scss @@ -22,131 +22,126 @@ @include reset; @include type-style('body-short-01'); - display: flex; + position: relative; width: 100%; height: auto; - min-height: rem(40px); color: $text-01; + @include carbon--breakpoint(md) { + min-height: rem(40px); + background: none; + } } .#{$prefix}--tabs--container { - min-height: rem(48px); + @include carbon--breakpoint(md) { + min-height: rem(48px); + } } - .#{$prefix}--tabs__nav { + .#{$prefix}--tabs-trigger { display: flex; - flex-direction: row; - width: auto; - max-width: 100%; - margin: 0; - padding: 0; - overflow: auto hidden; - list-style: none; - transition: max-height $duration--fast-01 motion(standard, productive); - - // hide scrollbars - scrollbar-width: none; - - &::-webkit-scrollbar { + align-items: center; + justify-content: space-between; + height: rem(40px); + padding: 0 $spacing-09 0 $spacing-05; + color: $text-01; + background-color: $field-01; + border-bottom: 1px solid $ui-04; + outline: 2px solid transparent; + cursor: pointer; + @include carbon--breakpoint(md) { display: none; } } - //----------------------------- - // Overflow Nav Buttons - //----------------------------- - .#{$prefix}--tabs__overflow-indicator--left, - .#{$prefix}--tabs__overflow-indicator--right { - z-index: 1; - flex: 1 0 auto; - width: $carbon--spacing-03; + .#{$prefix}--tabs-trigger:focus, + .#{$prefix}--tabs-trigger:active { + @include focus-outline('outline'); } - .#{$prefix}--tabs__overflow-indicator--left { - margin-right: -$carbon--spacing-03; - background-image: linear-gradient(to left, transparent, $ui-background); + .#{$prefix}--tabs-trigger svg { + position: absolute; + right: $spacing-05; + transition: transform $duration--fast-01 motion(standard, productive); + fill: $ui-05; } - .#{$prefix}--tabs__overflow-indicator--right { - margin-left: -$carbon--spacing-03; - background-image: linear-gradient(to right, transparent, $ui-background); - } + .#{$prefix}--tabs-trigger--open:focus, + .#{$prefix}--tabs-trigger--open:active { + @include focus-outline('reset'); - .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, transparent, $ui-01); + transition: outline $duration--fast-01 motion(standard, productive); } - .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, transparent, $ui-01); + .#{$prefix}--tabs-trigger--open { + background: $ui-03; } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, transparent, $ui-03); + .#{$prefix}--tabs-trigger--open svg { + @include rotate(-180deg, $duration--fast-01, 50% 45%); } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, transparent, $ui-03); + // There is only a difference in tab color when in mobile/dropdown view + .#{$prefix}--tabs--light.#{$prefix}--tabs-trigger { + background-color: $field-02; } - // Safari-only media query - // won't appear correctly with CSS custom properties - // see: code snippet and modal overflow indicators - @media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .#{$prefix}--tabs__overflow-indicator--left { - margin-right: -$carbon--spacing-05; - background-image: linear-gradient( - to left, - rgba($ui-background, 0), - $ui-background - ); - } + .#{$prefix}--tabs-trigger-text { + padding-top: 2px; + overflow: hidden; + color: $text-01; + font-weight: 400; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + } - .#{$prefix}--tabs__overflow-indicator--right { - margin-left: -$carbon--spacing-05; - background-image: linear-gradient( - to right, - rgba($ui-background, 0), - $ui-background - ); - } + .#{$prefix}--tabs-trigger-text:hover { + color: $text-01; + } - .#{$prefix}--tabs--container .#{$prefix}--tabs__overflow-indicator--left { - background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03); - } - .#{$prefix}--tabs--container - .#{$prefix}--tabs__overflow-indicator--right { - background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03); - } - } + .#{$prefix}--tabs-trigger-text:focus { + outline: none; } - .#{$prefix}--tab--overflow-nav-button { - @include button-reset; + .#{$prefix}--tabs__nav { + @include box-shadow; + position: absolute; + z-index: z('dropdown'); display: flex; - flex-shrink: 0; - align-items: center; - justify-content: center; - width: $carbon--spacing-08; + flex-direction: column; + width: 100%; + max-height: 600px; - &:focus { - @include focus-outline('outline'); - } - } + margin: 0; + padding: 0; + list-style: none; + background: $ui-01; + transition: max-height $duration--fast-01 motion(standard, productive); - .#{$prefix}--tab--overflow-nav-button--hidden { - display: none; + @include carbon--breakpoint(md) { + z-index: auto; + flex-direction: row; + width: auto; + background: none; + box-shadow: none; + transition: inherit; + } } - .#{$prefix}--tabs--container .#{$prefix}--tab--overflow-nav-button { - width: $carbon--spacing-09; - margin: 0; - background-color: $ui-03; - } + .#{$prefix}--tabs__nav--hidden { + max-height: 0; + overflow: hidden; + transition: max-height $duration--fast-01 motion(standard, productive); - .#{$prefix}--tab--overflow-nav-button svg { - fill: $icon-01; + @include carbon--breakpoint(md) { + display: flex; + max-width: 100%; + max-height: none; + overflow-x: auto; + transition: inherit; + } } //----------------------------- @@ -156,34 +151,38 @@ @include reset; display: flex; + width: 100%; + height: rem(40px); padding: 0; + background-color: $ui-01; cursor: pointer; transition: background-color $duration--fast-01 motion(standard, productive); - } - .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item { - margin-left: rem(1px); + @include carbon--breakpoint(md) { + height: auto; + background: transparent; + + + .#{$prefix}--tabs__nav-item { + margin-left: rem(1px); + } + } } .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item { - background-color: $ui-03; - } + @include carbon--breakpoint(md) { + background-color: $ui-03; - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item - + .#{$prefix}--tabs__nav-item { - margin-left: 0; - // Draws the border without affecting the inner-content - box-shadow: rem(-1px) 0 0 0 $ui-04; - } + + .#{$prefix}--tabs__nav-item { + margin-left: 0; + // Draws the border without affecting the inner-content + box-shadow: -1px 0 0 0 $ui-04; + } - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item - + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected - + .#{$prefix}--tabs__nav-item { - box-shadow: none; + + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected, + &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item { + box-shadow: none; + } + } } .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link { @@ -195,8 +194,30 @@ //----------------------------- // Item Hover //----------------------------- - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover { - background-color: $hover-selected-ui; + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected) { + @include carbon--breakpoint(md) { + background: transparent; + } + } + + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + background-color: $hover-ui; + box-shadow: 0 -1px 0 $hover-ui; + + @include carbon--breakpoint(md) { + background-color: transparent; + + + .#{$prefix}--tabs__nav-item { + box-shadow: none; + } + } + } + + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + @include carbon--breakpoint(md) { + background-color: $hover-selected-ui; + } } //--------------------------------------------- @@ -204,7 +225,6 @@ //--------------------------------------------- .#{$prefix}--tabs__nav-item--disabled, .#{$prefix}--tabs__nav-item--disabled:hover { - background-color: transparent; outline: none; cursor: not-allowed; } @@ -213,94 +233,138 @@ .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled, .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover { - background-color: $disabled-02; + @include carbon--breakpoint(md) { + background-color: $disabled-02; + } + } + + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item--disabled + .#{$prefix}--tabs__nav-link { + @include carbon--breakpoint(md) { + color: $disabled-03; + border-bottom: none; + } } //----------------------------- // Item Selected //----------------------------- - .#{$prefix}--tabs__nav-item--selected { + .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled) { + display: none; + border: none; transition: color $duration--fast-01 motion(standard, productive); - } - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link, - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active { - @include type-style('productive-heading-01'); - - color: $text-01; - border-bottom: 2px solid $interactive-04; - } - - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover { - background-color: $ui-01; + @include carbon--breakpoint(md) { + display: flex; + .#{$prefix}--tabs__nav-link, + .#{$prefix}--tabs__nav-link:focus, + .#{$prefix}--tabs__nav-link:active { + @include type-style('productive-heading-01'); - .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-link:active { - box-shadow: none; + color: $text-01; + border-bottom: 2px solid $interactive-04; + } } } .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected - .#{$prefix}--tabs__nav-link { - // height - vertical padding - line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); - // Draws the border without affecting the inner-content - box-shadow: inset 0 2px 0 0 $interactive-04; - } + .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled), + .#{$prefix}--tabs--container + .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) { + @include carbon--breakpoint(md) { + background-color: $ui-01; + + .#{$prefix}--tabs__nav-link { + padding: $spacing-03 $spacing-05; + // height - vertical padding + // Draws the border without affecting the inner-content + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: none; + box-shadow: inset 0 2px 0 0 $interactive-04; + } - .#{$prefix}--tabs--light.#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected, - .#{$prefix}--tabs--light.#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--selected:hover { - background-color: $ui-background; + .#{$prefix}--tabs__nav-link:focus, + .#{$prefix}--tabs__nav-link:active { + box-shadow: none; + } + } } //----------------------------- // Link //----------------------------- - .#{$prefix}--tabs__nav-link { + a.#{$prefix}--tabs__nav-link { @include focus-outline('reset'); - width: rem(160px); - padding: $spacing-04 $spacing-05 $spacing-03; + display: inline-block; + width: calc(100% - 32px); + height: rem(40px); + margin: 0 $spacing-05; + padding: $spacing-04 0; overflow: hidden; color: $text-02; + font-weight: 400; + line-height: 1rem; white-space: nowrap; text-decoration: none; text-overflow: ellipsis; - border-bottom: $tab-underline-color; + border-bottom: 1px solid $ui-03; transition: border $duration--fast-01 motion(standard, productive), outline $duration--fast-01 motion(standard, productive); &:focus, &:active { @include focus-outline('outline'); + + width: 100%; + margin: 0; + padding-left: 16px; + } + + @include carbon--breakpoint(md) { + width: rem(160px); + margin: 0; + padding: $spacing-04 $spacing-05 $spacing-03; + line-height: inherit; + border-bottom: $tab-underline-color; + + &:focus, + &:active { + width: rem(160px); + border-bottom: 2px; + } } } - .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link { - height: rem(48px); - padding: $spacing-03 $spacing-05; - // height - vertical padding - line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); - border-bottom: 0; + .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link { + @include carbon--breakpoint(md) { + height: rem(48px); + padding: $spacing-03 $spacing-05; + // Height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: none; + } } //----------------------------- // Link Hover //----------------------------- - .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link { + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) + .#{$prefix}--tabs__nav-link { color: $text-01; - border-bottom: $tab-underline-color-hover; + @include carbon--breakpoint(md) { + color: $text-01; + border-bottom: $tab-underline-color-hover; + } } .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) .#{$prefix}--tabs__nav-link { - border-bottom: none; + @include carbon--breakpoint(md) { + border-bottom: none; + } } //----------------------------- @@ -309,47 +373,28 @@ .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link { color: $tab-text-disabled; border-bottom: $tab-underline-disabled; + pointer-events: none; } .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link { - color: $tab-text-disabled; border-bottom: $tab-underline-disabled; - cursor: not-allowed; - pointer-events: none; + cursor: no-drop; } .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link:active { + .#{$prefix}--tabs__nav-item--disabled a.#{$prefix}--tabs__nav-link:active { border-bottom: $tab-underline-disabled; outline: none; } - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled:hover - .#{$prefix}--tabs__nav-link { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled + //----------------------------- + // Link Focus + //----------------------------- + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) .#{$prefix}--tabs__nav-link:focus, - .#{$prefix}--tabs--light - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link:active { - border-bottom-color: $ui-03; - } - - .#{$prefix}--tabs--container - .#{$prefix}--tabs__nav-item--disabled - .#{$prefix}--tabs__nav-link { - color: $disabled-03; - border-bottom: none; + .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) + a.#{$prefix}--tabs__nav-link:active { + color: $text-02; } //----------------------------- @@ -371,18 +416,410 @@ @include skeleton; width: rem(75px); + height: rem(12px); } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger { @include skeleton; - width: rem(75px); - margin-right: rem(1px); + width: rem(100px); } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg { @include hidden; } + + // TODO: remove namespace and suffix in next major release + .#{$prefix}--tabs--scrollable { + .#{$prefix}--tabs--scrollable { + @include reset; + @include type-style('body-short-01'); + + display: flex; + width: 100%; + height: auto; + min-height: rem(40px); + color: $text-01; + } + + .#{$prefix}--tabs--scrollable--container { + min-height: rem(48px); + } + + .#{$prefix}--tabs--scrollable__nav { + display: flex; + flex-direction: row; + width: auto; + max-width: 100%; + margin: 0; + padding: 0; + overflow: auto hidden; + list-style: none; + transition: max-height $duration--fast-01 motion(standard, productive); + + // hide scrollbars + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + //----------------------------- + // Overflow Nav Buttons + //----------------------------- + .#{$prefix}--tabs__overflow-indicator--left, + .#{$prefix}--tabs__overflow-indicator--right { + z-index: 1; + flex: 1 0 auto; + width: $carbon--spacing-03; + } + + .#{$prefix}--tabs__overflow-indicator--left { + margin-right: -$carbon--spacing-03; + background-image: linear-gradient(to left, transparent, $ui-background); + } + + .#{$prefix}--tabs__overflow-indicator--right { + margin-left: -$carbon--spacing-03; + background-image: linear-gradient(to right, transparent, $ui-background); + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, transparent, $ui-01); + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, transparent, $ui-01); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, transparent, $ui-03); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, transparent, $ui-03); + } + + // Safari-only media query + // won't appear correctly with CSS custom properties + // see: code snippet and modal overflow indicators + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .#{$prefix}--tabs__overflow-indicator--left { + margin-right: -$carbon--spacing-05; + background-image: linear-gradient( + to left, + rgba($ui-background, 0), + $ui-background + ); + } + + .#{$prefix}--tabs__overflow-indicator--right { + margin-left: -$carbon--spacing-05; + background-image: linear-gradient( + to right, + rgba($ui-background, 0), + $ui-background + ); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--left { + background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03); + } + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs__overflow-indicator--right { + background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03); + } + } + } + + .#{$prefix}--tab--overflow-nav-button { + @include button-reset; + + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: $carbon--spacing-08; + + &:focus { + @include focus-outline('outline'); + } + } + + .#{$prefix}--tab--overflow-nav-button--hidden { + display: none; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tab--overflow-nav-button { + width: $carbon--spacing-09; + margin: 0; + background-color: $ui-03; + } + + .#{$prefix}--tab--overflow-nav-button svg { + fill: $icon-01; + } + + //----------------------------- + // Item + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item { + @include reset; + + display: flex; + padding: 0; + cursor: pointer; + transition: background-color $duration--fast-01 + motion(standard, productive); + } + + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item { + margin-left: rem(1px); + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item { + background-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item { + margin-left: 0; + // Draws the border without affecting the inner-content + box-shadow: rem(-1px) 0 0 0 $ui-04; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--selected + + .#{$prefix}--tabs--scrollable__nav-item { + box-shadow: none; + } + + .#{$prefix}--tabs--scrollable__nav-item + .#{$prefix}--tabs--scrollable__nav-link { + transition: color $duration--fast-01 motion(standard, productive), + border-bottom-color $duration--fast-01 motion(standard, productive), + outline $duration--fast-01 motion(standard, productive); + } + + //----------------------------- + // Item Hover + //----------------------------- + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item:hover { + background-color: $hover-selected-ui; + } + + //--------------------------------------------- + // Item Disabled + //--------------------------------------------- + .#{$prefix}--tabs--scrollable__nav-item--disabled, + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover { + background-color: transparent; + outline: none; + cursor: not-allowed; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover { + background-color: $disabled-02; + } + + //----------------------------- + // Item Selected + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item--selected { + transition: color $duration--fast-01 motion(standard, productive); + } + + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link, + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link:active { + @include type-style('productive-heading-01'); + + color: $text-01; + border-bottom: 2px solid $interactive-04; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected:hover { + background-color: $ui-01; + + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-link:active { + box-shadow: none; + } + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected + .#{$prefix}--tabs--scrollable__nav-link { + // height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + // Draws the border without affecting the inner-content + box-shadow: inset 0 2px 0 0 $interactive-04; + } + + .#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected, + .#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--selected:hover { + background-color: $ui-background; + } + + //----------------------------- + // Link + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-link { + @include focus-outline('reset'); + + width: rem(160px); + padding: $spacing-04 $spacing-05 $spacing-03; + overflow: hidden; + color: $text-02; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + border-bottom: $tab-underline-color; + transition: border $duration--fast-01 motion(standard, productive), + outline $duration--fast-01 motion(standard, productive); + + &:focus, + &:active { + @include focus-outline('outline'); + } + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-link { + height: rem(48px); + padding: $spacing-03 $spacing-05; + // height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + border-bottom: 0; + } + + //----------------------------- + // Link Hover + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item:hover + .#{$prefix}--tabs--scrollable__nav-link { + color: $text-01; + border-bottom: $tab-underline-color-hover; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom: none; + } + + //----------------------------- + // Link Disabled + //----------------------------- + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + color: $tab-text-disabled; + border-bottom: $tab-underline-disabled; + } + + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover + .#{$prefix}--tabs--scrollable__nav-link { + color: $tab-text-disabled; + border-bottom: $tab-underline-disabled; + cursor: not-allowed; + pointer-events: none; + } + + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:active { + border-bottom: $tab-underline-disabled; + outline: none; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled:hover + .#{$prefix}--tabs--scrollable__nav-link { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:focus, + .#{$prefix}--tabs--scrollable--light + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link:active { + border-bottom-color: $ui-03; + } + + .#{$prefix}--tabs--scrollable--container + .#{$prefix}--tabs--scrollable__nav-item--disabled + .#{$prefix}--tabs--scrollable__nav-link { + color: $disabled-03; + border-bottom: none; + } + + //----------------------------- + // Tab Content Container + //----------------------------- + .#{$prefix}--tab-content { + padding: $carbon--spacing-05; + } + + //----------------------------- + // Skeleton state + //----------------------------- + .#{$prefix}--tabs.#{$prefix}--skeleton { + cursor: default; + pointer-events: none; + } + + .#{$prefix}--tabs.#{$prefix}--skeleton + .#{$prefix}--tabs--scrollable__nav-link { + @include skeleton; + + width: rem(75px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger { + @include skeleton; + + width: rem(75px); + margin-right: rem(1px); + } + + .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg { + @include hidden; + } + } } @include exports('tabs') { diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss index 6d577922b78a..2d8a8d27e6c5 100644 --- a/packages/components/src/components/tile/_tile.scss +++ b/packages/components/src/components/tile/_tile.scss @@ -30,6 +30,13 @@ &:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } } @@ -113,6 +120,13 @@ transform-origin: center; transition: $duration--fast-02 motion(standard, productive); fill: $ui-05; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } &:hover { @@ -176,6 +190,13 @@ > .#{$prefix}--tile__checkmark svg { fill: $ui-05; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } .#{$prefix}--tile-content { diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss index 2466a87a580f..d3acf9f0bf08 100644 --- a/packages/components/src/components/time-picker/_time-picker.scss +++ b/packages/components/src/components/time-picker/_time-picker.scss @@ -57,7 +57,7 @@ background-color $duration--fast-01 motion(standard, productive); &::placeholder { - color: $text-05; + @include placeholder-colors; } } diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss index b2cc4a28edaf..d8d78caca162 100644 --- a/packages/components/src/components/toggle/_toggle.scss +++ b/packages/components/src/components/toggle/_toggle.scss @@ -440,7 +440,7 @@ .#{$prefix}--toggle-input--small:disabled:checked + .#{$prefix}--toggle-input__label .#{$prefix}--toggle__check { - fill: $disabled-02; + fill: $disabled-01; } //---------------------------------------------- diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss index f1ef68a9cde8..a388acdc4944 100644 --- a/packages/components/src/components/ui-shell/_header.scss +++ b/packages/components/src/components/ui-shell/_header.scss @@ -66,6 +66,13 @@ .#{$prefix}--header__action:focus { border-color: $shell-header-focus; outline: none; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--header__action:active { @@ -198,6 +205,13 @@ color: $shell-header-text-01; border-color: $shell-header-focus; outline: none; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } a.#{$prefix}--header__menu-item:hover > svg, diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index eb339d67d30f..d32390ca95c3 100644 --- a/packages/components/src/components/ui-shell/_side-nav.scss +++ b/packages/components/src/components/ui-shell/_side-nav.scss @@ -377,6 +377,13 @@ .#{$prefix}--side-nav__submenu:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--side-nav__submenu-title { @@ -508,6 +515,13 @@ a.#{$prefix}--side-nav__link:focus, .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } a.#{$prefix}--side-nav__link[aria-current='page'], @@ -553,6 +567,12 @@ width: mini-units(2); height: mini-units(2); fill: $shell-side-nav-icon-01; + + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon { @@ -665,6 +685,13 @@ .#{$prefix}--header__menu-arrow, .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow { fill: $shell-side-nav-text-01; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } } diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss index 4fe96dab82ba..7b43f9deb9b2 100644 --- a/packages/components/src/globals/scss/_helper-mixins.scss +++ b/packages/components/src/globals/scss/_helper-mixins.scss @@ -46,7 +46,7 @@ /// @example @include placeholder-colors; /// @group global-helpers @mixin placeholder-colors { - color: $text-03; + color: $text-05; opacity: 1; } diff --git a/packages/elements/package.json b/packages/elements/package.json index 3e7fe5b4094d..ef88cb14b0b0 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/elements", "description": "A collection of design elements in code for the IBM Design Language", - "version": "10.19.0", + "version": "10.20.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -31,13 +31,13 @@ "clean": "rimraf es lib umd && node tasks/clean.js" }, "dependencies": { - "@carbon/colors": "^10.13.0", + "@carbon/colors": "^10.14.0", "@carbon/grid": "^10.15.0", - "@carbon/icons": "^10.18.0", + "@carbon/icons": "^10.19.0", "@carbon/import-once": "^10.3.0", "@carbon/layout": "^10.13.0", "@carbon/motion": "^10.9.0", - "@carbon/themes": "^10.19.0", + "@carbon/themes": "^10.20.0", "@carbon/type": "^10.16.0" }, "devDependencies": { diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json index 0e8c5d9b7806..b27d1d9c5ded 100644 --- a/packages/icons-handlebars/package.json +++ b/packages/icons-handlebars/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-handlebars", "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System", - "version": "10.18.0", + "version": "10.19.0", "license": "Apache-2.0", "main": "index.js", "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/icons-handlebars", @@ -23,7 +23,7 @@ }, "dependencies": { "@carbon/icon-helpers": "^10.9.0", - "@carbon/icons": "^10.18.0" + "@carbon/icons": "^10.19.0" }, "devDependencies": { "handlebars": "^4.0.12" diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index 223bba06933c..4580f1ca5c6c 100644 --- a/packages/icons-react/package.json +++ b/packages/icons-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-react", "description": "React components for icons in digital and software products using the Carbon Design System", - "version": "10.18.0", + "version": "10.19.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -33,7 +33,7 @@ }, "devDependencies": { "@carbon/icon-build-helpers": "^0.11.0", - "@carbon/icons": "^10.18.0" + "@carbon/icons": "^10.19.0" }, "sideEffects": false } diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index 5e933e0bc4f1..2b5b9b235864 100644 --- a/packages/icons-vue/package.json +++ b/packages/icons-vue/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons-vue", "description": "Vue components for icons in digital and software products using the Carbon Design System", - "version": "10.18.0", + "version": "10.19.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -28,7 +28,7 @@ }, "devDependencies": { "@carbon/cli-reporter": "^10.3.0", - "@carbon/icons": "^10.18.0", + "@carbon/icons": "^10.19.0", "fs-extra": "^8.1.0", "prettier": "^2.1.0", "rimraf": "^3.0.0", diff --git a/packages/icons/package.json b/packages/icons/package.json index f514540b4b36..4c322b5f6c8c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icons", "description": "Icons for digital and software products using the Carbon Design System", - "version": "10.18.0", + "version": "10.19.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json index c329d15e1b6e..7e001f5b056b 100644 --- a/packages/react-hooks/package.json +++ b/packages/react-hooks/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react-hooks", "private": true, - "version": "10.14.0", + "version": "10.15.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -39,7 +39,7 @@ "autoprefixer": "^9.7.4", "babel-loader": "^8.1.0", "browserslist-config-carbon": "^10.5.0", - "carbon-components": "^10.20.0", + "carbon-components": "^10.21.0", "css-loader": "^3.4.2", "node-sass": "^4.13.1", "postcss-loader": "^3.0.0", diff --git a/packages/react/package.json b/packages/react/package.json index 11794e11f820..37eccb892087 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "7.20.0", + "version": "7.21.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -39,7 +39,7 @@ "react-dom": "^16.8.6" }, "dependencies": { - "@carbon/icons-react": "^10.18.0", + "@carbon/icons-react": "^10.19.0", "classnames": "2.2.6", "downshift": "5.2.1", "flatpickr": "4.6.1", @@ -84,7 +84,7 @@ "babel-plugin-react-docgen": "^4.0.0", "babel-plugin-transform-inline-environment-variables": "^0.4.0", "browserslist-config-carbon": "^10.5.0", - "carbon-components": "^10.20.0", + "carbon-components": "^10.21.0", "carbon-icons": "^7.0.5", "chalk": "^2.3.0", "cli-table": "^0.3.0", diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js index 61ca41526580..d941a7288355 100644 --- a/packages/react/src/components/ComboBox/ComboBox-story.js +++ b/packages/react/src/components/ComboBox/ComboBox-story.js @@ -7,7 +7,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; +import { boolean, select, text } from '@storybook/addon-knobs'; import ComboBox from '../ComboBox'; import mdx from './ComboBox.mdx'; @@ -51,6 +51,28 @@ const directions = { 'Top ': 'top', }; +export default { + title: 'ComboBox', + component: ComboBox, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const combobox = () => ( +
+ (item ? item.text : '')} + placeholder="Filter..." + titleText="ComboBox title" + helperText="Combobox helper text" + /> +
+); + const props = () => ({ id: text('Combobox ID (id)', 'carbon-combobox-example'), placeholder: text('Placeholder text (placeholder)', 'Filter...'), @@ -66,19 +88,7 @@ const props = () => ({ onToggleClick: action('onClick'), }); -export default { - title: 'ComboBox', - decorators: [withKnobs], - - parameters: { - component: ComboBox, - docs: { - page: mdx, - }, - }, -}; - -export const Default = () => ( +export const Playground = () => (
(
); -Default.parameters = { - info: { - text: 'ComboBox', - }, -}; +export const disabled = () => ( +
+ (item ? item.text : '')} + placeholder="Filter..." + titleText="ComboBox title" + helperText="Combobox helper text" + /> +
+); + +export const light = () => ( +
+ (item ? item.text : '')} + placeholder="Filter..." + titleText="ComboBox title" + helperText="Combobox helper text" + /> +
+); diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index 7291a12294e6..8df0494dc927 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -13,25 +13,120 @@ import ComboBox from '../ComboBox'; ## Table of Contents - - - [Overview](#overview) - [Component API](#component-api) +- [Disabled](#disabled) +- [Light](#light) +- [downshiftProps](#combobox-downshiftprops) +- [Placeholder and labeling](#placeholders-and-labeling) +- [initialSelectedItem](#initialselecteditem) +- [itemToElement](#itemtoelement) +- [itemToString](#itemtostring) - [Feedback](#feedback) - - ## Overview +A combobox allows the user to make a selection from a predefined list of options +and is typically used when there are a large amount of options to choose from. + - + ## Component API - + + +## Disabled + +A disabled comobobox is available but should not be used as the sole means of +conveying information. For example, if the user must complete a previous form +input before moving on to the combobox, make sure to make that clear to the user +via an error state on the previous form element in adition to disabling the next +element. + + + + + +## Light + +The light prop should never be used against a light background. The form element +must have proper contrast against the pages background. + + + + + +## Combobox `downshiftProps` + +Our `Combobox` component utilizes [Downshift](https://www.downshift-js.com/) +under the hood to help provide complex yet accessible custom dropdown +components. We provide access to the built in Downshift features with this prop. +For more information, checkout the Downshift prop +[documentation](https://www.downshift-js.com/downshift#props-used-in-examples) + +## Placeholders and Labeling + +The placeholder is not a replacement for a label under any circumstances +including space restraints. Placeholders should be used to provide additive +information regarding the format of the input. In all cases a label is required +_in addition to_ a placeholder. + +## `initialSelectedItem` + +If you want the Combobox to render with a value already selected, but do not +want to fully control the component, you can use `initialSelectedItem` + +``` +const items = ['Option 1', 'Option 2', 'Option 3'] + +; +``` + +## `itemToElement` + +The Combobox takes in an `items` array and can then be formatted by +`itemToElement` and `itemToString`. `itemToElement` allows you to wrap each +dropdown item in a custom element. + +``` + + item ? ( + + {item.text} 🔥 + + ) : ( + '' + ) + } + label="Select an option..." +/> +``` + +## `itemToString` + +If the `items` array is not an array of strings, you'll need to use +`itemToString` to grab the text to be used as the `Combobox` item text. + +``` + (item ? item.text : '')} +/> +``` ## Feedback Help us improve these docs by -[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/ComboBox/ComboBox.mdx) +[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/ComboBox/ComboBox.stories.mdx) diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js index 0c1681b6b72b..b4c45d85292d 100644 --- a/packages/react/src/components/Modal/Modal-story.js +++ b/packages/react/src/components/Modal/Modal-story.js @@ -5,11 +5,12 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { useState } from 'react'; +import ReactDOM from 'react-dom'; import { action } from '@storybook/addon-actions'; - import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import Modal from '../Modal'; +import Button from '../Button'; import TextInput from '../TextInput'; import { settings } from 'carbon-components'; import mdx from './Modal.mdx'; @@ -104,10 +105,71 @@ const titleOnlyProps = () => { }; }; +const withStateManagerProps = () => ({ + className: 'some-class', + passiveModal: boolean('Without footer (passiveModal)', false), + danger: boolean('Danger mode (danger)', false), + alert: boolean('Alert mode (alert)', false), + shouldSubmitOnEnter: boolean( + 'Enter key to submit (shouldSubmitOnEnter)', + false + ), + hasScrollingContent: boolean( + 'Modal contains scrollable content (hasScrollingContent)', + false + ), + modalHeading: text('Modal heading (modalHeading)', 'Modal heading'), + modalLabel: text('Optional label (modalLabel)', 'Label'), + modalAriaLabel: text( + 'ARIA label, used only if modalLabel not provided (modalAriaLabel)', + 'A label to be read by screen readers on the modal root node' + ), + primaryButtonText: text( + 'Primary button text (primaryButtonText)', + 'Primary Button' + ), + secondaryButtonText: text( + 'Secondary button text (secondaryButtonText)', + 'Secondary Button' + ), + selectorPrimaryFocus: text( + 'Primary focus element selector (selectorPrimaryFocus)', + '[data-modal-primary-focus]' + ), + size: select('Size (size)', sizes), + iconDescription: text('Close icon description (iconDescription)', 'Close'), + onBlur: action('onBlur'), + onClick: action('onClick'), + onFocus: action('onFocus'), + onRequestClose: action('onRequestClose'), + onRequestSubmit: action('onRequestSubmit'), + onSecondarySubmit: action('onSecondarySubmit'), +}); + +/** + * Simple state manager for modals. + */ +const ModalStateManager = ({ + renderLauncher: LauncherContent, + children: ModalContent, +}) => { + const [open, setOpen] = useState(false); + return ( + <> + {!ModalContent || typeof document === 'undefined' + ? null + : ReactDOM.createPortal( + , + document.body + )} + {LauncherContent && } + + ); +}; + export default { title: 'Modal', decorators: [withKnobs], - parameters: { component: Modal, docs: { @@ -116,7 +178,7 @@ export default { }, }; -export const _Default = () => { +export const Default = () => { const { size, ...rest } = props(); return ( @@ -181,7 +243,7 @@ export const _Default = () => { ); }; -_Default.parameters = { +Default.parameters = { info: { text: ` Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. @@ -190,6 +252,90 @@ _Default.parameters = { }, }; +export const WithStateManager = () => { + const { size, ...rest } = withStateManagerProps(); + return ( + ( + + )}> + {({ open, setOpen }) => ( + setOpen(false)}> +

+ Please see ModalWrapper for more examples and demo of the + functionality. +

+ {rest.hasScrollingContent && ( + <> +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

Lorem ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + id accumsan augue. Phasellus consequat augue vitae tellus + tincidunt posuere. Curabitur justo urna, consectetur vel elit + iaculis, ultrices condimentum risus. Nulla facilisi. Etiam + venenatis molestie tellus. Quisque consectetur non risus eu + rutrum.{' '} +

+ + )} + + )} + + ); +}; + export const TitleOnly = () => { const { size, ...rest } = titleOnlyProps(); return ; diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx index 5b8467e6a598..33f5f173e564 100644 --- a/packages/react/src/components/Modal/Modal.mdx +++ b/packages/react/src/components/Modal/Modal.mdx @@ -1,15 +1,327 @@ -import { Props } from '@storybook/addon-docs/blocks'; +import { Story, Props } from '@storybook/addon-docs/blocks'; +import Modal from '../Modal'; +import { InlineNotification } from '../Notification'; # Modal +[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Modal) + |  +[Usage guidelines](https://www.carbondesignsystem.com/components/modal/usage) + |  +[Accessibility](https://www.carbondesignsystem.com/components/modal/accessibility) + + + + +**Table of Contents** _generated with +[DocToc](https://github.com/thlorenz/doctoc)_ + +- [Modal](#modal) + - [Overview](#overview) + - [Component API](#component-api) + - [Opening/closing modal](#openingclosing-modal) + - [Modal sizes](#modal-sizes) + - [Alignment](#alignment) + - [Overflow content](#overflow-content) + - [Modal button variants](#modal-button-variants) + - [Using modal title as message](#using-modal-title-as-message) + - [Focus management](#focus-management) + - [Setting `data-modal-primary-focus` attribute to the target element](#setting-data-modal-primary-focus-attribute-to-the-target-element) + - [Specifying a query selector to the target element](#specifying-a-query-selector-to-the-target-element) + - [References](#references) + - [Feedback](#feedback) + + + ## Overview +`` allows you to use its bespoke set of contents. `children` prop maps to +the modal body content. You can also use `modalLabel`, `modalHeading`, +`secondaryButtonText` and `primaryButtonText` props to change the corresponding +text. + + + + + ## Component API +## Opening/closing modal + +For both modal variants, you can open/close the modal by changing the `open` +prop. For example, you can implement a launcher button with a React state and a +` + + ); +} +``` + +You can create an abstract version of such state manager, as shown below. + +```jsx +const ModalStateManager = ({ + renderLauncher: LauncherContent, + children: ModalContent, +}) => { + const [open, setOpen] = useState(false); + return ( + <> + {!ModalContent || typeof document === 'undefined' + ? null + : ReactDOM.createPortal( + , + document.body + )} + {LauncherContent && } + + ); +}; +``` + +`` is a modal state manager implementation which ships out of the +box with Carbon. + + + {``}/{``} has to be put at the + top level in a React tree. The easiest way to ensure that is using React + portal as shown in above example. + + +## Modal sizes + +There are four responsive +[modal sizes](https://www.carbondesignsystem.com/components/modal/usage/#modal-sizes): +`xs`, `small`, default, and `large`. You can set it via the `size` prop. + +```jsx + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis + quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero + in augue mattis, a molestie metus vestibulum. Aliquam placerat felis + ultrices lorem condimentum, nec ullamcorper felis porttitor. +

+ + +``` + +### Alignment + +Depending on the size prop of your modal and the viewport, +``/`` adds 20% padding at the right of the modal body +content. Carbon design specifies that such 20% padding shouldn't be applied to +form elements. You can set `hasForm` prop to ``/`` to remove +the padding, and use `bx--modal-content__regular-content` class to apply the 20% +padding to non-form contents, as shown below. + +```jsx + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis + quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero + in augue mattis, a molestie metus vestibulum. Aliquam placerat felis + ultrices lorem condimentum, nec ullamcorper felis porttitor. +

+ + +``` + +### Overflow content + +In cases where even the largest modal size does not fit all of the modal +content, Carbon design specifies having a "visual fade" at the end of the modal +body area to indicate there is additional content out of view. You can set +`hasScrollingContent` prop to ``/`` to do that, as shown +below. + +```jsx + + + +

Some very large contents...

+ + +``` + +## Modal button variants + +With ``, you have limited control over the set of buttons. The following +table shows the supported patterns. + +| Button group variant | Usage | +| ---------------------------------------------------------------------------------------------------- | ----------------------------------------- | +| No button ([passive modal](https://www.carbondesignsystem.com/components/modal/usage#passive-modal)) | Use `passiveModal` prop in `` | +| One button | Use `` | +| Two buttons | Use `` without `passiveModal` prop | +| Two buttons with danger button | Use `danger` prop in `` | + +```jsx + + +

The modal body content

+ +``` + +With ``, you can control the buttons with the following code. + +| Button group variant | Usage | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| No button ([passive modal](https://www.carbondesignsystem.com/components/modal/usage#passive-modal)) | Use `` without `` | +| One button | Use `primaryButtonText` in `` | +| Two buttons | Use `primaryButtonText` and `secondaryButtonText` in `` | +| Three buttons | Put three buttons as children of ``, instead of using `primaryButtonText` or `secondaryButtonText`. Using this option requires style adjustment defined in application-level CSS for ``, e.g. `.bx--modal-footer { padding: 25%; }`. | +| Two buttons with danger button | Set `danger` prop in `` (like below) | + +```jsx + + ... + + +``` + + + As the instruction for the three buttons implies, {``} + is flexible on the buttons as you render {`