feat(content-switcher): add support for sm and xl size
MODIFY
packages/components/src/components/content-switcher/_content-switcher.scss
packages/components/src/components/content-switcher/_content-switcher.scss
height: rem(40px);
}
+ .#{$prefix}--content-switcher--sm {
+ height: rem(32px);
+ }
+
+ .#{$prefix}--content-switcher--xl {
+ height: rem(48px);
+ }
+
.#{$prefix}--content-switcher--disabled {
cursor: not-allowed;
}

MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -789,6 +789,15 @@ Map {
],
"type": "oneOf",
},
+ "size": Object {
+ "args": Array [
+ Array [
+ "sm",
+ "xl",
+ ],
+ ],
+ "type": "oneOf",
+ },
},
},
"Copy" => Object {

MODIFY
packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -17,6 +17,12 @@ const selectionModes = {
'Change selection on explicit gesture (manual)': 'manual',
};
+const sizes = {
+ 'Extra large size (xl)': 'xl',
+ 'Default size': undefined,
+ 'Small size (sm)': 'sm',
+};
+
const props = {
contentSwitcher: () => ({
light: boolean('Light variant (light)', false),
@@ -26,6 +32,7 @@ const props = {
selectionModes,
'automatic'
),
+ size: select('Field size (size)', sizes, undefined) || undefined,
onChange: action('onChange'),
}),
switch: () => ({

MODIFY
packages/react/src/components/ContentSwitcher/ContentSwitcher.js
packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -55,6 +55,11 @@ export default class ContentSwitcher extends React.Component {
* Choose whether or not to automatically change selection on focus
*/
selectionMode: PropTypes.oneOf(['automatic', 'manual']),
+
+ /**
+ * Specify the size of the Content Switcher. Currently supports either `sm` or `xl` as an option.
+ */
+ size: PropTypes.oneOf(['sm', 'xl']),
};
static defaultProps = {
@@ -118,11 +123,13 @@ export default class ContentSwitcher extends React.Component {
light,
selectedIndex, // eslint-disable-line no-unused-vars
selectionMode, // eslint-disable-line no-unused-vars
+ size,
...other
} = this.props;
const classes = classNames(`${prefix}--content-switcher`, className, {
[`${prefix}--content-switcher--light`]: light,
+ [`${prefix}--content-switcher--${size}`]: size,
});
return (

feat(content-switcher): add support for sm and xl size (#6946)

Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>