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); } } }