feat(button-toggle): rm variant prop

Sage · Oct 16, 2023 · 78ebffa · 78ebffa
1 parent d5a47e8
commit 78ebffa
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 25 deletions.
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
@@ -43,31 +43,6 @@ export const Controlled: ComponentStory<typeof ButtonToggleGroup> = () => {
   );
 };
 
-export const ControlledMinor: ComponentStory<typeof ButtonToggleGroup> = () => {
-  const [value, setValue] = useState("bar");
-  function onChangeHandler(
-    event: React.MouseEvent<HTMLButtonElement>,
-    selectedValue?: string
-  ) {
-    setValue(selectedValue as string);
-  }
-  return (
-    <ButtonToggleGroup
-      id="button-toggle-group-controlled-id"
-      label="Controlled example"
-      labelHelp="help message"
-      helpAriaLabel="Help"
-      fieldHelp="field help mesage"
-      onChange={onChangeHandler}
-      value={value}
-    >
-      <ButtonToggle value="foo">Foo</ButtonToggle>
-      <ButtonToggle value="bar">Bar</ButtonToggle>
-      <ButtonToggle value="baz">Baz</ButtonToggle>
-    </ButtonToggleGroup>
-  );
-};
-
 export const Grouped: ComponentStory<typeof ButtonToggleGroup> = () => (
   <ButtonToggleGroup
     id="button-toggle-group-grouped-id"

diff --git a/src/components/button-toggle/button-toggle-test.stories.tsx b/src/components/button-toggle/button-toggle-test.stories.tsx
@@ -60,6 +60,16 @@ export const ButtonToggleGroupMinorStory = () => {
       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>

diff --git 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<StyledButtonToggleProps>`
       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<StyledButtonToggleProps>`
     }
   }
 
+<<<<<<< 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<StyledButtonToggleProps>`
         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<StyledButtonToggleWrapperProps>`
       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<StyledButtonToggleWrapperProps>`
         &&&& {
           :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)
             }
           }
         }