Redesign ButtonGroup and ToggleButton (#603)

StenaIT · Sep 26, 2023 · becec6c · becec6c
1 parent c6699c4
commit becec6c
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 202 deletions.
diff --git a/packages/core/src/types/ElementProps.tsx b/packages/core/src/types/ElementProps.tsx
@@ -21,6 +21,8 @@ export type H1Props = ComponentPropsWithoutRef<"h1">;
 
 export type ButtonElementProps = ComponentPropsWithoutRef<"button">;
 
+export type InputElementProps = ComponentPropsWithoutRef<"input">;
+
 export type AnchorElementProps = ComponentPropsWithoutRef<"a">;
 
 export interface WithInnerRef<TInputElement> {

diff --git a/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx b/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
@@ -1,4 +1,3 @@
-import { faFire } from "@fortawesome/free-solid-svg-icons/faFire";
 import { faSave } from "@fortawesome/free-solid-svg-icons/faSave";
 import { useBoolean, useTimeoutState } from "@stenajs-webui/core";
 import { action } from "@storybook/addon-actions";
@@ -7,20 +6,23 @@ import { ActionMenu } from "./ActionMenu";
 import { ActionMenuSeparator } from "./ActionMenuSeparator";
 import markdown from "./ActionMenu.md?raw";
 import {
-  faExternalLinkAlt,
   faSadCry,
   faToggleOff,
   faToggleOn,
 } from "@fortawesome/free-solid-svg-icons";
 import { ActionMenuLink } from "./ActionMenuLink";
 import { ActionMenuItemContent } from "./ActionMenuItemContent";
 import { ButtonGroup } from "../button-group/ButtonGroup";
-import { faAirFreshener } from "@fortawesome/free-solid-svg-icons/faAirFreshener";
-import { SecondaryButton } from "../buttons/SecondaryButton";
-import { PrimaryButton } from "../buttons/PrimaryButton";
-import { stenaSearch } from "../../../icons/ui/IconsUi";
+import {
+  stenaExternalLink,
+  stenaSave,
+  stenaSearch,
+  stenaSlidersMini,
+  stenaTrash,
+} from "../../../icons/ui/IconsUi";
 import * as React from "react";
 import { useState } from "react";
+import { ToggleButton } from "../toggle-button/ToggleButton";
 
 export default {
   title: "elements/ActionMenu",
@@ -40,38 +42,38 @@ export const Standard = () => (
     />
     <ActionMenuItem
       label={"Save"}
-      leftIcon={faSave}
+      leftIcon={stenaSave}
       onClick={action("Saved")}
     />
     <ActionMenuLink
       label={"Open new window"}
-      leftIcon={faExternalLinkAlt}
+      leftIcon={stenaExternalLink}
       href={"https://www.google.com"}
       target={"_blank"}
     />
     <ActionMenuLink
       label={"Open disabled"}
       disabled
-      leftIcon={faExternalLinkAlt}
+      leftIcon={stenaExternalLink}
       href={"https://www.google.com"}
       target={"_blank"}
     />
     <ActionMenuItem
       label={"Burn it"}
-      leftIcon={faFire}
+      leftIcon={stenaTrash}
       onClick={action("It was burned!")}
       variant={"danger"}
     />
     <ActionMenuItem
       label={"Disabled danger"}
-      leftIcon={faFire}
+      leftIcon={stenaTrash}
       onClick={action("Oh noes how did you activate this!?")}
       variant={"danger"}
       disabled={true}
     />
     <ActionMenuItem
       label={"Save it"}
-      leftIcon={faSave}
+      leftIcon={stenaSave}
       onClick={action("It was saved!")}
     />
     <ActionMenuItem
@@ -88,9 +90,9 @@ export const Standard = () => (
       label={"Content right"}
       right={
         <ButtonGroup>
-          <PrimaryButton size={"small"} label={"S"} />
-          <SecondaryButton size={"small"} label={"M"} />
-          <SecondaryButton size={"small"} label={"L"} />
+          <ToggleButton value={true} size={"small"} label={"S"} />
+          <ToggleButton size={"small"} label={"M"} />
+          <ToggleButton size={"small"} label={"L"} />
         </ButtonGroup>
       }
     />
@@ -99,39 +101,39 @@ export const Standard = () => (
       leftIcon={stenaSearch}
       bottom={
         <ButtonGroup>
-          <SecondaryButton size={"small"} label={"25"} />
-          <PrimaryButton size={"small"} label={"50"} />
-          <SecondaryButton size={"small"} label={"100"} />
+          <ToggleButton size={"small"} label={"25"} />
+          <ToggleButton value={true} size={"small"} label={"50"} />
+          <ToggleButton size={"small"} label={"100"} />
         </ButtonGroup>
       }
     />
     <ActionMenuItemContent
       label={"Bottom full width"}
-      leftIcon={faAirFreshener}
+      leftIcon={stenaSlidersMini}
       bottom={
         <ButtonGroup>
-          <SecondaryButton size={"small"} label={"10"} />
-          <PrimaryButton size={"small"} label={"20"} />
-          <SecondaryButton size={"small"} label={"30"} />
-          <SecondaryButton size={"small"} label={"40"} />
-          <SecondaryButton size={"small"} label={"50"} />
-          <SecondaryButton size={"small"} label={"60"} />
+          <ToggleButton size={"small"} label={"10"} />
+          <ToggleButton size={"small"} label={"20"} value={true} />
+          <ToggleButton size={"small"} label={"30"} />
+          <ToggleButton size={"small"} label={"40"} />
+          <ToggleButton size={"small"} label={"50"} />
+          <ToggleButton size={"small"} label={"60"} />
         </ButtonGroup>
       }
       fullWidthBottomContent
     />
     <ActionMenuItemContent
       disabled
       label={"Bottom full width disabled"}
-      leftIcon={faAirFreshener}
+      leftIcon={stenaSlidersMini}
       bottom={
         <ButtonGroup>
-          <SecondaryButton size={"small"} label={"10"} disabled />
-          <PrimaryButton size={"small"} label={"20"} disabled />
-          <SecondaryButton size={"small"} label={"30"} disabled />
-          <SecondaryButton size={"small"} label={"40"} disabled />
-          <SecondaryButton size={"small"} label={"50"} disabled />
-          <SecondaryButton size={"small"} label={"60"} disabled />
+          <ToggleButton size={"small"} label={"10"} disabled />
+          <ToggleButton value={true} size={"small"} label={"20"} disabled />
+          <ToggleButton size={"small"} label={"30"} disabled />
+          <ToggleButton size={"small"} label={"40"} disabled />
+          <ToggleButton size={"small"} label={"50"} disabled />
+          <ToggleButton size={"small"} label={"60"} disabled />
         </ButtonGroup>
       }
       fullWidthBottomContent

diff --git a/packages/elements/src/components/ui/button-group/ButtonGroup.module.css b/packages/elements/src/components/ui/button-group/ButtonGroup.module.css
@@ -1,26 +1,9 @@
 .buttonGroup {
-  display: flex;
+  display: inline-flex;
+  flex-direction: row;
+  padding: 2px;
+  gap: 2px;
+  border: 2px solid var(--lhds-color-ui-300);
 
-  & > button {
-    margin: 0;
-    position: relative;
-
-    &:not(:only-child):not(:last-child) {
-      margin-right: -1px;
-    }
-
-    &:hover:not(:disabled),
-    &:focus-visible {
-      z-index: 1;
-    }
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
+  border-radius: 12px;
 }
diff --git a/packages/elements/src/components/ui/button-group/ButtonGroup.stories.tsx b/packages/elements/src/components/ui/button-group/ButtonGroup.stories.tsx
@@ -1,11 +1,15 @@
-import { faAddressBook } from "@fortawesome/free-solid-svg-icons/faAddressBook";
-import { faAnchor } from "@fortawesome/free-solid-svg-icons/faAnchor";
-import { faEraser } from "@fortawesome/free-solid-svg-icons/faEraser";
-import { faRecycle } from "@fortawesome/free-solid-svg-icons/faRecycle";
 import { Row, Spacing } from "@stenajs-webui/core";
 import * as React from "react";
 import { SecondaryButton } from "../buttons/SecondaryButton";
 import { ButtonGroup } from "./ButtonGroup";
+import { FlatButton } from "../buttons/FlatButton";
+import {
+  stenaAccount,
+  stenaAnimals,
+  stenaSailingTicket,
+  stenaSailingTrain,
+  stenaSupport,
+} from "../../../icons/ui/IconsUi";
 
 export default {
   title: "elements/ButtonGroup",
@@ -17,26 +21,26 @@ export const Overview = () => (
   <>
     <Row>
       <ButtonGroup>
-        <SecondaryButton leftIcon={faRecycle} />
-        <SecondaryButton leftIcon={faAddressBook} />
-        <SecondaryButton leftIcon={faAddressBook} />
-        <SecondaryButton leftIcon={faAddressBook} />
-        <SecondaryButton leftIcon={faAnchor} />
+        <FlatButton leftIcon={stenaAccount} />
+        <FlatButton leftIcon={stenaAnimals} />
+        <FlatButton leftIcon={stenaSailingTicket} />
+        <FlatButton leftIcon={stenaSailingTrain} />
+        <FlatButton leftIcon={stenaSupport} />
       </ButtonGroup>
     </Row>
     <Spacing />
     <Row>
       <ButtonGroup>
-        <SecondaryButton leftIcon={faRecycle} />
-        <SecondaryButton leftIcon={faAddressBook} />
-        <SecondaryButton leftIcon={faAnchor} />
+        <FlatButton leftIcon={stenaSailingTicket} />
+        <FlatButton leftIcon={stenaSailingTrain} />
+        <FlatButton leftIcon={stenaSupport} />
       </ButtonGroup>
     </Row>
     <Spacing />
     <Row>
       <ButtonGroup>
-        <SecondaryButton leftIcon={faEraser} />
-        <SecondaryButton leftIcon={faEraser} />
+        <FlatButton leftIcon={stenaSailingTicket} />
+        <FlatButton leftIcon={stenaSailingTrain} />
       </ButtonGroup>
     </Row>
   </>

diff --git a/packages/elements/src/components/ui/button-group/ButtonGroup.tsx b/packages/elements/src/components/ui/button-group/ButtonGroup.tsx
@@ -1,11 +1,12 @@
 import cx from "classnames";
 import * as React from "react";
 import styles from "./ButtonGroup.module.css";
-import { ReactNode } from "react";
+import { ToggleButtonProps } from "../toggle-button/ToggleButton";
+import { FlatButtonProps } from "../buttons/FlatButton";
 
 export interface ButtonGroupProps {
   className?: string;
-  children?: ReactNode;
+  children: Iterable<React.ReactElement<ToggleButtonProps | FlatButtonProps>>;
 }
 
 export const ButtonGroup: React.FC<ButtonGroupProps> = ({