diff --git a/cypress/components/button-toggle/button-toggle.cy.tsx b/cypress/components/button-toggle/button-toggle.cy.tsx
index 47e4c24c4a..8d5c238705 100644
--- a/cypress/components/button-toggle/button-toggle.cy.tsx
+++ b/cypress/components/button-toggle/button-toggle.cy.tsx
@@ -101,7 +101,7 @@ context("Testing Button-Toggle component", () => {
);
buttonToggleButton().each((el) =>
- expect(el.css("border-radius")).equals("32px")
+ expect(el.css("border-radius")).equals("4px")
);
});
@@ -112,19 +112,19 @@ context("Testing Button-Toggle component", () => {
buttonToggleButton()
.eq(0)
- .should("have.css", "border-radius", "32px 0px 0px 32px");
+ .should("have.css", "border-radius", "4px 0px 0px 4px");
buttonToggleButton().eq(1).should("have.css", "border-radius", "0px");
buttonToggleButton()
.eq(2)
- .should("have.css", "border-radius", "0px 32px 32px 0px");
+ .should("have.css", "border-radius", "0px 4px 4px 0px");
});
it("should have the expected border-radius styling when children do not have grouped prop set", () => {
CypressMountWithProviders();
- buttonToggleButton().eq(0).should("have.css", "border-radius", "32px");
- buttonToggleButton().eq(1).should("have.css", "border-radius", "32px");
- buttonToggleButton().eq(2).should("have.css", "border-radius", "32px");
+ buttonToggleButton().eq(0).should("have.css", "border-radius", "4px");
+ buttonToggleButton().eq(1).should("have.css", "border-radius", "4px");
+ buttonToggleButton().eq(2).should("have.css", "border-radius", "4px");
});
});
diff --git a/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap b/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
index 306174ae3c..e6355f62be 100644
--- a/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
+++ b/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
@@ -26,6 +26,7 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
text-align: start;
color: inherit;
border: 1px solid var(--colorsActionMinor500);
+ color: var(--colorsActionMinor500);
}
.c2:focus {
@@ -42,22 +43,47 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
cursor: auto;
}
-.c2:not([aria-pressed="true"]):not(:disabled):hover {
- background-color: var(--colorsActionMinor200);
- border-color: var(--colorsActionMinor500);
+.c2 .c4 {
color: var(--colorsActionMinor500);
}
-.c2:not([aria-pressed="true"]):not(:disabled):hover .c4 {
+.c2 .c4 {
color: var(--colorsActionMinor500);
}
-.c2 .c4 {
- color: var(--colorsActionMinor500);
+.c2 .c4:not([aria-pressed="true"]):not(:disabled):hover {
+ color: var(--colorsActionMinorYang100);
+}
+
+.c2[aria-pressed="true"]:not(:hover) {
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
+ background-color: transparent;
+}
+
+.c2[aria-pressed="true"]:not(:hover):focus {
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500), 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
+}
+
+.c2:not([aria-pressed="true"]):not(:disabled):hover {
+ color: var(--colorsActionMinorYang100);
+ background-color: var(--colorsActionMinor600);
+}
+
+.c2:not([aria-pressed="true"]):not(:disabled):hover .c4 {
+ color: var(--colorsActionMinorYang100);
+}
+
+.c2:not(:disabled):hover {
+ background-color: var(--colorsActionMinor600);
+ color: var(--colorsActionMinorYang100);
+}
+
+.c2:not(:disabled):hover .c4 {
+ color: var(--colorsActionMinorYang100);
}
.c3.c3.c3.c3 .c1 {
- border-radius: var(--borderRadius400);
+ border-radius: var(--borderRadius050);
}
.c0 {
@@ -66,13 +92,13 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
}
.c0.c0.c0.c0:first-of-type .c1 {
- border-top-left-radius: var(--borderRadius400);
- border-bottom-left-radius: var(--borderRadius400);
+ border-top-left-radius: var(--borderRadius050);
+ border-bottom-left-radius: var(--borderRadius050);
}
.c0.c0.c0.c0:last-of-type .c1 {
- border-top-right-radius: var(--borderRadius400);
- border-bottom-right-radius: var(--borderRadius400);
+ border-top-right-radius: var(--borderRadius050);
+ border-bottom-right-radius: var(--borderRadius050);
}
.c0:not(:first-of-type) {
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.spec.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.spec.tsx
index 029eaf3642..0cc3989a42 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group.spec.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group.spec.tsx
@@ -240,46 +240,6 @@ describe("ButtonToggleGroup", () => {
expect(onChangeFn.mock.calls[0][1]).toBe(undefined);
});
- it("renders with the expected border radius styling", () => {
- const wrapper = render();
-
- assertStyleMatch(
- {
- borderRadius: "var(--borderRadius000)",
- },
- wrapper.find(StyledButtonToggleGroup),
- {
- modifier: `${StyledButtonToggle}:not(:first-of-type):not(:last-of-type)`,
- }
- );
-
- assertStyleMatch(
- {
- borderTopLeftRadius: "var(--borderRadius400)",
- borderBottomLeftRadius: "var(--borderRadius400)",
- borderTopRightRadius: "var(--borderRadius000)",
- borderBottomRightRadius: "var(--borderRadius000)",
- },
- wrapper.find(StyledButtonToggleGroup),
- {
- modifier: `${StyledButtonToggle}:first-of-type ${StyledButtonToggle}`,
- }
- );
-
- assertStyleMatch(
- {
- borderTopLeftRadius: "var(--borderRadius000)",
- borderBottomLeftRadius: "var(--borderRadius000)",
- borderTopRightRadius: "var(--borderRadius400)",
- borderBottomRightRadius: "var(--borderRadius400)",
- },
- wrapper.find(StyledButtonToggleGroup),
- {
- modifier: `${StyledButtonToggle}:last-of-type ${StyledButtonToggle}`,
- }
- );
- });
-
describe("Label", () => {
describe.each([
["labelHelp", "help", "label help"],
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx
index 7e1333d6bb..2da8423fc6 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx
@@ -3,19 +3,22 @@ import { ComponentStory } from "@storybook/react";
import ButtonToggleGroup from ".";
import { ButtonToggle } from "..";
+import Box from "../../box";
export const Default: ComponentStory = () => (
-
- Foo
- Bar
- Baz
-
+
+
+ Foo
+ Bar
+ Baz
+
+
);
export const Controlled: ComponentStory = () => {
@@ -27,95 +30,105 @@ export const Controlled: ComponentStory = () => {
setValue(selectedValue as string);
}
return (
+
+
+ Foo
+ Bar
+ Baz
+
+
+ );
+};
+
+export const Grouped: ComponentStory = () => (
+
{}}
>
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
- );
-};
-
-export const Grouped: ComponentStory = () => (
- {}}
- >
-
- Foo
-
-
- Bar
-
-
- Baz
-
-
+
);
export const FullWidth: ComponentStory = () => (
- {}}
- >
-
- Foo
-
-
- Bar
-
-
- Baz
-
-
+
+ {}}
+ >
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
+
+
);
export const FieldHelp: ComponentStory = () => (
- {}}
- >
- Foo
- Bar
- Baz
-
+
+ {}}
+ >
+ Foo
+ Bar
+ Baz
+
+
);
export const LabelInline: ComponentStory = () => (
- {}}
- >
- Foo
- Bar
- Baz
-
+
+ {}}
+ >
+ Foo
+ Bar
+ Baz
+
+
);
export const AllowDeselection: ComponentStory<
@@ -129,19 +142,21 @@ export const AllowDeselection: ComponentStory<
setValue(selectedValue as string);
}
return (
-
- Foo
- Bar
- Baz
-
+
+
+ Foo
+ Bar
+ Baz
+
+
);
};
@@ -154,16 +169,18 @@ export const AriaLabel: ComponentStory = () => {
setValue(selectedValue as string);
}
return (
-
- Foo
- Bar
- Baz
-
+
+
+ Foo
+ Bar
+ Baz
+
+
);
};
diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.style.ts b/src/components/button-toggle/button-toggle-group/button-toggle-group.style.ts
index 2256201ce9..4a5d5d2d52 100644
--- a/src/components/button-toggle/button-toggle-group/button-toggle-group.style.ts
+++ b/src/components/button-toggle/button-toggle-group/button-toggle-group.style.ts
@@ -31,24 +31,6 @@ const StyledButtonToggleGroup = styled.div`
display: flex;
- ${StyledButtonToggle}:not(:first-of-type):not(:last-of-type) {
- border-radius: var(--borderRadius000);
- }
-
- ${StyledButtonToggle}:first-of-type ${StyledButtonToggle} {
- border-top-left-radius: var(--borderRadius400);
- border-bottom-left-radius: var(--borderRadius400);
- border-top-right-radius: var(--borderRadius000);
- border-bottom-right-radius: var(--borderRadius000);
- }
-
- ${StyledButtonToggle}:last-of-type ${StyledButtonToggle} {
- border-top-left-radius: var(--borderRadius000);
- border-bottom-left-radius: var(--borderRadius000);
- border-top-right-radius: var(--borderRadius400);
- border-bottom-right-radius: var(--borderRadius400);
- }
-
${({ fullWidth }) =>
fullWidth &&
css`
diff --git a/src/components/button-toggle/button-toggle.component.tsx b/src/components/button-toggle/button-toggle.component.tsx
index d6e0155ede..3596e0b23f 100644
--- a/src/components/button-toggle/button-toggle.component.tsx
+++ b/src/components/button-toggle/button-toggle.component.tsx
@@ -108,7 +108,6 @@ export const ButtonToggle = ({
firstButton,
childButtonCallbackRef,
} = useContext(ButtonToggleGroupContext);
-
const callbackRef = (element: HTMLButtonElement | null) => {
buttonRef.current = element;
if (childButtonCallbackRef) {
diff --git a/src/components/button-toggle/button-toggle.spec.tsx b/src/components/button-toggle/button-toggle.spec.tsx
index 0b3c4d8f2b..3ec780d73f 100644
--- a/src/components/button-toggle/button-toggle.spec.tsx
+++ b/src/components/button-toggle/button-toggle.spec.tsx
@@ -400,7 +400,7 @@ describe("ButtonToggle", () => {
it("renders with the expected border radius styling", () => {
assertStyleMatch(
{
- borderRadius: "var(--borderRadius400)",
+ borderRadius: "var(--borderRadius050)",
},
mount(toggle).find(
StyledButtonToggleWrapper
diff --git a/src/components/button-toggle/button-toggle.stories.mdx b/src/components/button-toggle/button-toggle.stories.mdx
index 2b63e210aa..b82fcf5a80 100644
--- a/src/components/button-toggle/button-toggle.stories.mdx
+++ b/src/components/button-toggle/button-toggle.stories.mdx
@@ -6,7 +6,7 @@ import { ButtonToggle } from ".";
import * as stories from "./button-toggle.stories";
import * as groupStories from "./button-toggle-group/button-toggle-group.stories";
-
Product Design System component
@@ -35,7 +35,10 @@ Press one of the buttons to make selection. This component should be used when u
## Quick Start
```javascript
-import { ButtonToggle, ButtonToggleGroup } from "carbon-react/lib/components/button-toggle";
+import {
+ ButtonToggle,
+ ButtonToggleGroup,
+} from "carbon-react/lib/components/button-toggle";
```
- You should use the ButtonToggleGroup component if you need to wrap multiple `ButtonToggle` components together.
diff --git a/src/components/button-toggle/button-toggle.stories.tsx b/src/components/button-toggle/button-toggle.stories.tsx
index 29d57c7c82..95be3725ee 100644
--- a/src/components/button-toggle/button-toggle.stories.tsx
+++ b/src/components/button-toggle/button-toggle.stories.tsx
@@ -5,11 +5,13 @@ import { ButtonToggle, ButtonToggleGroup } from ".";
import Box from "../box";
export const Default: ComponentStory = () => (
-
- Foo
- Bar
- Baz
-
+
+
+ Foo
+ Bar
+ Baz
+
+
);
export const DefaultWrappedText: ComponentStory = () => (
@@ -26,191 +28,213 @@ export const DefaultWrappedText: ComponentStory = () => (
);
export const DefaultSmallIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const DefaultLargeIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const iconOnly: ComponentStory = () => (
-
-
-
-
-
+
+
+
+
+
+
+
);
export const small: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const smallSmallIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const smallLargeIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
+
- Tick
-
-
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const large: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const largeSmallIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
- Tick
-
-
+
+
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const largeLargeIcon: ComponentStory = () => (
-
-
- Add
-
-
- Share
-
-
+
- Tick
-
-
+
+ Add
+
+
+ Share
+
+
+ Tick
+
+
+
);
export const disabled: ComponentStory = () => (
-
-
- Foo
-
-
- Bar
-
-
- Baz
-
-
+
+
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
+
+
);
export const grouped: ComponentStory = () => (
-
-
- Foo
-
-
- Bar
-
-
- Baz
-
-
+
+
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
+
+
);
diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts
index 18e4f008dc..486bc5c821 100644
--- a/src/components/button-toggle/button-toggle.style.ts
+++ b/src/components/button-toggle/button-toggle.style.ts
@@ -104,15 +104,6 @@ const StyledButtonToggle = styled.button`
`}
}
- :not([aria-pressed="true"]):not(:disabled):hover {
- background-color: var(--colorsActionMinor200);
- border-color: var(--colorsActionMinor500);
- color: var(--colorsActionMinor500);
- ${StyledIcon} {
- color: var(--colorsActionMinor500);
- }
- }
-
${StyledIcon} {
color: var(--colorsActionMinor500);
}
@@ -136,7 +127,43 @@ const StyledButtonToggle = styled.button`
}
}
cursor: not-allowed;
- `};
+ `}
+
+ & ${StyledIcon} {
+ color: var(--colorsActionMinor500);
+ :not([aria-pressed="true"]):not(:disabled):hover {
+ color: var(--colorsActionMinorYang100);
+ }
+ }
+
+ color: var(--colorsActionMinor500);
+
+ &[aria-pressed="true"]:not(:hover) {
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500);
+ background-color: transparent;
+ :focus {
+ box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500),
+ 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500),
+ 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
+ }
+ }
+
+ :not([aria-pressed="true"]):not(:disabled):hover {
+ color: var(--colorsActionMinorYang100);
+ background-color: var(--colorsActionMinor600);
+ ${StyledIcon} {
+ color: var(--colorsActionMinorYang100);
+ }
+ }
+
+ &:not(:disabled):hover {
+ background-color: var(--colorsActionMinor600);
+ color: var(--colorsActionMinorYang100);
+
+ ${StyledIcon} {
+ color: var(--colorsActionMinorYang100);
+ }
+ }
`;
const iconFontSizes = {
@@ -188,7 +215,7 @@ const StyledButtonToggleWrapper = styled.div`
css`
&&&& {
${StyledButtonToggle} {
- border-radius: var(--borderRadius400);
+ border-radius: var(--borderRadius050);
}
}
`}
@@ -198,15 +225,15 @@ const StyledButtonToggleWrapper = styled.div`
&&&& {
:first-of-type {
${StyledButtonToggle} {
- border-top-left-radius: var(--borderRadius400);
- border-bottom-left-radius: var(--borderRadius400);
+ border-top-left-radius: var(--borderRadius050);
+ border-bottom-left-radius: var(--borderRadius050);
}
}
:last-of-type {
${StyledButtonToggle} {
- border-top-right-radius: var(--borderRadius400);
- border-bottom-right-radius: var(--borderRadius400);
+ border-top-right-radius: var(--borderRadius050);
+ border-bottom-right-radius: var(--borderRadius050);
}
}
}