From 2a225e03257461cbd5f6c138a849d50967313007 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 26 Feb 2025 12:57:57 +0100 Subject: [PATCH 1/8] Flex types changed to remove core spacing values + documentation prepared for the new structure --- apps/website/pages/components/flex/code.tsx | 19 +++++++++++++++++ apps/website/pages/components/flex/index.tsx | 4 ++-- .../pages/components/flex/specifications.tsx | 21 ------------------- apps/website/pages/components/flex/usage.tsx | 21 ------------------- .../components/flex/FlexPageLayout.tsx | 7 +++---- .../components/flex/code/FlexCodePage.tsx | 6 ++---- .../FlexOverviewPage.tsx} | 10 ++++----- packages/lib/src/flex/types.ts | 8 ++----- 8 files changed, 33 insertions(+), 63 deletions(-) create mode 100644 apps/website/pages/components/flex/code.tsx delete mode 100644 apps/website/pages/components/flex/specifications.tsx delete mode 100644 apps/website/pages/components/flex/usage.tsx rename apps/website/screens/components/flex/{usage/FlexUsagePage.tsx => overview/FlexOverviewPage.tsx} (93%) diff --git a/apps/website/pages/components/flex/code.tsx b/apps/website/pages/components/flex/code.tsx new file mode 100644 index 0000000000..22d9b25298 --- /dev/null +++ b/apps/website/pages/components/flex/code.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import FlexPageLayout from "screens/components/flex/FlexPageLayout"; +import FlexCodePage from "screens/components/flex/code/FlexCodePage"; + +const Usage = () => { + return ( + <> + + Flex Code — Halstack Design System + + + + ); +}; + +Usage.getLayout = (page: ReactElement) => {page}; + +export default Usage; diff --git a/apps/website/pages/components/flex/index.tsx b/apps/website/pages/components/flex/index.tsx index 195c121dca..e612cfe757 100644 --- a/apps/website/pages/components/flex/index.tsx +++ b/apps/website/pages/components/flex/index.tsx @@ -1,7 +1,7 @@ import Head from "next/head"; import type { ReactElement } from "react"; import FlexPageLayout from "screens/components/flex/FlexPageLayout"; -import FlexCodePage from "screens/components/flex/code/FlexCodePage"; +import FlexOverviewPage from "screens/components/flex/overview/FlexOverviewPage"; const Index = () => { return ( @@ -9,7 +9,7 @@ const Index = () => { Flex — Halstack Design System - + ); }; diff --git a/apps/website/pages/components/flex/specifications.tsx b/apps/website/pages/components/flex/specifications.tsx deleted file mode 100644 index acbecff168..0000000000 --- a/apps/website/pages/components/flex/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import FlexPageLayout from "screens/components/flex/FlexPageLayout"; -import FlexSpecsPage from "screens/components/flex/specs/FlexSpecsPage"; - -const Specifications = () => { - return ( - <> - - Flex Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/flex/usage.tsx b/apps/website/pages/components/flex/usage.tsx deleted file mode 100644 index 8ec4fa12b5..0000000000 --- a/apps/website/pages/components/flex/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import FlexPageLayout from "screens/components/flex/FlexPageLayout"; -import FlexUsagePage from "screens/components/flex/usage/FlexUsagePage"; - -const Usage = () => { - return ( - <> - - Flex Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/flex/FlexPageLayout.tsx b/apps/website/screens/components/flex/FlexPageLayout.tsx index 2e5741901a..71f55d48bb 100644 --- a/apps/website/screens/components/flex/FlexPageLayout.tsx +++ b/apps/website/screens/components/flex/FlexPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const FlexPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/flex" }, - { label: "Usage", path: "/components/flex/usage" }, - { label: "Specifications", path: "/components/flex/specifications" }, + { label: "Overview", path: "/components/flex" }, + { label: "Code", path: "/components/flex/code" }, ]; return ( @@ -27,7 +26,7 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => { based layouts. It serves as a technical component that abstracts users from working directly with CSS Flexbox and helps them write more semantic layouts. - + {children} diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index c01ed70722..ec5344f347 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -9,8 +9,6 @@ import gapOrderGrow from "./examples/gapOrderGrow"; import TableCode from "@/common/TableCode"; import StatusBadge from "@/common/StatusBadge"; -const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`; - const sections = [ { title: "Props", @@ -130,14 +128,14 @@ const sections = [ gap - {coreSpacingTokensTypeString} | Gap + string | Gap Sets gap CSS property. See{" "} MDN {" "} - for further information. It can be either a value from the range or an object with the following properties: + for further information. It can be either a value or an object with the following properties:
  • rowGap: gutter between rows. diff --git a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx similarity index 93% rename from apps/website/screens/components/flex/usage/FlexUsagePage.tsx rename to apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index 45f4de8540..02b804e8c5 100644 --- a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -20,8 +20,8 @@ const sections = [ In the sections that follow, we'll explore the core concepts and best practices for using the Flex component. - By understanding these principles, you can optimize the layout of your application, enhance the user experience, - and create more engaging and visually appealing interfaces. + By understanding these principles, you can optimize the layout of your application, enhance the user + experience, and create more engaging and visually appealing interfaces. ), @@ -90,15 +90,15 @@ const sections = [ }, ]; -const FlexUsagePage = () => { +const FlexOverviewPage = () => { return ( - + ); }; -export default FlexUsagePage; +export default FlexOverviewPage; diff --git a/packages/lib/src/flex/types.ts b/packages/lib/src/flex/types.ts index e125840f10..e7c28dfcb6 100644 --- a/packages/lib/src/flex/types.ts +++ b/packages/lib/src/flex/types.ts @@ -1,10 +1,6 @@ import { ReactNode } from "react"; -import { CoreSpacingTokensType } from "../common/coreTokens"; -type Gap = - | { rowGap: CoreSpacingTokensType; columnGap?: CoreSpacingTokensType } - | { rowGap?: CoreSpacingTokensType; columnGap: CoreSpacingTokensType } - | CoreSpacingTokensType; +type Gap = { rowGap: string; columnGap?: string } | { rowGap?: string; columnGap: string } | string; type CommonProps = { /** @@ -120,7 +116,7 @@ type Props = CommonProps & { export type StyledProps = CommonProps & { $direction?: "row" | "row-reverse" | "column" | "column-reverse"; $wrap?: "nowrap" | "wrap" | "wrap-reverse"; - $gap?: CoreSpacingTokensType | Gap; + $gap?: Gap; $order?: number; $grow?: number; $shrink?: number; From 708372ebbde0c424f8600d309a5fd377c63cb2fc Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 10 Mar 2025 13:52:11 +0100 Subject: [PATCH 2/8] improvements based on feedback --- apps/website/pages/components/flex/code.tsx | 18 ++++++++---------- apps/website/pages/components/flex/index.tsx | 2 +- .../components/flex/code/FlexCodePage.tsx | 16 +++++++--------- .../flex/overview/FlexOverviewPage.tsx | 4 ++-- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/apps/website/pages/components/flex/code.tsx b/apps/website/pages/components/flex/code.tsx index 22d9b25298..8a024ba70a 100644 --- a/apps/website/pages/components/flex/code.tsx +++ b/apps/website/pages/components/flex/code.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import FlexPageLayout from "screens/components/flex/FlexPageLayout"; import FlexCodePage from "screens/components/flex/code/FlexCodePage"; -const Usage = () => { - return ( - <> - - Flex Code — Halstack Design System - - - - ); -}; +const Usage = () => ( + <> + + Flex Code — Halstack Design System + + + +); Usage.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/flex/index.tsx b/apps/website/pages/components/flex/index.tsx index e612cfe757..6825d60f04 100644 --- a/apps/website/pages/components/flex/index.tsx +++ b/apps/website/pages/components/flex/index.tsx @@ -9,7 +9,7 @@ const Index = () => { Flex — Halstack Design System - + ); }; diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index ec5344f347..1f362275c7 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -6,9 +6,14 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import directionAlignment from "./examples/directionAlignment"; import gapOrderGrow from "./examples/gapOrderGrow"; -import TableCode from "@/common/TableCode"; +import TableCode, { ExtendedTableCode } from "@/common/TableCode"; import StatusBadge from "@/common/StatusBadge"; +const gapTypeString = `{ + rowGap: string; + columnGap: string +}`; + const sections = [ { title: "Props", @@ -136,14 +141,7 @@ const sections = [ MDN {" "} for further information. It can be either a value or an object with the following properties: -
      -
    • - rowGap: gutter between rows. -
      • -
    • - columnGap: gutter between columns. -
      • -
    + {gapTypeString} - diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index 02b804e8c5..ff4f6f17e9 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -6,7 +6,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; const sections = [ { - title: "Overview", + title: "Introduction", content: ( <> @@ -94,7 +94,7 @@ const FlexOverviewPage = () => { return ( - + From 683a8627e87c3ee0639e020ee4040d8e8430f219 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 26 Mar 2025 12:51:38 +0100 Subject: [PATCH 3/8] Flex doc updates --- apps/website/pages/components/flex/code.tsx | 8 +- apps/website/pages/components/flex/index.tsx | 22 +- .../components/flex/FlexPageLayout.tsx | 14 +- .../components/flex/code/FlexCodePage.tsx | 253 +++++++++--------- .../flex/overview/FlexOverviewPage.tsx | 93 ++----- 5 files changed, 170 insertions(+), 220 deletions(-) diff --git a/apps/website/pages/components/flex/code.tsx b/apps/website/pages/components/flex/code.tsx index 8a024ba70a..b052690f9a 100644 --- a/apps/website/pages/components/flex/code.tsx +++ b/apps/website/pages/components/flex/code.tsx @@ -3,15 +3,15 @@ import type { ReactElement } from "react"; import FlexPageLayout from "screens/components/flex/FlexPageLayout"; import FlexCodePage from "screens/components/flex/code/FlexCodePage"; -const Usage = () => ( +const Code = () => ( <> - Flex Code — Halstack Design System + Flex code — Halstack Design System ); -Usage.getLayout = (page: ReactElement) => {page}; +Code.getLayout = (page: ReactElement) => {page}; -export default Usage; +export default Code; diff --git a/apps/website/pages/components/flex/index.tsx b/apps/website/pages/components/flex/index.tsx index 6825d60f04..4a71cad6bb 100644 --- a/apps/website/pages/components/flex/index.tsx +++ b/apps/website/pages/components/flex/index.tsx @@ -3,19 +3,15 @@ import type { ReactElement } from "react"; import FlexPageLayout from "screens/components/flex/FlexPageLayout"; import FlexOverviewPage from "screens/components/flex/overview/FlexOverviewPage"; -const Index = () => { - return ( - <> - - Flex — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Flex — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/screens/components/flex/FlexPageLayout.tsx b/apps/website/screens/components/flex/FlexPageLayout.tsx index 71f55d48bb..d3a5cb052b 100644 --- a/apps/website/screens/components/flex/FlexPageLayout.tsx +++ b/apps/website/screens/components/flex/FlexPageLayout.tsx @@ -1,4 +1,4 @@ -import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react"; +import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; import PageHeading from "@/common/PageHeading"; import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; @@ -16,15 +16,9 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => { - Flex allows users to build{" "} - - Flexible Box Module - {" "} - based layouts. It serves as a technical component that abstracts users from working directly with CSS - Flexbox and helps them write more semantic layouts. + The flex component allows users to build flexible box module based layouts. It serves as a technical + component that abstracts users from working directly with CSS flexible box layout and helps them write more + semantic layouts. diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index 1f362275c7..87412c3e5b 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -26,6 +26,99 @@ const sections = [ Default + + alignContent + + + 'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | + 'stretch' + + + + Sets align-content CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'normal' + + + + alignItems + + + 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | + 'baseline' | 'normal' + + + + Sets align-items CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'normal' + + + + alignSelf + + 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' + + + Sets align-self CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + as + + keyof HTMLElementTagNameMap + + Sets a custom HTML tag. + + 'div' + + + + basis + + string + + + Sets flex-basis CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + + + + children + + + + React.ReactNode + + Custom content inside the flex container. + - + direction 'row' | 'row-reverse' | 'column' | 'column-reverse' @@ -41,107 +134,21 @@ const sections = [ 'row' - - justifyContent - - - 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' | - 'space-around' | 'space-evenly' - - - - Sets justify-content CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'normal' - - - - alignItems - - - 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | - 'baseline' | 'normal' - - - - Sets align-items CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'normal' - - - - alignContent - - - 'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | - 'stretch' - - - - Sets align-content CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'normal' - - - - alignSelf - - 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' - - - Sets align-self CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'auto' - - - - wrap - - 'nowrap' | 'wrap' | 'wrap-reverse' - - - Sets flex-wrap CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'nowrap' - - gap string | Gap +

    + being Gap an object with the following properties: +

    + {gapTypeString} Sets gap CSS property. See{" "} MDN {" "} - for further information. It can be either a value or an object with the following properties: - {gapTypeString} + for further information. - @@ -162,19 +169,22 @@ const sections = [ - shrink + justifyContent - number + + 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' | + 'space-around' | 'space-evenly' + - Sets flex-shrink CSS property. See{" "} - + Sets justify-content CSS property. See{" "} + MDN {" "} for further information. - 1 + 'normal' @@ -194,43 +204,36 @@ const sections = [ - basis + shrink - string + number - Sets flex-basis CSS property. See{" "} - + Sets flex-shrink CSS property. See{" "} + MDN {" "} for further information. - 'auto' + 1 - as + wrap - keyof HTMLElementTagNameMap + 'nowrap' | 'wrap' | 'wrap-reverse' - Sets a custom HTML tag. - 'div' - - - - - - - children - + Sets flex-wrap CSS property. See{" "} + + MDN + {" "} + for further information. - React.ReactNode + 'nowrap' - Custom content inside the flex container. - - ), @@ -250,15 +253,13 @@ const sections = [ }, ]; -const FlexCodePage = () => { - return ( - - - - - - - ); -}; +const FlexCodePage = () => ( + + + + + + +); export default FlexCodePage; diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index ff4f6f17e9..e787e6b140 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -1,5 +1,4 @@ -import { DxcFlex, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; +import { DxcFlex, DxcParagraph, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; @@ -10,95 +9,55 @@ const sections = [ content: ( <> - The Flex component is designed to provide a more efficient way to organize, align, and distribute space among + The flex component is designed to provide a more efficient way to organize, align, and distribute space among items within a container, even when their size is unknown or dynamic (hence the term 'flex'). - By leveraging the capabilities of the Flex component, developers can create more flexible and responsive + By leveraging the capabilities of the flex component, developers can create more flexible and responsive layouts that adapt to different screen sizes and device types. This powerful tool enables the creation of complex structures that can be easily adjusted to accommodate various content types and user interactions. - - In the sections that follow, we'll explore the core concepts and best practices for using the Flex component. - By understanding these principles, you can optimize the layout of your application, enhance the user - experience, and create more engaging and visually appealing interfaces. - - - ), - }, - { - title: "Axes", - content: ( - <> - - Flexboxes are comprised mainly of two axes: the main axis and the cross axis. The main axis is defined by the - flex-direction property, and the cross axis runs perpendicular to it. - - - - The main axis is defined by flex-direction, which has four possible values: row,{" "} - row-reverse, column and column-reverse. - - - The cross axis runs perpendicular to the main axis. - - - If the flex-direction (main axis) is set to row or row-reverse the cross axis - runs down the columns. - - - If the flex-direction is set to column or column-reverse, the cross axis runs - down the rows. - - - - ), }, { - title: "Start and end", + title: "The flexible box layout module", content: ( <> - The flexbox makes no assumption about the writing mode of the document. Left to right or right to left can be - used depending, for example, on the language used. A start and end edge is used to refer to the direction of - the placement of elements. + The flexible box layout module (usually referred to as flexbox) is a CSS layout model that + provides a more efficient way to organize, align, and distribute space among items within a container, even + when their size is unknown or dynamic. - For example, If the flex-direction is row and the language is English, then the start edge of the main axis - will be on the left, the end edge on the right. + Below, we share a series of links that we consider essential to understand and use the flexbox model + correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review + them: - - ), - }, - { - title: "Flexbox container", - content: ( - <> - An area of a document laid out using flexbox is called a flex container. - The items display in a row (the flex-direction property's default is row). + + MDN web docs: CSS flexible box layout + + + + + Google web.dev: Flexbox + - The items start from the start edge of the main axis. - The items do not stretch on the main dimension, but can shrink. - The items will stretch to fill the size of the cross axis. ), }, ]; -const FlexOverviewPage = () => { - return ( - - - - - - - ); -}; +const FlexOverviewPage = () => ( + + + + + + +); export default FlexOverviewPage; From 96d754e4ca6b0c12555aa4a6d6c8d3bdc494f52d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 26 Mar 2025 12:54:28 +0100 Subject: [PATCH 4/8] Doc fixes --- .../components/flex/code/FlexCodePage.tsx | 236 +++++++++--------- 1 file changed, 119 insertions(+), 117 deletions(-) diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index 87412c3e5b..a9539e54a0 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -25,7 +25,7 @@ const sections = [ Description Default - + alignContent @@ -119,122 +119,124 @@ const sections = [ Custom content inside the flex container. - - direction - - 'row' | 'row-reverse' | 'column' | 'column-reverse' - - - Sets flex-direction CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'row' - - - - gap - - string | Gap -

    - being Gap an object with the following properties: -

    - {gapTypeString} - - - Sets gap CSS property. See{" "} - - MDN - {" "} - for further information. - - - - - - grow - - number - - - Sets flex-grow CSS property. See{" "} - - MDN - {" "} - for further information. - - - 0 - - - - justifyContent - - - 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' | - 'space-around' | 'space-evenly' - - - - Sets justify-content CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'normal' - - - - order - - number - - - Sets order CSS property. See{" "} - - MDN - {" "} - for further information. - - - 0 - - - - shrink - - number - - - Sets flex-shrink CSS property. See{" "} - - MDN - {" "} - for further information. - - - 1 - - - - wrap - - 'nowrap' | 'wrap' | 'wrap-reverse' - - - Sets flex-wrap CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'nowrap' - - + + direction + + 'row' | 'row-reverse' | 'column' | 'column-reverse' + + + Sets flex-direction CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'row' + + + + gap + + string | Gap +

    + being Gap an object with the following properties: +

    + {gapTypeString} + + + Sets gap CSS property. See{" "} + + MDN + {" "} + for further information. + + - + + + grow + + number + + + Sets flex-grow CSS property. See{" "} + + MDN + {" "} + for further information. + + + 0 + + + + justifyContent + + + 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' | + 'space-around' | 'space-evenly' + + + + Sets justify-content CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'normal' + + + + order + + number + + + Sets order CSS property. See{" "} + + MDN + {" "} + for further information. + + + 0 + + + + shrink + + number + + + Sets flex-shrink CSS property. See{" "} + + MDN + {" "} + for further information. + + + 1 + + + + wrap + + 'nowrap' | 'wrap' | 'wrap-reverse' + + + Sets flex-wrap CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'nowrap' + + + ), }, From 077a54c8aef16e1b1e116fbbf3f50bea6cbe5572 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 26 Mar 2025 14:48:12 +0100 Subject: [PATCH 5/8] Minor fix for consistently listing the links --- .../screens/components/flex/overview/FlexOverviewPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index e787e6b140..9e4e4b7608 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -30,9 +30,8 @@ const sections = [ when their size is unknown or dynamic.     - Below, we share a series of links that we consider essential to understand and use the flexbox model - correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review - them: + Below, we share a series of essential links to help you understand and use the container component correctly. + If you are not acquainted with these concepts, we strongly recommend taking a moment to review them: From 3d92129c5b43801af9ed3f4e67b4410dc7a4ef01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 26 Mar 2025 15:00:37 +0100 Subject: [PATCH 6/8] Updates based on feedback --- .../components/flex/overview/FlexOverviewPage.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index 9e4e4b7608..e3505dd108 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -9,13 +9,14 @@ const sections = [ content: ( <> - The flex component is designed to provide a more efficient way to organize, align, and distribute space among - items within a container, even when their size is unknown or dynamic (hence the term 'flex'). + The flex component simplifies the creation of flexible and responsive layouts by abstracting the complexity of + CSS flexbox. Instead of manually handling flex properties, developers can use this component to build + structured and adaptable designs with improved readability and maintainability. - By leveraging the capabilities of the flex component, developers can create more flexible and responsive - layouts that adapt to different screen sizes and device types. This powerful tool enables the creation of - complex structures that can be easily adjusted to accommodate various content types and user interactions. + By leveraging flex, layouts can automatically adjust to different screen sizes and content variations, + ensuring a more seamless user experience. This documentation covers its functionality, best practices, and key + concepts to help you use it effectively. ), @@ -30,8 +31,8 @@ const sections = [ when their size is unknown or dynamic. - Below, we share a series of essential links to help you understand and use the container component correctly. - If you are not acquainted with these concepts, we strongly recommend taking a moment to review them: + Below, we share a series of essential links to help you understand and use the flex component correctly. If + you are not acquainted with these concepts, we strongly recommend taking a moment to review them: From f953c1c3f6f6bf978baa65f19ccc6d62d443e8b2 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 26 Mar 2025 15:16:35 +0100 Subject: [PATCH 7/8] More seamless typo --- .../screens/components/flex/overview/FlexOverviewPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index e3505dd108..0a69d00cf9 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -15,7 +15,7 @@ const sections = [ By leveraging flex, layouts can automatically adjust to different screen sizes and content variations, - ensuring a more seamless user experience. This documentation covers its functionality, best practices, and key + ensuring a seamless user experience. This documentation covers its functionality, best practices, and key concepts to help you use it effectively. From 69781a7da398f14a8aba88337423390238beb82e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 26 Mar 2025 16:32:20 +0100 Subject: [PATCH 8/8] Flex doc updates --- .../flex/overview/FlexOverviewPage.tsx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index e3505dd108..182b113237 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -2,6 +2,8 @@ import { DxcFlex, DxcParagraph, DxcBulletedList, DxcLink } from "@dxc-technology import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Code from "@/common/Code"; +import Link from "next/link"; const sections = [ { @@ -49,6 +51,45 @@ const sections = [ ), }, + { + title: "Best practices", + content: ( + + + Use flex for responsive layouts: use the flex component to create layouts that adapt to + different screen sizes and content variations. + + + Prioritize fluidity over fixed sizes: avoid using fixed widths or heights when possible, as + they can lead to layout issues on different devices. Instead, leverage flex properties like grow, + shrink, and basis to create scalable designs. + + + Ensure consistency with design tokens: whenever possible, use the design tokens provided by + the Halstack Design System to maintain visual and functional consistency across applications, even though the + component allows custom values. + + + Leverage alignment and justification: use justifyContent and{" "} + alignItems strategically to control content positioning within the flex container, ensuring a + well-structured and visually balanced layout. + + + Optimize nested flex containers: while nesting flex containers is sometimes necessary, + excessive nesting can reduce readability and maintainability. Consider alternative layout strategies when + appropriate. + + + Combine with other layout techniques: flexbox is powerful but not always the best tool for + every scenario. Consider using the{" "} + + grid + {" "} + component for complex two-dimensional layouts or stacked components for simpler structures. + + + ), + }, ]; const FlexOverviewPage = () => (