diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss index 956566d08697..fef0e56f4c6f 100644 --- a/packages/components/src/components/tabs/_tabs.scss +++ b/packages/components/src/components/tabs/_tabs.scss @@ -32,7 +32,7 @@ } } - .#{$prefix}--tabs--fixed { + .#{$prefix}--tabs--container { @include carbon--breakpoint(md) { min-height: rem(48px); } @@ -159,7 +159,7 @@ } } - .#{$prefix}--tabs--fixed .#{$prefix}--tabs__nav-item { + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item { @include carbon--breakpoint(md) { background-color: $ui-03; @@ -205,7 +205,7 @@ } } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) { @include carbon--breakpoint(md) { background-color: $hover-selected-ui; @@ -225,16 +225,16 @@ pointer-events: none; } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled, - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover { @include carbon--breakpoint(md) { background-color: $disabled-02; } } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link { @include carbon--breakpoint(md) { @@ -266,9 +266,9 @@ } } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:not(.#{$prefix}--tabs__nav-item--disabled), - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) { @include carbon--breakpoint(md) { background-color: $ui-01; @@ -331,7 +331,7 @@ } } - .#{$prefix}--tabs--fixed a.#{$prefix}--tabs__nav-link { + .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link { @include carbon--breakpoint(md) { display: flex; align-items: center; @@ -352,7 +352,7 @@ } } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled) .#{$prefix}--tabs__nav-link { @include carbon--breakpoint(md) { @@ -379,7 +379,7 @@ border-bottom: $tab-underline-disabled; } - .#{$prefix}--tabs--fixed + .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link { @include carbon--breakpoint(md) { diff --git a/packages/components/src/components/tabs/tabs.config.js b/packages/components/src/components/tabs/tabs.config.js index b28f83637798..f1d86d3deabb 100644 --- a/packages/components/src/components/tabs/tabs.config.js +++ b/packages/components/src/components/tabs/tabs.config.js @@ -55,11 +55,11 @@ module.exports = { }, }, { - name: 'fixed', - label: 'Tabs (fixed)', + name: 'container', + label: 'Tabs (container)', context: { - fixed: true, - items: items('fixed'), + container: true, + items: items('container'), }, }, ], diff --git a/packages/components/src/components/tabs/tabs.hbs b/packages/components/src/components/tabs/tabs.hbs index 904767371780..e852f0a37125 100644 --- a/packages/components/src/components/tabs/tabs.hbs +++ b/packages/components/src/components/tabs/tabs.hbs @@ -5,7 +5,7 @@ LICENSE file in the root directory of this source tree. --> -
+
{{ carbon-icon 'ChevronDownGlyph' }} diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js index e4ee2718b451..0e93233a1ed1 100644 --- a/packages/react/src/components/Tabs/Tabs-story.js +++ b/packages/react/src/components/Tabs/Tabs-story.js @@ -97,9 +97,9 @@ storiesOf('Tabs', module) } ) .add( - 'Fixed', + 'Container', () => ( - +
Content for first tab goes here. diff --git a/packages/react/src/components/Tabs/Tabs-story.scss b/packages/react/src/components/Tabs/Tabs-story.scss index 08c5a616eb09..71ef46ca3d25 100644 --- a/packages/react/src/components/Tabs/Tabs-story.scss +++ b/packages/react/src/components/Tabs/Tabs-story.scss @@ -3,7 +3,7 @@ // Use e.g. `@import '~carbon-components/scss/globals/scss/styles.scss'` instead. @import '~carbon-components/src/globals/scss/css--helpers'; // SEE THE NOTE ABOVE -.bx--tabs--fixed ~ div { +.bx--tabs--container ~ div { height: 320px; background-color: $ui-01; } diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js index d5742c476512..55f5034c7032 100644 --- a/packages/react/src/components/Tabs/Tabs-test.js +++ b/packages/react/src/components/Tabs/Tabs-test.js @@ -50,17 +50,17 @@ describe('Tabs', () => { ).toBe(true); }); - it('supports fixed variant', () => { + it('supports container variant', () => { expect( shallow( - + content1 content2 ) .find('div') .first() - .hasClass(`${prefix}--tabs--fixed`) + .hasClass(`${prefix}--tabs--container`) ).toBe(true); }); }); diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js index 5d75d369f648..00979a33b700 100644 --- a/packages/react/src/components/Tabs/Tabs.js +++ b/packages/react/src/components/Tabs/Tabs.js @@ -46,7 +46,7 @@ export default class Tabs extends React.Component { /** * Provide the type of Tab */ - type: PropTypes.oneOf(['default', 'fixed']), + type: PropTypes.oneOf(['default', 'container']), /** * Optionally provide an `onClick` handler that is invoked when a is @@ -249,7 +249,7 @@ export default class Tabs extends React.Component { const classes = { tabs: classNames(`${prefix}--tabs`, className, { - [`${prefix}--tabs--fixed`]: type === 'fixed', + [`${prefix}--tabs--container`]: type === 'container', }), tablist: classNames(`${prefix}--tabs__nav`, { [`${prefix}--tabs__nav--hidden`]: this.state.dropdownHidden,