feat(button-toggle): add minor child

feat(button-toggle): rm variant prop feat(button-toggle): rm variant prop, tests feat(button-toggle): fix ts errors feat(button-toggle): update snaps feat(button-toggle): rm variant prop
Sage · Oct 16, 2023 · fe4da3b · fe4da3b
1 parent 853a926
commit fe4da3b
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 73 deletions.
diff --git a/cypress/components/button-toggle/button-toggle.cy.tsx b/cypress/components/button-toggle/button-toggle.cy.tsx
@@ -94,40 +94,6 @@ context("Testing Button-Toggle component", () => {
       });
     });
 
-    describe("rounded corners", () => {
-      it("has the expected border-radius styling on a single toggle button", () => {
-        CypressMountWithProviders(
-          <ButtonToggleComponent>Foo</ButtonToggleComponent>
-        );
-
-        buttonToggleButton().each((el) =>
-          expect(el.css("border-radius")).equals("32px")
-        );
-      });
-
-      it("should have the expected border-radius styling when the children have the grouped prop set", () => {
-        CypressMountWithProviders(
-          <stories.ButtonToggleGroupComponentGroupedChildren />
-        );
-
-        buttonToggleButton()
-          .eq(0)
-          .should("have.css", "border-radius", "32px 0px 0px 32px");
-        buttonToggleButton().eq(1).should("have.css", "border-radius", "0px");
-        buttonToggleButton()
-          .eq(2)
-          .should("have.css", "border-radius", "0px 32px 32px 0px");
-      });
-
-      it("should have the expected border-radius styling when children do not have grouped prop set", () => {
-        CypressMountWithProviders(<stories.ButtonToggleGroupComponent />);
-
-        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");
-      });
-    });
-
     it("should render Button-Toggle with aria-label prop", () => {
       CypressMountWithProviders(
         <ButtonToggleComponent aria-label="cypress-aria" />

diff --git 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,8 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
   text-align: start;
   color: inherit;
   border: 1px solid var(--colorsActionMinor500);
+  color: var(--colorsActionMinor500);
+  border: 1px solid var(--colorsActionMinor500);
 }
 
 .c2:focus {
@@ -56,8 +58,43 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
   color: var(--colorsActionMinor500);
 }
 
+.c2 .c4 {
+  color: var(--colorsActionMinor500);
+}
+
+.c2 .c4:not([aria-pressed="true"]):not(:disabled):hover {
+  color: var(--colorsActionMinorYang100);
+}
+
+.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);
+}
+
+.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);
+}
+
 .c3.c3.c3.c3 .c1 {
-  border-radius: var(--borderRadius400);
+  border-radius: var(--borderRadius050);
 }
 
 .c0 {
@@ -66,13 +103,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.stories.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx
@@ -64,6 +64,27 @@ export const Grouped: ComponentStory<typeof ButtonToggleGroup> = () => (
   </ButtonToggleGroup>
 );
 
+export const GroupedMinor: ComponentStory<typeof ButtonToggleGroup> = () => (
+  <ButtonToggleGroup
+    id="button-toggle-group-grouped-id"
+    label="Grouped example"
+    labelHelp="help message"
+    helpAriaLabel="Help"
+    fieldHelp="field help mesage"
+    onChange={() => {}}
+  >
+    <ButtonToggle value="foo" grouped>
+      Foo
+    </ButtonToggle>
+    <ButtonToggle value="bar" grouped>
+      Bar
+    </ButtonToggle>
+    <ButtonToggle value="baz" grouped>
+      Baz
+    </ButtonToggle>
+  </ButtonToggleGroup>
+);
+
 export const FullWidth: ComponentStory<typeof ButtonToggleGroup> = () => (
   <ButtonToggleGroup
     id="button-toggle-group-fullWidth-id"

diff --git a/src/components/button-toggle/button-toggle-test.stories.tsx b/src/components/button-toggle/button-toggle-test.stories.tsx
@@ -41,6 +41,43 @@ export const DefaultStory = () => {
   );
 };
 
+export const ButtonToggleGroupMinorStory = () => {
+  const [value, setValue] = useState<string | undefined>("bar");
+  function onChangeHandler(
+    event: React.MouseEvent<HTMLButtonElement>,
+    selectedButtonValue?: string
+  ) {
+    setValue(selectedButtonValue);
+    action("value set")(selectedButtonValue);
+  }
+  return (
+    <ButtonToggleGroup
+      id="button-toggle-group"
+      name="button-toggle-group"
+      label="Button Toggle Group test"
+      labelHelp="help message"
+      helpAriaLabel="Help"
+      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)
+    >
+      <ButtonToggle value="foo">Foo</ButtonToggle>
+      <ButtonToggle value="bar">Bar</ButtonToggle>
+      <ButtonToggle value="baz">Baz</ButtonToggle>
+    </ButtonToggleGroup>
+  );
+};
+
 export const WithoutGroup = (args: Partial<ButtonToggleProps>) => (
   <div>
     <ButtonToggle

diff --git 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
@@ -10,7 +10,6 @@ import {
   StyledButtonToggleIcon,
   ButtonToggleIconSizes,
   StyledButtonToggle,
-  StyledButtonToggleWrapper,
 } from "./button-toggle.style";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { ThemeObject } from "../../style/themes/base";
@@ -396,16 +395,4 @@ describe("ButtonToggle", () => {
   describe("coverage filler for else path", () => {
     mount(<ButtonToggle buttonIcon="add">toggle</ButtonToggle>);
   });
-
-  it("renders with the expected border radius styling", () => {
-    assertStyleMatch(
-      {
-        borderRadius: "var(--borderRadius400)",
-      },
-      mount(<ButtonToggle>toggle</ButtonToggle>).find(
-        StyledButtonToggleWrapper
-      ),
-      { modifier: `&&&& ${StyledButtonToggle}` }
-    );
-  });
 });
diff --git 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";
 
-<Meta 
+<Meta
   title="Button Toggle"
   parameters={{
     info: { disable: true },
@@ -19,7 +19,7 @@ import * as groupStories from "./button-toggle-group/button-toggle-group.stories
 <a
   target="_blank"
   href="https://zeroheight.com/2ccf2b601/p/996a28-button-toggle/b/7384f9"
-  style={{ color: '#007E45', fontWeight: 'bold', textDecoration: 'underline' }}
+  style={{ color: "#007E45", fontWeight: "bold", textDecoration: "underline" }}
 >
   Product Design System component
 </a>
@@ -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 <LinkTo kind="Button Toggle Group" story="default">ButtonToggleGroup component</LinkTo> 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
@@ -2,7 +2,6 @@ import React from "react";
 import { ComponentStory } from "@storybook/react";
 
 import { ButtonToggle, ButtonToggleGroup } from ".";
-import Box from "../box";
 
 export const Default: ComponentStory<typeof ButtonToggle> = () => (
   <ButtonToggleGroup id="button-toggle-group-id" label="Default example">
@@ -13,16 +12,14 @@ export const Default: ComponentStory<typeof ButtonToggle> = () => (
 );
 
 export const DefaultWrappedText: ComponentStory<typeof ButtonToggle> = () => (
-  <Box margin={4} width="250px" display="flex" flexWrap="nowrap">
-    <ButtonToggleGroup id="button-toggle-group-id" label="Wrapped text example">
-      <ButtonToggle value="wraps" grouped>
-        Some text that wraps
-      </ButtonToggle>
-      <ButtonToggle value="foobar" grouped>
-        FooBar
-      </ButtonToggle>
-    </ButtonToggleGroup>
-  </Box>
+  <ButtonToggleGroup id="button-toggle-group-id" label="Wrapped text example">
+    <ButtonToggle value="wraps" grouped>
+      Some text that wraps
+    </ButtonToggle>
+    <ButtonToggle value="foobar" grouped>
+      FooBar
+    </ButtonToggle>
+  </ButtonToggleGroup>
 );
 
 export const DefaultSmallIcon: ComponentStory<typeof ButtonToggle> = () => (