feat: ButtonGroup fixes (#47)

* feat: ButtonGroup fixes * feat: Adds helper for button reset * [BEAM-44] Code review changes
homebound-team · Apr 14, 2021 · 7b9e04f · 7b9e04f
1 parent a9cad85
commit 7b9e04f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 18 deletions.
diff --git a/src/Css.ts b/src/Css.ts
@@ -816,6 +816,9 @@ class CssBuilder<T extends Properties1> {
     return this.addIn("& > * + *", Css.add(p, maybeInc(inc)).important.$);
   }
 
+  // buttonBase
+  get buttonBase() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add("borderRadius", "4px").add("display", "inline-flex").add("margin", "4px").add("alignItems", "center").add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms"); }
+
   // aliases
 
   get $(): T { return maybeImportant(sortObject(this.rules), this.opts.important); }

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -31,7 +31,7 @@ export function Button({ onClick: onPress, disabled: isDisabled, ...otherProps }
       {...focusProps}
       {...hoverProps}
       css={{
-        ...buttonReset,
+        ...Css.buttonBase.$,
         ...baseStyles,
         ...(isHovered && !isPressed ? hoverStyles : {}),
         ...(isPressed ? pressedStyles : {}),
@@ -60,8 +60,6 @@ function getButtonStyles(variant: ButtonVariant, size: ButtonSize) {
   };
 }
 
-const buttonReset = Css.smEm.br4.dif.itemsCenter.outline0.transition.mPx(4).$;
-
 const variantStyles: Record<
   ButtonVariant,
   { baseStyles: {}; hoverStyles: {}; disabledStyles: {}; pressedStyles: {} }

diff --git a/src/components/ButtonGroup.stories.tsx b/src/components/ButtonGroup.stories.tsx
@@ -10,32 +10,34 @@ export function ButtonGroups() {
   return (
     <div>
       <div>
+        <h2>Icon Only</h2>
         <ButtonGroup buttons={[
           {icon: "chevronLeft"},
           {icon: "plus"},
           {icon: "chevronRight"},
           ]}/>
       </div>
       <div>
+        <h2>Basic</h2>
         <ButtonGroup buttons={[
           {text: "Leading"},
           {text: "Middle"},
           {text: "Trailing"},
         ]}/>
       </div>
       <div>
-        <ButtonGroup disabled buttons={[
-          {text: "Leading"},
+        <h2>Active</h2>
+        <ButtonGroup buttons={[
+          {text: "Leading", active: true },
           {text: "Middle"},
           {text: "Trailing"},
         ]}/>
       </div>
       <div>
-        <ButtonGroup buttons={[
+        <h2>Disabled</h2>
+        <ButtonGroup disabled buttons={[
           {text: "Leading"},
           {text: "Middle"},
-          {text: "Middle"},
-          {text: "Middle"},
           {text: "Trailing"},
         ]}/>
       </div>

diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
@@ -12,6 +12,8 @@ interface ButtonGroupProps {
 interface ButtonGroupButtonProps extends BeamButtonProps, BeamFocusableProps {
   text?: string;
   icon?: IconProps["icon"];
+  // Active is used to indicate the active/selected button, as in a tab or toggle.
+  active?: boolean;
 }
 
 export function ButtonGroup(props: ButtonGroupProps) {
@@ -25,8 +27,7 @@ export function ButtonGroup(props: ButtonGroupProps) {
   );
 }
 
-export function ButtonGroupButton(props: ButtonGroupButtonProps) {
-  const { icon, text, onClick: onPress, disabled, ...otherProps } = props;
+export function ButtonGroupButton({icon, text, active, onClick: onPress, disabled, ...otherProps}: ButtonGroupButtonProps) {
   const ariaProps = { onPress, isDisabled: disabled, ...otherProps };
   const ref = useRef(null);
   const { buttonProps, isPressed } = useButton(ariaProps, ref);
@@ -41,10 +42,11 @@ export function ButtonGroupButton(props: ButtonGroupButtonProps) {
       {...focusProps}
       {...hoverProps}
       css={{
-        ...buttonReset,
+        ...Css.buttonBase.$,
         ...buttonStyles,
         ...(isFocusVisible ? defaultFocusRingStyles : {}),
-        ...(isPressed ? activeStyles : isHovered ? hoverStyles : {}),
+        ...(active ? activeStyles : {}),
+        ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
         ...(icon ? iconStyles : {}),
       }}
     >
@@ -54,8 +56,8 @@ export function ButtonGroupButton(props: ButtonGroupButtonProps) {
   );
 }
 
-const buttonReset = Css.smEm.br4.dif.itemsCenter.outline0.transition.mPx(4).$;
-const activeStyles = Css.bgGray200.important.$;
+const pressedStyles = Css.bgGray200.$;
+const activeStyles = Css.bgGray300.$;
 const hoverStyles = Css.bgGray100.$;
 const defaultFocusRingStyles = Css.relative.z2.bshFocus.$;
 const iconStyles = Css.px1.$;

diff --git a/truss/index.ts b/truss/index.ts
@@ -1,4 +1,4 @@
-import { generate, newIncrementDelegateMethods, newMethodsForProp, Sections } from "@homebound/truss";
+import { generate, newMethod, newIncrementDelegateMethods, newMethodsForProp, Sections } from "@homebound/truss";
 import { palette } from "./palette";
 
 const increment = 8;
@@ -30,6 +30,8 @@ const fonts: Record<string, { fontWeight: 400 | 500 | 600, fontSize: string; lin
   xl5Em:  { fontWeight: 600, fontSize: "48px", lineHeight: "48px" },
 };
 
+const transition: string = ["background-color", "border-color", "box-shadow", "left", "right"].map((property) => `${property} 200ms`).join(", ");
+
 // Custom rules
 const sections: Sections = {
   fontFamily: () =>
@@ -47,9 +49,7 @@ const sections: Sections = {
     }),
   animation: () =>
     newMethodsForProp("transition", {
-      transition: ["background-color", "border-color", "box-shadow", "left", "right"]
-        .map((property) => `${property} 200ms`)
-        .join(", "),
+      transition,
     }),
   boxShadow: () =>
     newMethodsForProp("boxShadow", {
@@ -68,6 +68,17 @@ const sections: Sections = {
     return this.addIn("& > * + *", Css.add(p, maybeInc(inc)).important.$);
   }`,
   ],
+  buttonBase: () => [
+    newMethod("buttonBase", {
+      ...fonts.smEm,
+      outline: 0,
+      borderRadius: "4px",
+      display: "inline-flex",
+      margin: "4px",
+      alignItems: "center",
+      transition,
+    }),
+  ],
 };
 
 const aliases: Record<string, string[]> = {};