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 · Nov 27, 2023 · c814b34 · c814b34
1 parent cb36b23
commit c814b34
Show file tree

Hide file tree

Showing 10 changed files with 402 additions and 364 deletions.
diff --git 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(<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");
+        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
@@ -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
@@ -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"],