From 441dde599ee10ac33cccfb73c77a214e4e19e478 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 17:43:48 +0000 Subject: [PATCH 01/11] init --- src/components/index.ts | 1 + src/components/molecules/ButtonGroup/func.tsx | 20 +++++++++++++++++++ src/components/molecules/ButtonGroup/index.ts | 3 +++ .../molecules/ButtonGroup/stories.ts | 15 ++++++++++++++ .../molecules/ButtonGroup/styles.ts | 19 ++++++++++++++++++ src/components/molecules/index.ts | 1 + src/index.ts | 6 +++--- 7 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 src/components/molecules/ButtonGroup/func.tsx create mode 100644 src/components/molecules/ButtonGroup/index.ts create mode 100644 src/components/molecules/ButtonGroup/stories.ts create mode 100644 src/components/molecules/ButtonGroup/styles.ts create mode 100644 src/components/molecules/index.ts diff --git a/src/components/index.ts b/src/components/index.ts index 0d16f39..0f05206 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ +export { ButtonGroup } from "@components/molecules"; export { Flex } from "@components/layout"; diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx new file mode 100644 index 0000000..8b056e6 --- /dev/null +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -0,0 +1,20 @@ +import type { JSX } from "react"; + +import useButtonGroupClasses from "./styles"; + +import { Flex } from "@components/layout"; + +import { Button } from "@fluentui/react-components"; + +type TProps = {}; + +export default function ButtonGroup({}: TProps): JSX.Element { + const classes = useButtonGroupClasses(); + return ( + + + + + + ); +} diff --git a/src/components/molecules/ButtonGroup/index.ts b/src/components/molecules/ButtonGroup/index.ts new file mode 100644 index 0000000..10de8d5 --- /dev/null +++ b/src/components/molecules/ButtonGroup/index.ts @@ -0,0 +1,3 @@ +import ButtonGroup from "@components/molecules/ButtonGroup/func"; + +export default ButtonGroup; diff --git a/src/components/molecules/ButtonGroup/stories.ts b/src/components/molecules/ButtonGroup/stories.ts new file mode 100644 index 0000000..d3f5cb9 --- /dev/null +++ b/src/components/molecules/ButtonGroup/stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import ButtonGroup from "@components/molecules/ButtonGroup"; + +const meta: Meta = { + title: "Components/Molecules/ButtonGroup", + component: ButtonGroup, + args: {}, +}; + +export default meta; + +type Story = StoryObj; + +export const Index: Story = {}; diff --git a/src/components/molecules/ButtonGroup/styles.ts b/src/components/molecules/ButtonGroup/styles.ts new file mode 100644 index 0000000..09f1d32 --- /dev/null +++ b/src/components/molecules/ButtonGroup/styles.ts @@ -0,0 +1,19 @@ +import { makeStyles } from "@fluentui/react-components"; + +const useButtonGroupClasses = makeStyles({ + root: { + "& > *:first-child": { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + "& > *:not(:first-child):not(:last-child)": { + borderRadius: 0, + }, + "& > *:last-child": { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, +}); + +export default useButtonGroupClasses; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts new file mode 100644 index 0000000..ff9a454 --- /dev/null +++ b/src/components/molecules/index.ts @@ -0,0 +1 @@ +export { default as ButtonGroup } from "@components/molecules/ButtonGroup"; diff --git a/src/index.ts b/src/index.ts index 37f88b8..9244973 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ -export { EThemeSpacing, EThemeIconSizes, EThemeDimensions } from "@theme/index"; -export { useFuiProviderNode } from "@hooks/index"; -export { Flex } from "@components/index"; +export { EThemeSpacing, EThemeIconSizes, EThemeDimensions } from "@theme"; +export { useFuiProviderNode } from "@hooks"; +export { Flex, ButtonGroup } from "@components"; From 70b76e9fb1811b0b6dc66171beb77a8ba9ccbf55 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 17:52:05 +0000 Subject: [PATCH 02/11] added fit content --- src/components/layout/Flex/styles/dimensions.ts | 6 ++++++ src/components/layout/Flex/tests.tsx | 12 ++++++------ src/components/layout/Flex/types.ts | 9 ++++++++- src/components/molecules/ButtonGroup/func.tsx | 2 +- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/layout/Flex/styles/dimensions.ts b/src/components/layout/Flex/styles/dimensions.ts index 356a216..a945d56 100644 --- a/src/components/layout/Flex/styles/dimensions.ts +++ b/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", }, diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index 74a288f..2a5d2b6 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/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(FlexChild); + it("should render with height fitContent", () => { + render(FlexChild); 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(FlexChild); + it("should render with width fitContent", () => { + render(FlexChild); const FlexElement = screen.getByText("FlexChild"); - expect(FlexElement).toHaveStyle("width: auto"); + expect(FlexElement).toHaveStyle("width: fit-content"); }); }); describe("for className", () => { diff --git a/src/components/layout/Flex/types.ts b/src/components/layout/Flex/types.ts index a5843bf..74d0591 100644 --- a/src/components/layout/Flex/types.ts +++ b/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" diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 8b056e6..91bdd40 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -11,7 +11,7 @@ type TProps = {}; export default function ButtonGroup({}: TProps): JSX.Element { const classes = useButtonGroupClasses(); return ( - + From 6b899b43e6c4e9e79ff24769d84ee09886148e65 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:01:29 +0000 Subject: [PATCH 03/11] add --- changelog-notes.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelog-notes.md diff --git a/changelog-notes.md b/changelog-notes.md new file mode 100644 index 0000000..f15e606 --- /dev/null +++ b/changelog-notes.md @@ -0,0 +1,2 @@ +- added fit-content option to Flex +- added ButtonGroup From 13e3a19f9dccc1517b671de6a3aeacc58b5c1933 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:15:44 +0000 Subject: [PATCH 04/11] better api --- src/components/molecules/ButtonGroup/func.tsx | 12 ++--- .../molecules/ButtonGroup/stories.ts | 15 ------ .../molecules/ButtonGroup/stories.tsx | 54 +++++++++++++++++++ .../molecules/ButtonGroup/styles.ts | 2 + 4 files changed, 61 insertions(+), 22 deletions(-) delete mode 100644 src/components/molecules/ButtonGroup/stories.ts create mode 100644 src/components/molecules/ButtonGroup/stories.tsx diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 91bdd40..a7e2a60 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -4,17 +4,15 @@ import useButtonGroupClasses from "./styles"; import { Flex } from "@components/layout"; -import { Button } from "@fluentui/react-components"; +type TProps = { + children: JSX.Element[]; +}; -type TProps = {}; - -export default function ButtonGroup({}: TProps): JSX.Element { +export default function ButtonGroup({ children }: TProps): JSX.Element { const classes = useButtonGroupClasses(); return ( - - - + {children} ); } diff --git a/src/components/molecules/ButtonGroup/stories.ts b/src/components/molecules/ButtonGroup/stories.ts deleted file mode 100644 index d3f5cb9..0000000 --- a/src/components/molecules/ButtonGroup/stories.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import ButtonGroup from "@components/molecules/ButtonGroup"; - -const meta: Meta = { - title: "Components/Molecules/ButtonGroup", - component: ButtonGroup, - args: {}, -}; - -export default meta; - -type Story = StoryObj; - -export const Index: Story = {}; diff --git a/src/components/molecules/ButtonGroup/stories.tsx b/src/components/molecules/ButtonGroup/stories.tsx new file mode 100644 index 0000000..e8da5c0 --- /dev/null +++ b/src/components/molecules/ButtonGroup/stories.tsx @@ -0,0 +1,54 @@ +import { useState } from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { CalendarMonthRegular } from "@fluentui/react-icons"; +import ButtonGroup from "@components/molecules/ButtonGroup"; +import { Button } from "@fluentui/react-components"; + +const meta: Meta = { + title: "Components/Molecules/ButtonGroup", + component: ButtonGroup, + args: {}, +}; + +export default meta; + +type Story = StoryObj; + +export const Index: Story = { + render: () => { + const [activeOption, setActiveOption] = useState(1); + + return ( + + + + + + + ); + }, +}; diff --git a/src/components/molecules/ButtonGroup/styles.ts b/src/components/molecules/ButtonGroup/styles.ts index 09f1d32..1aff246 100644 --- a/src/components/molecules/ButtonGroup/styles.ts +++ b/src/components/molecules/ButtonGroup/styles.ts @@ -8,6 +8,8 @@ const useButtonGroupClasses = makeStyles({ }, "& > *:not(:first-child):not(:last-child)": { borderRadius: 0, + borderLeft: "none", + borderRight: "none", }, "& > *:last-child": { borderTopLeftRadius: 0, From dd703dcfec27668f863052ecffc898df140289ab Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:17:56 +0000 Subject: [PATCH 05/11] fixed borders --- src/components/molecules/ButtonGroup/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/ButtonGroup/styles.ts b/src/components/molecules/ButtonGroup/styles.ts index 1aff246..04656ba 100644 --- a/src/components/molecules/ButtonGroup/styles.ts +++ b/src/components/molecules/ButtonGroup/styles.ts @@ -9,9 +9,9 @@ const useButtonGroupClasses = makeStyles({ "& > *:not(:first-child):not(:last-child)": { borderRadius: 0, borderLeft: "none", - borderRight: "none", }, "& > *:last-child": { + borderLeft: "none", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }, From c4e247724e998d917458abf475f966918ddf0802 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:21:24 +0000 Subject: [PATCH 06/11] imp config --- .../molecules/ButtonGroup/stories.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/ButtonGroup/stories.tsx b/src/components/molecules/ButtonGroup/stories.tsx index e8da5c0..92e860c 100644 --- a/src/components/molecules/ButtonGroup/stories.tsx +++ b/src/components/molecules/ButtonGroup/stories.tsx @@ -15,7 +15,7 @@ export default meta; type Story = StoryObj; -export const Index: Story = { +export const ImperativeConfig: Story = { render: () => { const [activeOption, setActiveOption] = useState(1); @@ -23,7 +23,6 @@ export const Index: Story = { - + ); }, From f74f3c74623c7e149b10fd1acb338770cca27657 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:30:46 +0000 Subject: [PATCH 07/11] imp done --- changelog-notes.md | 1 + src/components/layout/Flex/func.tsx | 3 +++ src/components/molecules/ButtonGroup/func.tsx | 13 +++++++++++-- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/changelog-notes.md b/changelog-notes.md index f15e606..de21b54 100644 --- a/changelog-notes.md +++ b/changelog-notes.md @@ -1,2 +1,3 @@ - added fit-content option to Flex +- added role to Flex - added ButtonGroup diff --git a/src/components/layout/Flex/func.tsx b/src/components/layout/Flex/func.tsx index e68592e..ee8f9ed 100644 --- a/src/components/layout/Flex/func.tsx +++ b/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, diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index a7e2a60..463c770 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -6,12 +6,21 @@ import { Flex } from "@components/layout"; type TProps = { children: JSX.Element[]; + ariaLabel?: string; }; -export default function ButtonGroup({ children }: TProps): JSX.Element { +export default function ButtonGroup({ + children, + ariaLabel = "Button group", +}: TProps): JSX.Element { const classes = useButtonGroupClasses(); return ( - + {children} ); From 99fd94a8e4e1259c782e950e3c71eaa2182be2e2 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 18:55:49 +0000 Subject: [PATCH 08/11] type def --- src/components/molecules/ButtonGroup/func.tsx | 22 ++++++++++++++++++- .../molecules/ButtonGroup/stories.tsx | 1 + 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 463c770..77f33ba 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -1,9 +1,29 @@ import type { JSX } from "react"; -import useButtonGroupClasses from "./styles"; +import type { ButtonProps } from "@fluentui/react-components"; +import type { FluentIcon } from "@fluentui/react-icons"; import { Flex } from "@components/layout"; +import useButtonGroupClasses from "@components/molecules/ButtonGroup/styles"; + +type TPropsBase = { + ariaLabel?: string; +}; + +type TPropsGlobalButtonConfig = { + size?: ButtonProps["size"]; + shape?: ButtonProps["shape"]; +}; + +type TLocalButtonConfig = { + text: string; + value?: string; + icon?: FluentIcon | JSX.Element; + iconPosition?: ButtonProps["iconPosition"]; + onClick: (value: string) => void; +}; + type TProps = { children: JSX.Element[]; ariaLabel?: string; diff --git a/src/components/molecules/ButtonGroup/stories.tsx b/src/components/molecules/ButtonGroup/stories.tsx index 92e860c..f285a69 100644 --- a/src/components/molecules/ButtonGroup/stories.tsx +++ b/src/components/molecules/ButtonGroup/stories.tsx @@ -42,6 +42,7 @@ export const ImperativeConfig: Story = { onClick={() => { setActiveOption(3); }} + disabledFocusable > Button 3 From d6964d545e7f0c4f5bc82f3ca0246ba3ed6ff516 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 19:21:57 +0000 Subject: [PATCH 09/11] better story --- src/components/molecules/ButtonGroup/func.tsx | 21 -- .../molecules/ButtonGroup/stories.tsx | 217 +++++++++++++++++- 2 files changed, 208 insertions(+), 30 deletions(-) diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 77f33ba..84dd15a 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -1,29 +1,8 @@ import type { JSX } from "react"; -import type { ButtonProps } from "@fluentui/react-components"; -import type { FluentIcon } from "@fluentui/react-icons"; - import { Flex } from "@components/layout"; - import useButtonGroupClasses from "@components/molecules/ButtonGroup/styles"; -type TPropsBase = { - ariaLabel?: string; -}; - -type TPropsGlobalButtonConfig = { - size?: ButtonProps["size"]; - shape?: ButtonProps["shape"]; -}; - -type TLocalButtonConfig = { - text: string; - value?: string; - icon?: FluentIcon | JSX.Element; - iconPosition?: ButtonProps["iconPosition"]; - onClick: (value: string) => void; -}; - type TProps = { children: JSX.Element[]; ariaLabel?: string; diff --git a/src/components/molecules/ButtonGroup/stories.tsx b/src/components/molecules/ButtonGroup/stories.tsx index f285a69..99e8aa9 100644 --- a/src/components/molecules/ButtonGroup/stories.tsx +++ b/src/components/molecules/ButtonGroup/stories.tsx @@ -2,8 +2,11 @@ import { useState } from "react"; import type { Meta, StoryObj } from "@storybook/react"; import { CalendarMonthRegular } from "@fluentui/react-icons"; +import { Button, Tooltip } from "@fluentui/react-components"; + +import { Flex } from "@components/layout"; import ButtonGroup from "@components/molecules/ButtonGroup"; -import { Button } from "@fluentui/react-components"; +import useFuiProviderNode from "@hooks/useFuiProviderNode"; const meta: Meta = { title: "Components/Molecules/ButtonGroup", @@ -15,9 +18,10 @@ export default meta; type Story = StoryObj; -export const ImperativeConfig: Story = { +export const Index: Story = { render: () => { const [activeOption, setActiveOption] = useState(1); + const { fuiProviderNode } = useFuiProviderNode(); return ( @@ -46,13 +50,19 @@ export const ImperativeConfig: Story = { > Button 3 - + + + + + + ); +}; + +export default Example; + `, + }, + }, + }, +}; + +export const Sizes: Story = { + render: () => { + return ( + + + + + + + + + + + + + + + + + + ); + }, + parameters: { + docs: { + source: { + code: ` +import { Button } from "@fluentui/react-components"; +import ButtonGroup from "@components/molecules/ButtonGroup"; +import { Flex } from "@components/layout"; + +const Example = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + +export default Example; + `, + }, + }, + }, +}; + +export const Shapes: Story = { + render: () => { + return ( + + + + + + + + + + + + + + + + + + ); + }, + parameters: { + docs: { + source: { + code: ` +import { Button } from "@fluentui/react-components"; +import ButtonGroup from "@components/molecules/ButtonGroup"; +import { Flex } from "@components/layout"; + +const Example = () => { + return ( + + + + + + + + + + + + + + + + + + ); +}; + +export default Example; + `, + }, + }, + }, }; From 62895fa7952605e15d846acb04c17d1e32829a4b Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Thu, 2 Jan 2025 19:33:19 +0000 Subject: [PATCH 10/11] good docs --- src/components/molecules/ButtonGroup/func.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 84dd15a..664056c 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -8,6 +8,28 @@ type TProps = { 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 + * + * @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", From 05a7809b53f91dceaedf5622c28cc5189fdf9244 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Fri, 3 Jan 2025 16:34:33 +0000 Subject: [PATCH 11/11] added tests, up docs --- src/components/molecules/ButtonGroup/func.tsx | 4 ++ .../molecules/ButtonGroup/tests.tsx | 55 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/molecules/ButtonGroup/tests.tsx diff --git a/src/components/molecules/ButtonGroup/func.tsx b/src/components/molecules/ButtonGroup/func.tsx index 664056c..95bca00 100644 --- a/src/components/molecules/ButtonGroup/func.tsx +++ b/src/components/molecules/ButtonGroup/func.tsx @@ -22,6 +22,10 @@ type TProps = { * - 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 diff --git a/src/components/molecules/ButtonGroup/tests.tsx b/src/components/molecules/ButtonGroup/tests.tsx new file mode 100644 index 0000000..0208cae --- /dev/null +++ b/src/components/molecules/ButtonGroup/tests.tsx @@ -0,0 +1,55 @@ +import { render, screen } from "@test-utils"; +import "@testing-library/jest-dom"; + +import { Button } from "@fluentui/react-components"; +import ButtonGroup from "@components/molecules/ButtonGroup"; + +describe("ButtonGroup", () => { + it("should render with defaults", () => { + render( + + + + , + ); + const ButtonGroupElement = screen.getByRole("group"); + expect(ButtonGroupElement).toBeInTheDocument(); + expect(ButtonGroupElement).toHaveAttribute("aria-label", "Button group"); + }); + it("should render with custom aria label", () => { + render( + + + + , + ); + const ButtonGroupElement = screen.getByRole("group"); + expect(ButtonGroupElement).toBeInTheDocument(); + expect(ButtonGroupElement).toHaveAttribute( + "aria-label", + "Custom aria label", + ); + }); + it("should render the given buttons with appropriate styles", () => { + render( + + + + + , + ); + const ButtonOne = screen.getByText("Button 1"); + expect(ButtonOne).toHaveStyle("border-radius: var(--borderRadiusMedium)"); + expect(ButtonOne).toHaveStyle("border-top-right-radius: 0"); + expect(ButtonOne).toHaveStyle("border-bottom-right-radius: 0"); + + const ButtonTwo = screen.getByText("Button 2"); + expect(ButtonTwo).toHaveStyle("border-radius: 0"); + expect(ButtonTwo).toHaveStyle("border-left: none"); + + const ButtonThree = screen.getByText("Button 3"); + expect(ButtonThree).toHaveStyle("border-radius: var(--borderRadiusMedium)"); + expect(ButtonThree).toHaveStyle("border-top-left-radius: 0"); + expect(ButtonThree).toHaveStyle("border-bottom-left-radius: 0"); + }); +});