29 add buttongroup

changelog-notes.md

@@ -0,0 +1,3 @@
+- added fit-content option to Flex
+- added role to Flex
+- added ButtonGroup

src/components/index.ts

@@ -1 +1,2 @@
+export { ButtonGroup } from "@components/molecules";
 export { Flex } from "@components/layout";

src/components/layout/Flex/func.tsx

@@ -28,6 +28,7 @@ import type {
 
 type TProps = {
   children: ReactNode;
+  role?: string;
   position?: TFlexPosition;
   direction?: TFlexDirection;
   justifyContent?: TFlexOptionContent;
@@ -124,6 +125,7 @@ export default function Flex({
   className = undefined,
   testId = undefined,
   children,
+  role = undefined,
   ...rest
 }: TProps) {
   const flexBoxClass = useFlexBox(
@@ -149,6 +151,7 @@ export default function Flex({
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...ariaProps}
       data-testid={testId}
+      role={role}
       className={mergeClasses(
         positionClass,
         flexBoxClass,

src/components/layout/Flex/styles/dimensions.ts

@@ -4,6 +4,9 @@ const useDimensionClasses = makeStyles({
   autoWidth: {
     width: "auto",
   },
+  fitContentWidth: {
+    width: "fit-content",
+  },
   "25%Width": {
     width: "25%",
   },
@@ -17,6 +20,9 @@ const useDimensionClasses = makeStyles({
     width: "100%",
   },
 
+  fitContentHeight: {
+    height: "fit-content",
+  },
   autoHeight: {
     height: "auto",
   },

src/components/layout/Flex/tests.tsx

@@ -359,10 +359,10 @@ describe("Flex", () => {
         const FlexElement = screen.getByText("FlexChild");
         expect(FlexElement).toHaveStyle("height: 75%");
       });
-      it("should render with height auto", () => {
-        render(<Flex shHeight="auto">FlexChild</Flex>);
+      it("should render with height fitContent", () => {
+        render(<Flex shHeight="fitContent">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("height: auto");
+        expect(FlexElement).toHaveStyle("height: fit-content");
       });
     });
     describe("for shWidth", () => {
@@ -386,10 +386,10 @@ describe("Flex", () => {
         const FlexElement = screen.getByText("FlexChild");
         expect(FlexElement).toHaveStyle("width: 75%");
       });
-      it("should render with width auto", () => {
-        render(<Flex shWidth="auto">FlexChild</Flex>);
+      it("should render with width fitContent", () => {
+        render(<Flex shWidth="fitContent">FlexChild</Flex>);
         const FlexElement = screen.getByText("FlexChild");
-        expect(FlexElement).toHaveStyle("width: auto");
+        expect(FlexElement).toHaveStyle("width: fit-content");
       });
     });
     describe("for className", () => {

src/components/layout/Flex/types.ts

@@ -31,7 +31,14 @@ export type TFlexBasis =
   | "fitContent"
   | "content"
   | "0";
-export type TFlexShorthandDimensions = "25%" | "50%" | "75%" | "100%" | "auto";
+
+export type TFlexShorthandDimensions =
+  | "25%"
+  | "50%"
+  | "75%"
+  | "100%"
+  | "auto"
+  | "fitContent";
 
 export type TFlexPosition =
   | "-moz-initial"

src/components/molecules/ButtonGroup/func.tsx

@@ -0,0 +1,52 @@
+import type { JSX } from "react";
+
+import { Flex } from "@components/layout";
+import useButtonGroupClasses from "@components/molecules/ButtonGroup/styles";
+
+type TProps = {
+  children: JSX.Element[];
+  ariaLabel?: string;
+};
+
+/**
+ * @description
+ * - a very simple wrapper to get started with a button group
+ * - will make sure that the first and last childs borderRadius is preserved
+ * - while the ones in between are normalized and the border is removed, to avoid double borders
+ * - all subsequent logic needs to be handled by the consumer, there are examples in the storybook
+ *
+ * @hints
+ * - make sure the buttons are of the same size
+ * - make sure the buttons on the edges have the same shape
+ * - make sure that when disabling a Button, you use the `disableFosusable` prop, in order to ensure consistent tab-index order
+ * - use appearance="primary" for the currently active button and the rest to default "outline"
+ * - probably use it in a XOR fashion, so that only one button is active at a time
+ *
+ * @accessibility
+ * - in general should not be used for 100% accesibility proof interactions
+ * - as its not very clear how to indicate the current state to screen readers, because the buttons dont have an active state
+ *
+ * @props
+ * - `children`: expects the Button component, at least two
+ * - `ariaLabel`: optional, used for accessibility
+ *
+ * @default
+ *  arialLabel = "Button group"
+ *
+ */
+export default function ButtonGroup({
+  children,
+  ariaLabel = "Button group",
+}: TProps): JSX.Element {
+  const classes = useButtonGroupClasses();
+  return (
+    <Flex
+      className={classes.root}
+      shWidth="fitContent"
+      role="group"
+      aria-label={ariaLabel}
+    >
+      {children}
+    </Flex>
+  );
+}

src/components/molecules/ButtonGroup/index.ts

@@ -0,0 +1,3 @@
+import ButtonGroup from "@components/molecules/ButtonGroup/func";
+
+export default ButtonGroup;