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 11b10efc81..d3b5e4a357 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 @@ -43,31 +43,6 @@ export const Controlled: ComponentStory = () => { ); }; -export const ControlledMinor: ComponentStory = () => { - const [value, setValue] = useState("bar"); - function onChangeHandler( - event: React.MouseEvent, - selectedValue?: string - ) { - setValue(selectedValue as string); - } - return ( - - Foo - Bar - Baz - - ); -}; - export const Grouped: ComponentStory = () => ( { fieldHelp="field help mesage" onChange={onChangeHandler} value={value} +<<<<<<< HEAD +======= +<<<<<<< HEAD +<<<<<<< HEAD +======= + variant="minor" +>>>>>>> 8c445eebb (feat(button-toggle): add minor child) +======= +>>>>>>> 71a7991e9 (feat(button-toggle): rm variant prop, tests) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) > Foo Bar diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts index 50f8516a6a..12b3ffee14 100644 --- a/src/components/button-toggle/button-toggle.style.ts +++ b/src/components/button-toggle/button-toggle.style.ts @@ -138,7 +138,56 @@ const StyledButtonToggle = styled.button` cursor: not-allowed; `} +<<<<<<< HEAD +======= +<<<<<<< HEAD +<<<<<<< HEAD + + & ${StyledIcon} { + color: var(--colorsActionMinor500); + :not([aria-pressed="true"]):not(:disabled):hover { + color: var(--colorsActionMinorYang100); + } + } + + color: var(--colorsActionMinor500); + border: 1px solid var(--colorsActionMinor500); + + :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); + } + } + + &[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); + } + } +======= + ${({ variant }) => + variant === "minor" && + css` +======= + +>>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) & ${StyledIcon} { color: var(--colorsActionMinor500); :not([aria-pressed="true"]):not(:disabled):hover { @@ -166,6 +215,22 @@ const StyledButtonToggle = styled.button` } } +<<<<<<< HEAD +======= +<<<<<<< HEAD + &[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); + } + } + `} +>>>>>>> 8c445eebb (feat(button-toggle): add minor child) +======= +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) &[aria-pressed="true"]:not(:hover) { box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500); background-color: transparent; @@ -175,6 +240,10 @@ const StyledButtonToggle = styled.button` 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090); } } +<<<<<<< HEAD +======= +>>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) `; const iconFontSizes = { @@ -226,7 +295,21 @@ const StyledButtonToggleWrapper = styled.div` css` &&&& { ${StyledButtonToggle} { +<<<<<<< HEAD + border-radius: var(--borderRadius050); +======= +<<<<<<< HEAD +<<<<<<< HEAD border-radius: var(--borderRadius050); +======= + border-radius: ${variant === "minor" + ? "var(--borderRadius050)" + : "var(--borderRadius400)"}; +>>>>>>> 8c445eebb (feat(button-toggle): add minor child) +======= + border-radius: var(--borderRadius050); +>>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } `} @@ -236,15 +319,53 @@ const StyledButtonToggleWrapper = styled.div` &&&& { :first-of-type { ${StyledButtonToggle} { +<<<<<<< HEAD + border-top-left-radius: var(--borderRadius050); + border-bottom-left-radius: var(--borderRadius050); +======= +<<<<<<< HEAD +<<<<<<< HEAD border-top-left-radius: var(--borderRadius050); border-bottom-left-radius: var(--borderRadius050); +======= + border-top-left-radius: ${variant === "minor" + ? "var(--borderRadius050)" + : "var(--borderRadius400)"}; + border-bottom-left-radius: ${variant === "minor" + ? "var(--borderRadius050)" + : "var(--borderRadius400)"}; +>>>>>>> 8c445eebb (feat(button-toggle): add minor child) +======= + border-top-left-radius: var(--borderRadius050); + border-bottom-left-radius: var(--borderRadius050); +>>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } :last-of-type { ${StyledButtonToggle} { +<<<<<<< HEAD + border-top-right-radius: var(--borderRadius050); + border-bottom-right-radius: var(--borderRadius050); +======= +<<<<<<< HEAD +<<<<<<< HEAD + border-top-right-radius: var(--borderRadius050); + border-bottom-right-radius: var(--borderRadius050); +======= + border-top-right-radius: ${variant === "minor" + ? "var(--borderRadius050)" + : "var(--borderRadius400)"}; + border-bottom-right-radius: ${variant === "minor" + ? "var(--borderRadius050)" + : "var(--borderRadius400)"}; +>>>>>>> 8c445eebb (feat(button-toggle): add minor child) +======= border-top-right-radius: var(--borderRadius050); border-bottom-right-radius: var(--borderRadius050); +>>>>>>> 0a84e5447 (feat(button-toggle): rm variant prop) +>>>>>>> df20abe7b (feat(button-toggle): rm variant prop) } } }