From b0d9d75cba621daf46d9a7ea1ab50e8741f619d1 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:02:06 +0000 Subject: [PATCH 1/7] updated missing tests --- .../layout/Flex/{component.tsx => func.tsx} | 41 +++++- .../layout/Flex/hooks/useFlexBox.ts | 46 +++++-- src/components/layout/Flex/index.ts | 2 +- src/components/layout/Flex/styles/flexBox.ts | 118 +++++++++++++++--- src/components/layout/Flex/types.ts | 23 +++- 5 files changed, 198 insertions(+), 32 deletions(-) rename src/components/layout/Flex/{component.tsx => func.tsx} (81%) diff --git a/src/components/layout/Flex/component.tsx b/src/components/layout/Flex/func.tsx similarity index 81% rename from src/components/layout/Flex/component.tsx rename to src/components/layout/Flex/func.tsx index dac19ca..204b021 100644 --- a/src/components/layout/Flex/component.tsx +++ b/src/components/layout/Flex/func.tsx @@ -16,7 +16,12 @@ import { import type { TFlexDirection, - TFlexOption, + TFlexOptionContent, + TFlexOptionItems, + TFlexWrap, + TFlexGrow, + TFlexShrink, + TFlexBasis, TFlexShorthandDimensions, TFlexPosition, } from "@components/layout/Flex/types"; @@ -25,9 +30,14 @@ type TProps = { children: ReactNode; position?: TFlexPosition; direction?: TFlexDirection; - justifyContent?: TFlexOption; - alignItems?: TFlexOption; - wrap?: boolean; + justifyContent?: TFlexOptionContent; + alignItems?: TFlexOptionItems; + alignContent?: TFlexOptionContent; + alignSelf?: TFlexOptionItems; + grow?: TFlexGrow; + shrink?: TFlexShrink; + basis?: TFlexBasis; + wrap?: TFlexWrap; className?: string; gap?: TThemeSpacing; margin?: TThemeShorthandSpacing; @@ -49,8 +59,14 @@ type TProps = { * - `direction`: flex-direction property * - `justifyContent`: justify-content property * - `alignItems`: align-items property + * - `alignContent`: align-content property + * - `alignSelf`: align-self property * - `wrap`: flex-wrap property * - `gap`: gap between children, with fixed predefined values from the design system, not discriminating between horizontal and vertical gap (because there are literally the same values) + * - `grow`: shorthand for flex-grow property + * - `shrink`: shorthand for flex-shrink property + * - `basis`: shorthand for flex-basis property, only global values are supported, for specific values use className prop + * - `position`: position property, supports all global values * - `margin`: margin property, using the same values like gap, expects the shorthand notation * - `padding`: same like margin, but for padding, concrete example below * @@ -80,9 +96,14 @@ export default function Flex({ direction = "row", position = "static", justifyContent = "start", + alignContent = "start", + alignSelf = "start", alignItems = "start", wrap = false, gap = "None", + grow = false, + shrink = false, + basis = "auto", margin = ["None"], padding = ["None"], shHeight = "auto", @@ -92,7 +113,17 @@ export default function Flex({ children, ...rest }: TProps) { - const flexBoxClass = useFlexBox(justifyContent, alignItems, direction, wrap); + const flexBoxClass = useFlexBox( + justifyContent, + alignContent, + alignItems, + alignSelf, + direction, + wrap, + grow, + shrink, + basis, + ); const gapClass = useGap(gap); const marginClass = useMargin(margin); const paddingClass = usePadding(padding); diff --git a/src/components/layout/Flex/hooks/useFlexBox.ts b/src/components/layout/Flex/hooks/useFlexBox.ts index 8cebc82..4f37552 100644 --- a/src/components/layout/Flex/hooks/useFlexBox.ts +++ b/src/components/layout/Flex/hooks/useFlexBox.ts @@ -4,33 +4,65 @@ import { useFlexBoxClasses } from "@components/layout/Flex/styles"; import type { TFlexDirection, - TFlexOption, + TFlexOptionContent, + TFlexOptionItems, + TFlexShrink, + TFlexGrow, + TFlexBasis, + TFlexWrap, } from "@components/layout/Flex/types"; export default function useFlexBox( - justifyContent?: TFlexOption, - alignItems?: TFlexOption, + justifyContent?: TFlexOptionContent, + alignContent?: TFlexOptionContent, + alignItems?: TFlexOptionItems, + alignSelf?: TFlexOptionItems, direction?: TFlexDirection, - wrap?: boolean, + wrap?: TFlexWrap, + grow?: TFlexGrow, + shrink?: TFlexShrink, + basis?: TFlexBasis, ) { const classes = useFlexBoxClasses(); + const directionClass = direction ? classes[`${direction}Direction`] : undefined; + const justifyContentClass = justifyContent - ? classes[`${justifyContent}Content`] + ? classes[`${justifyContent}JustifyContent`] + : undefined; + + const alignContentClass = alignContent + ? classes[`${alignContent}AlignContent`] : undefined; + const alignItemsClass = alignItems - ? classes[`${alignItems}Items`] + ? classes[`${alignItems}AlignItems`] + : undefined; + + const alignSelfClass = alignSelf + ? classes[`${alignSelf}AlignSelf`] : undefined; - const wrapClass = wrap ? classes.wrap : classes.nowrap; + const basisClass = basis ? classes[`${basis}Basis`] : undefined; + + const growClass = grow ? classes.growOne : classes.growZero; + const shrinkClass = shrink ? classes.shrinkOne : classes.shrinkZero; + const wrapClass = wrap + ? (wrap === "reverse" && classes.wrapReverse) || classes.wrap + : classes.nowrap; return mergeClasses( classes.base, directionClass, justifyContentClass, + alignContentClass, alignItemsClass, + alignSelfClass, + growClass, + shrinkClass, + basisClass, wrapClass, ); } diff --git a/src/components/layout/Flex/index.ts b/src/components/layout/Flex/index.ts index e26aa32..b101107 100644 --- a/src/components/layout/Flex/index.ts +++ b/src/components/layout/Flex/index.ts @@ -1,3 +1,3 @@ -import Flex from "@components/layout/Flex/component"; +import Flex from "@components/layout/Flex/func"; export default Flex; diff --git a/src/components/layout/Flex/styles/flexBox.ts b/src/components/layout/Flex/styles/flexBox.ts index 272f5a3..da67e8a 100644 --- a/src/components/layout/Flex/styles/flexBox.ts +++ b/src/components/layout/Flex/styles/flexBox.ts @@ -10,49 +10,91 @@ const useFlexBoxClasses = makeStyles({ columnDirection: { flexDirection: "column", }, + rowReverseDirection: { + flexDirection: "row-reverse", + }, + columnReverseDirection: { + flexDirection: "column-reverse", + }, + // justify-content - centerContent: { + centerJustifyContent: { justifyContent: "center", }, - startContent: { + startJustifyContent: { justifyContent: "flex-start", }, - endContent: { + endJustifyContent: { justifyContent: "flex-end", }, - spaceBetweenContent: { + spaceBetweenJustifyContent: { justifyContent: "space-between", }, - spaceAroundContent: { + spaceAroundJustifyContent: { justifyContent: "space-around", }, - spaceEvenlyContent: { + spaceEvenlyJustifyContent: { justifyContent: "space-evenly", }, - stretchContent: { + stretchJustifyContent: { justifyContent: "stretch", }, + // align-items - centerItems: { + centerAlignItems: { alignItems: "center", }, - startItems: { + startAlignItems: { alignItems: "flex-start", }, - endItems: { + endAlignItems: { alignItems: "flex-end", }, - stretchItems: { + stretchAlignItems: { alignItems: "stretch", }, - spaceBetweenItems: { - alignItems: "space-between", + baselineAlignItems: { + alignItems: "baseline", + }, + + // align-self + startAlignSelf: { + alignSelf: "flex-start", + }, + endAlignSelf: { + alignSelf: "flex-end", + }, + centerAlignSelf: { + alignSelf: "center", + }, + stretchAlignSelf: { + alignSelf: "stretch", + }, + baselineAlignSelf: { + alignSelf: "baseline", + }, + + // align-content + centerAlignContent: { + alignContent: "center", + }, + startAlignContent: { + alignContent: "flex-start", + }, + endAlignContent: { + alignContent: "flex-end", + }, + stretchAlignContent: { + alignContent: "stretch", + }, + spaceBetweenAlignContent: { + alignContent: "space-between", }, - spaceAroundItems: { - alignItems: "space-around", + spaceAroundAlignContent: { + alignContent: "space-around", }, - spaceEvenlyItems: { - alignItems: "space-evenly", + spaceEvenlyAlignContent: { + alignContent: "space-evenly", }, // wrap @@ -62,6 +104,48 @@ const useFlexBoxClasses = makeStyles({ nowrap: { flexWrap: "nowrap", }, + wrapReverse: { + flexWrap: "wrap-reverse", + }, + + // grow + growOne: { + flexGrow: 1, + }, + growZero: { + flexGrow: 0, + }, + + // shrink + shrinkOne: { + flexShrink: 1, + }, + shrinkZero: { + flexShrink: 0, + }, + + // basis + autoBasis: { + flexBasis: "auto", + }, + "0Basis": { + flexBasis: 0, + }, + fillBasis: { + flexBasis: "fill", + }, + maxContentBasis: { + flexBasis: "max-content", + }, + minContentBasis: { + flexBasis: "min-content", + }, + fitContentBasis: { + flexBasis: "fit-content", + }, + contentBasis: { + flexBasis: "content", + }, }); export default useFlexBoxClasses; diff --git a/src/components/layout/Flex/types.ts b/src/components/layout/Flex/types.ts index 14334d5..ec840c5 100644 --- a/src/components/layout/Flex/types.ts +++ b/src/components/layout/Flex/types.ts @@ -1,6 +1,6 @@ export type TFlexDirection = "row" | "column"; -export type TFlexOption = +export type TFlexOptionContent = | "start" | "center" | "end" @@ -9,8 +9,27 @@ export type TFlexOption = | "spaceEvenly" | "stretch"; -export type TFlexWrap = "wrap" | "nowrap"; +export type TFlexOptionItems = + | "start" + | "center" + | "end" + | "stretch" + | "baseline"; + +export type TFlexGrow = boolean; + +export type TFlexShrink = boolean; + +export type TFlexWrap = boolean | "reverse"; +export type TFlexBasis = + | "auto" + | "fill" + | "maxContent" + | "minContent" + | "fitContent" + | "content" + | 0; export type TFlexShorthandDimensions = "25%" | "50%" | "75%" | "100%" | "auto"; export type TFlexPosition = From 1a2a4f011cbf51d69a4714d4d77af56b9a59c436 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:08:25 +0000 Subject: [PATCH 2/7] first test update done --- src/components/layout/Flex/tests.tsx | 34 ++++++++++++++-------------- src/components/layout/Flex/types.ts | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index 0be08c1..c9747f7 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/src/components/layout/Flex/tests.tsx @@ -35,6 +35,16 @@ describe("Flex", () => { const FlexElement = screen.getByText("FlexChild"); expect(FlexElement).toHaveStyle("flex-direction: row"); }); + it("should render with direction rowReverse", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-direction: row-reverse"); + }); + it("should render with direction columnReverse", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-direction: column-reverse"); + }); }); describe("for justifyContent", () => { it("should render with justifyContent center", () => { @@ -79,21 +89,6 @@ describe("Flex", () => { const FlexElement = screen.getByText("FlexChild"); expect(FlexElement).toHaveStyle("align-items: flex-end"); }); - it("should render with alignItems spaceBetween", () => { - render(FlexChild); - const FlexElement = screen.getByText("FlexChild"); - expect(FlexElement).toHaveStyle("align-items: space-between"); - }); - it("should render with alignItems spaceAround", () => { - render(FlexChild); - const FlexElement = screen.getByText("FlexChild"); - expect(FlexElement).toHaveStyle("align-items: space-around"); - }); - it("should render with alignItems spaceEvenly", () => { - render(FlexChild); - const FlexElement = screen.getByText("FlexChild"); - expect(FlexElement).toHaveStyle("align-items: space-evenly"); - }); it("should render with alignItems stretch", () => { render(FlexChild); const FlexElement = screen.getByText("FlexChild"); @@ -101,16 +96,21 @@ describe("Flex", () => { }); }); describe("for wrap", () => { - it("should render with wrap wrap", () => { + it("should render with wrap: wrap", () => { render(FlexChild); const FlexElement = screen.getByText("FlexChild"); expect(FlexElement).toHaveStyle("flex-wrap: wrap"); }); - it("should render with wrap nowrap", () => { + it("should render with wrap: nowrap", () => { render(FlexChild); const FlexElement = screen.getByText("FlexChild"); expect(FlexElement).toHaveStyle("flex-wrap: nowrap"); }); + it("should render with wrap: reverse", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-wrap: wrap-reverse"); + }); }); describe("for gap", () => { it("should render with gap None", () => { diff --git a/src/components/layout/Flex/types.ts b/src/components/layout/Flex/types.ts index ec840c5..930aeba 100644 --- a/src/components/layout/Flex/types.ts +++ b/src/components/layout/Flex/types.ts @@ -1,4 +1,4 @@ -export type TFlexDirection = "row" | "column"; +export type TFlexDirection = "row" | "column" | "rowReverse" | "columnReverse"; export type TFlexOptionContent = | "start" From a70b8a50db46efde929663ae4127165d6e8ff260 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:16:02 +0000 Subject: [PATCH 3/7] next batch --- src/components/layout/Flex/func.tsx | 8 +-- .../layout/Flex/hooks/useFlexBox.ts | 4 +- src/components/layout/Flex/tests.tsx | 64 +++++++++++++++++++ 3 files changed, 70 insertions(+), 6 deletions(-) diff --git a/src/components/layout/Flex/func.tsx b/src/components/layout/Flex/func.tsx index 204b021..b28f1a6 100644 --- a/src/components/layout/Flex/func.tsx +++ b/src/components/layout/Flex/func.tsx @@ -35,7 +35,7 @@ type TProps = { alignContent?: TFlexOptionContent; alignSelf?: TFlexOptionItems; grow?: TFlexGrow; - shrink?: TFlexShrink; + noShrink?: TFlexShrink; basis?: TFlexBasis; wrap?: TFlexWrap; className?: string; @@ -64,7 +64,7 @@ type TProps = { * - `wrap`: flex-wrap property * - `gap`: gap between children, with fixed predefined values from the design system, not discriminating between horizontal and vertical gap (because there are literally the same values) * - `grow`: shorthand for flex-grow property - * - `shrink`: shorthand for flex-shrink property + * - `noShrink`: shorthand for flex-shrink property, noShrik is the same as flex-shrink: 0 * - `basis`: shorthand for flex-basis property, only global values are supported, for specific values use className prop * - `position`: position property, supports all global values * - `margin`: margin property, using the same values like gap, expects the shorthand notation @@ -102,7 +102,7 @@ export default function Flex({ wrap = false, gap = "None", grow = false, - shrink = false, + noShrink = false, basis = "auto", margin = ["None"], padding = ["None"], @@ -121,7 +121,7 @@ export default function Flex({ direction, wrap, grow, - shrink, + noShrink, basis, ); const gapClass = useGap(gap); diff --git a/src/components/layout/Flex/hooks/useFlexBox.ts b/src/components/layout/Flex/hooks/useFlexBox.ts index 4f37552..d7b85a7 100644 --- a/src/components/layout/Flex/hooks/useFlexBox.ts +++ b/src/components/layout/Flex/hooks/useFlexBox.ts @@ -20,7 +20,7 @@ export default function useFlexBox( direction?: TFlexDirection, wrap?: TFlexWrap, grow?: TFlexGrow, - shrink?: TFlexShrink, + noShrink?: TFlexShrink, basis?: TFlexBasis, ) { const classes = useFlexBoxClasses(); @@ -48,7 +48,7 @@ export default function useFlexBox( const basisClass = basis ? classes[`${basis}Basis`] : undefined; const growClass = grow ? classes.growOne : classes.growZero; - const shrinkClass = shrink ? classes.shrinkOne : classes.shrinkZero; + const shrinkClass = noShrink ? classes.shrinkZero : classes.shrinkOne; const wrapClass = wrap ? (wrap === "reverse" && classes.wrapReverse) || classes.wrap : classes.nowrap; diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index c9747f7..8c3ad3f 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/src/components/layout/Flex/tests.tsx @@ -15,7 +15,12 @@ describe("Flex", () => { expect(FlexElement).toHaveStyle("flex-direction: row"); expect(FlexElement).toHaveStyle("justify-content: flex-start"); expect(FlexElement).toHaveStyle("align-items: flex-start"); + expect(FlexElement).toHaveStyle("align-content: flex-start"); + expect(FlexElement).toHaveStyle("align-self: flex-start"); + expect(FlexElement).toHaveStyle("flex-grow: 0"); + expect(FlexElement).toHaveStyle("flex-shrink: 1"); expect(FlexElement).toHaveStyle("flex-wrap: nowrap"); + expect(FlexElement).toHaveStyle("flex-basis: auto"); expect(FlexElement).toHaveStyle("gap: 0rem"); expect(FlexElement).toHaveStyle("margin: 0rem"); expect(FlexElement).toHaveStyle("padding: 0rem"); @@ -78,6 +83,38 @@ describe("Flex", () => { expect(FlexElement).toHaveStyle("justify-content: stretch"); }); }); + describe("for alignContent", () => { + it("should render with alignContent center", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: center"); + }); + it("should render with alignContent end", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: flex-end"); + }); + it("should render with alignContent spaceBetween", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: space-between"); + }); + it("should render with alignContent spaceAround", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: space-around"); + }); + it("should render with alignContent spaceEvenly", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: space-evenly"); + }); + it("should render with alignContent stretch", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-content: stretch"); + }); + }); describe("for alignItems", () => { it("should render with alignItems center", () => { render(FlexChild); @@ -94,6 +131,33 @@ describe("Flex", () => { const FlexElement = screen.getByText("FlexChild"); expect(FlexElement).toHaveStyle("align-items: stretch"); }); + it("should render with alignItems baseline", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-items: baseline"); + }); + }); + describe("for alignSelf", () => { + it("should render with alignSelf center", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-self: center"); + }); + it("should render with alignSelf end", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-self: flex-end"); + }); + it("should render with alignSelf stretch", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-self: stretch"); + }); + it("should render with alignSelf baseline", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("align-self: baseline"); + }); }); describe("for wrap", () => { it("should render with wrap: wrap", () => { From bff253cbf50bcbed4fb9da8d5ff73ea08d6c0042 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:18:37 +0000 Subject: [PATCH 4/7] shrink / grow --- src/components/layout/Flex/tests.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index 8c3ad3f..6ed7548 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/src/components/layout/Flex/tests.tsx @@ -233,6 +233,30 @@ describe("Flex", () => { expect(FlexElement).toHaveStyle("gap: 2rem"); }); }); + describe("for grow", () => { + it("should render with grow true", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-grow: 1"); + }); + it("should render with grow false", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-grow: 0"); + }); + }); + describe("for noShrink", () => { + it("should render with noShrink true", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-shrink: 0"); + }); + it("should render with noShrink false", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-shrink: 1"); + }); + }); describe("for margin", () => { it("should render with margin None", () => { render(FlexChild); From d2c2251bd5252b2e27bf3a9b69ae95253803af85 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:27:04 +0000 Subject: [PATCH 5/7] basis tests added --- src/components/layout/Flex/tests.tsx | 37 ++++++++++++++++++++++++++++ src/components/layout/Flex/types.ts | 2 +- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index 6ed7548..05502fd 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/src/components/layout/Flex/tests.tsx @@ -257,6 +257,43 @@ describe("Flex", () => { expect(FlexElement).toHaveStyle("flex-shrink: 1"); }); }); + describe("for basis", () => { + it("should render with basis auto", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: auto"); + }); + it("should render with basis fill", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: fill"); + }); + it("should render with basis maxContent", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: max-content"); + }); + it("should render with basis minContent", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: min-content"); + }); + it("should render with basis fitContent", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: fit-content"); + }); + it("should render with basis content", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: content"); + }); + it("should render with basis 0", () => { + render(FlexChild); + const FlexElement = screen.getByText("FlexChild"); + expect(FlexElement).toHaveStyle("flex-basis: 0"); + }); + }); describe("for margin", () => { it("should render with margin None", () => { render(FlexChild); diff --git a/src/components/layout/Flex/types.ts b/src/components/layout/Flex/types.ts index 930aeba..de4cf4c 100644 --- a/src/components/layout/Flex/types.ts +++ b/src/components/layout/Flex/types.ts @@ -29,7 +29,7 @@ export type TFlexBasis = | "minContent" | "fitContent" | "content" - | 0; + | "0"; export type TFlexShorthandDimensions = "25%" | "50%" | "75%" | "100%" | "auto"; export type TFlexPosition = From 7622ca177ad4986cad49f30160555cbe1e0d0a18 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:29:02 +0000 Subject: [PATCH 6/7] updated docs --- src/components/layout/Flex/func.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Flex/func.tsx b/src/components/layout/Flex/func.tsx index b28f1a6..dd4bdc6 100644 --- a/src/components/layout/Flex/func.tsx +++ b/src/components/layout/Flex/func.tsx @@ -90,7 +90,19 @@ type TProps = { * * * @default - * direction = "row", justifyContent = "start", alignItems = "start", wrap = false, gap = "None", margin = ["None"], padding = ["None"], shHeight = "auto", shWidth = "auto" + * direction = "row", + * justifyContent = "start", + * alignItems = "start", + * alignContent = "start", + * alignSelf = "start", + * grow = false, + * noShrink = false, + * wrap = false, + * gap = "None", + * margin = ["None"], + * padding = ["None"], + * shHeight = "auto", + * shWidth = "auto" */ export default function Flex({ direction = "row", From a3605b11c55c0c6f65421813698d42771f9ca2d2 Mon Sep 17 00:00:00 2001 From: Samuil Berenzon Date: Sat, 28 Dec 2024 18:38:15 +0000 Subject: [PATCH 7/7] fixed defaults --- src/components/layout/Flex/func.tsx | 13 +++++++------ src/components/layout/Flex/styles/flexBox.ts | 6 ++++++ src/components/layout/Flex/tests.tsx | 8 ++++---- src/components/layout/Flex/types.ts | 3 ++- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/layout/Flex/func.tsx b/src/components/layout/Flex/func.tsx index dd4bdc6..e68592e 100644 --- a/src/components/layout/Flex/func.tsx +++ b/src/components/layout/Flex/func.tsx @@ -91,10 +91,11 @@ type TProps = { * * @default * direction = "row", + * position = "static", * justifyContent = "start", - * alignItems = "start", - * alignContent = "start", - * alignSelf = "start", + * alignItems = "stretch", + * alignContent = "stretch", + * alignSelf = "auto", * grow = false, * noShrink = false, * wrap = false, @@ -108,9 +109,9 @@ export default function Flex({ direction = "row", position = "static", justifyContent = "start", - alignContent = "start", - alignSelf = "start", - alignItems = "start", + alignContent = "stretch", + alignItems = "stretch", + alignSelf = "auto", wrap = false, gap = "None", grow = false, diff --git a/src/components/layout/Flex/styles/flexBox.ts b/src/components/layout/Flex/styles/flexBox.ts index da67e8a..bae5fb7 100644 --- a/src/components/layout/Flex/styles/flexBox.ts +++ b/src/components/layout/Flex/styles/flexBox.ts @@ -41,6 +41,9 @@ const useFlexBoxClasses = makeStyles({ }, // align-items + autoAlignItems: { + alignItems: "auto", + }, centerAlignItems: { alignItems: "center", }, @@ -58,6 +61,9 @@ const useFlexBoxClasses = makeStyles({ }, // align-self + autoAlignSelf: { + alignSelf: "auto", + }, startAlignSelf: { alignSelf: "flex-start", }, diff --git a/src/components/layout/Flex/tests.tsx b/src/components/layout/Flex/tests.tsx index 05502fd..74a288f 100644 --- a/src/components/layout/Flex/tests.tsx +++ b/src/components/layout/Flex/tests.tsx @@ -8,15 +8,15 @@ describe("Flex", () => { it("should render without required props default config", () => { render(FlexChild); const FlexElement = screen.getByText("FlexChild"); - expect(FlexElement).toBeInTheDocument(); + expect(FlexElement).toHaveTextContent("FlexChild"); expect(FlexElement).toHaveStyle("display: flex"); expect(FlexElement).toHaveStyle("flex-direction: row"); expect(FlexElement).toHaveStyle("justify-content: flex-start"); - expect(FlexElement).toHaveStyle("align-items: flex-start"); - expect(FlexElement).toHaveStyle("align-content: flex-start"); - expect(FlexElement).toHaveStyle("align-self: flex-start"); + expect(FlexElement).toHaveStyle("align-items: stretch"); + expect(FlexElement).toHaveStyle("align-content: stretch"); + expect(FlexElement).toHaveStyle("align-self: auto"); expect(FlexElement).toHaveStyle("flex-grow: 0"); expect(FlexElement).toHaveStyle("flex-shrink: 1"); expect(FlexElement).toHaveStyle("flex-wrap: nowrap"); diff --git a/src/components/layout/Flex/types.ts b/src/components/layout/Flex/types.ts index de4cf4c..a5843bf 100644 --- a/src/components/layout/Flex/types.ts +++ b/src/components/layout/Flex/types.ts @@ -14,7 +14,8 @@ export type TFlexOptionItems = | "center" | "end" | "stretch" - | "baseline"; + | "baseline" + | "auto"; export type TFlexGrow = boolean;