Skip to content

Commit

Permalink
test(react): toggle button group changes
Browse files Browse the repository at this point in the history 
tests updated after chnage in prop allocation from toggle buton group to children
  • Loading branch information
@gd2910
gd2910 committed Jan 22, 2025
1 parent e4a4e41 commit 843d9cc
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 68 deletions.
Binary file added ...ots/baseline/IcToggleButtonGroup.cy.tsx-disabled-toggle-group-high-contrast.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 12 additions & 36 deletions packages/react/src/component-tests/IcToggleButtonGroup/IcToggleButtonGroupTestData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,21 +109,9 @@ export const ToggleGroupLoadingLight = (): ReactElement => {
return (
<div style={{ margin: "10px 0 0 10px" }}>
<IcToggleButtonGroup loading={true} theme="dark" monochrome>
<IcToggleButton
label="First toggle"
theme="dark"
monochrome
></IcToggleButton>
<IcToggleButton
label="Second toggle"
theme="dark"
monochrome
></IcToggleButton>
<IcToggleButton
label="Third toggle"
theme="dark"
monochrome
></IcToggleButton>
<IcToggleButton label="First toggle"></IcToggleButton>
<IcToggleButton label="Second toggle"></IcToggleButton>
<IcToggleButton label="Third toggle"></IcToggleButton>
</IcToggleButtonGroup>
</div>
);
Expand All @@ -133,21 +121,9 @@ export const ToggleGroupLoadingDark = (): ReactElement => {
return (
<div style={{ margin: "10px 0 0 10px" }}>
<IcToggleButtonGroup loading={true} theme="light" monochrome>
<IcToggleButton
label="First toggle"
theme="light"
monochrome
></IcToggleButton>
<IcToggleButton
label="Second toggle"
theme="light"
monochrome
></IcToggleButton>
<IcToggleButton
label="Third toggle"
theme="light"
monochrome
></IcToggleButton>
<IcToggleButton label="First toggle"></IcToggleButton>
<IcToggleButton label="Second toggle"></IcToggleButton>
<IcToggleButton label="Third toggle"></IcToggleButton>
</IcToggleButtonGroup>
</div>
);
Expand Down Expand Up @@ -237,13 +213,13 @@ export const ToggleGroupIconRight = (): ReactElement => {
return (
<div style={{ margin: "1rem" }}>
<IcToggleButtonGroup iconPlacement="right">
<IcToggleButton label="First toggle" iconPlacement="right">
<IcToggleButton label="First toggle">
<ReusableSlottedIcon />
</IcToggleButton>
<IcToggleButton label="Second toggle" iconPlacement="right">
<IcToggleButton label="Second toggle">
<ReusableSlottedIcon />
</IcToggleButton>
<IcToggleButton label="Third toggle" iconPlacement="right">
<IcToggleButton label="Third toggle">
<ReusableSlottedIcon />
</IcToggleButton>
</IcToggleButtonGroup>
Expand Down Expand Up @@ -272,13 +248,13 @@ export const ToggleGroupIconTop = (): ReactElement => {
return (
<div style={{ margin: "1rem" }}>
<IcToggleButtonGroup iconPlacement="top">
<IcToggleButton label="First toggle" iconPlacement="top">
<IcToggleButton label="First toggle">
<ReusableSlottedIcon />
</IcToggleButton>
<IcToggleButton label="Second toggle" iconPlacement="top">
<IcToggleButton label="Second toggle">
<ReusableSlottedIcon />
</IcToggleButton>
<IcToggleButton label="Third toggle" iconPlacement="top">
<IcToggleButton label="Third toggle">
<ReusableSlottedIcon />
</IcToggleButton>
</IcToggleButtonGroup>
Expand Down
123 changes: 91 additions & 32 deletions packages/react/src/stories/ic-toggle-button-group.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,9 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
disabled
accessibleLabel="Single and manual select toggle group"
>
<IcToggleButton label="First toggle" disabled></IcToggleButton>
<IcToggleButton label="Second toggle" disabled></IcToggleButton>
<IcToggleButton label="Third toggle" disabled></IcToggleButton>
<IcToggleButton label="First toggle"></IcToggleButton>
<IcToggleButton label="Second toggle"></IcToggleButton>
<IcToggleButton label="Third toggle"></IcToggleButton>
</IcToggleButtonGroup>
</>
</Story>
Expand All @@ -157,9 +157,9 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
loading
accessibleLabel="Single and manual select toggle group"
>
<IcToggleButton label="First toggle" loading></IcToggleButton>
<IcToggleButton label="Second toggle" loading></IcToggleButton>
<IcToggleButton label="Third toggle" loading></IcToggleButton>
<IcToggleButton label="First toggle"></IcToggleButton>
<IcToggleButton label="Second toggle"></IcToggleButton>
<IcToggleButton label="Third toggle"></IcToggleButton>
</IcToggleButtonGroup>
</>
</Story>
Expand All @@ -175,7 +175,7 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
variant="icon"
accessibleLabel="Single and manual select toggle group"
>
<IcToggleButton variant="icon" accessibleLabel="First Refresh">
<IcToggleButton accessibleLabel="First Refresh">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="24px"
Expand All @@ -187,7 +187,7 @@ import { SlottedSVG } from "../react-component-lib/slottedSVG";
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</SlottedSVG>
</IcToggleButton>
<IcToggleButton variant="icon" accessibleLabel="Second Refresh">
<IcToggleButton accessibleLabel="Second Refresh">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="24px"
Expand Down Expand Up @@ -321,28 +321,52 @@ export const defaultArgs = {
toggleDisabled: false,
toggleFullWidth: false,
toggleIconPlacement: "left",
label: "Toggle",
toggleLabel: "Custom Toggle",
toggleLoading: false,
toggleMonochrome: false,
toggleSize: "default",
toggleSize: "medium",
toggleTheme: "inherit",
checked: false,
toggleChecked: false,
toggleVariant: "default",
};

<Canvas>
<Story
args={defaultArgs}

argTypes={{
args={defaultArgs}
argTypes={{
accessibleLabel: {
control: {
type: "text",
},
},
disabled: {
control: {
type: "boolean",
},
},
fullWidth: {
control: {
type: "boolean",
},
},
iconPlacement: {
options: [
"left", "right", "top"
],
control: {
type: "radio",
},
},
},
loading: {
control: {
type: "boolean",
},
},
monochrome: {
control: {
type: "boolean",
},
},
selectMethod: {
options: [
"manual", "auto"
Expand All @@ -361,55 +385,90 @@ export const defaultArgs = {
},
size: {
options: [
"default", "small", "large"
"medium", "small", "large"
],
control: {
type: "radio",
},
},
theme: {
options: [
"inherit", "light", "dark"
],
control: {
type: "inline-radio",
},
},
variant: {
options: [
"default", "icon"
],
control: {
type: "inline-radio",
},
},
},
toggleAccessibleLabel: {
control: {
type: "text",
},
},
toggleDisabled: {
control: {
type: "boolean",
},
},
toggleFullWidth: {
control: {
type: "boolean",
},
},
toggleIconPlacement: {
options: [
"left", "right", "top"
],
control: {
type: "radio",
},
},
},
toggleLabel: {
control: {
type: "text",
},
},
toggleLoading: {
control: {
type: "boolean",
},
},
toggleMonochrome: {
control: {
type: "boolean",
},
},
toggleSize: {
options: [
"default", "small", "large"
"medium", "small", "large"
],
control: {
type: "radio",
},
},
toggleVariant: {
toggleTheme: {
options: [
"default", "icon"
"inherit", "light", "dark"
],
control: {
type: "inline-radio",
},
},
theme: {
options: [
"inherit", "light", "dark"
],
},
toggleChecked: {
control: {
type: "inline-radio",
type: "boolean",
},
},
toggleTheme: {
},
toggleVariant: {
options: [
"inherit", "light", "dark"
"default", "icon"
],
control: {
type: "inline-radio",
Expand Down Expand Up @@ -437,13 +496,13 @@ export const defaultArgs = {
disabled={args.toggleDisabled}
fullWidth={args.toggleFullWidth}
iconPlacement={args.toggleIconPlacement}
label={args.toggleLabel}
loading={args.toggleLoading}
monochrome={args.toggleMonochrome}
size={args.toggleSize}
checked={args.checked}
theme={args.toggleTheme}
checked={args.toggleChecked}
variant={args.toggleVariant}
label={args.label}
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down

0 comments on commit 843d9cc

Please sign in to comment.