diff --git a/apps/website/pages/components/grid/code.tsx b/apps/website/pages/components/grid/code.tsx new file mode 100644 index 0000000000..5f61370cc9 --- /dev/null +++ b/apps/website/pages/components/grid/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import GridPageLayout from "screens/components/grid/GridPageLayout"; +import GridCodePage from "screens/components/grid/code/GridCodePage"; + +const Code = () => ( + <> + + Grid code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/grid/index.tsx b/apps/website/pages/components/grid/index.tsx index fc9af43e80..f665d13caa 100644 --- a/apps/website/pages/components/grid/index.tsx +++ b/apps/website/pages/components/grid/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import GridPageLayout from "screens/components/grid/GridPageLayout"; -import GridCodePage from "screens/components/grid/code/GridCodePage"; +import GridOverviewPage from "screens/components/grid/overview/GridOverviewPage"; -const Index = () => { - return ( - <> - - Grid — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Grid — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/grid/specifications.tsx b/apps/website/pages/components/grid/specifications.tsx deleted file mode 100644 index 1ae2513acb..0000000000 --- a/apps/website/pages/components/grid/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import GridPageLayout from "screens/components/grid/GridPageLayout"; -import GridSpecsPage from "screens/components/grid/specs/GridSpecsPage"; - -const Specifications = () => { - return ( - <> - - Grid Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/grid/usage.tsx b/apps/website/pages/components/grid/usage.tsx deleted file mode 100644 index 9d14b142a0..0000000000 --- a/apps/website/pages/components/grid/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import GridPageLayout from "screens/components/grid/GridPageLayout"; -import GridUsagePage from "screens/components/grid/usage/GridUsagePage"; - -const Usage = () => { - return ( - <> - - Grid Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx index 1a7e1f3f82..39b72437e7 100644 --- a/apps/website/screens/common/QuickNavContainer.tsx +++ b/apps/website/screens/common/QuickNavContainer.tsx @@ -31,7 +31,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => { const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => ( - + {sections.map((section) => (
{ - + diff --git a/apps/website/screens/components/flex/FlexPageLayout.tsx b/apps/website/screens/components/flex/FlexPageLayout.tsx index d3a5cb052b..115d1feb3b 100644 --- a/apps/website/screens/components/flex/FlexPageLayout.tsx +++ b/apps/website/screens/components/flex/FlexPageLayout.tsx @@ -16,9 +16,9 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => { - 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. + The flex component allows building 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 a9539e54a0..88bf1a8e9b 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -10,8 +10,8 @@ import TableCode, { ExtendedTableCode } from "@/common/TableCode"; import StatusBadge from "@/common/StatusBadge"; const gapTypeString = `{ - rowGap: string; - columnGap: string + columnGap: string; + rowGap: string; }`; const sections = [ @@ -19,12 +19,14 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - + + + Name + Type + Description + Default + + alignContent diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx index be0fb0d1eb..a22788098f 100644 --- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx +++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx @@ -24,7 +24,7 @@ const sections = [ ), }, { - title: "The flexible box layout module", + title: "The flexible box layout", content: ( <> diff --git a/apps/website/screens/components/grid/GridPageLayout.tsx b/apps/website/screens/components/grid/GridPageLayout.tsx index 5e9f243492..3733d96a3c 100644 --- a/apps/website/screens/components/grid/GridPageLayout.tsx +++ b/apps/website/screens/components/grid/GridPageLayout.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"; @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const GridPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/grid" }, - { label: "Usage", path: "/components/grid/usage" }, - { label: "Specifications", path: "/components/grid/specifications" }, + { label: "Overview", path: "/components/grid" }, + { label: "Code", path: "/components/grid/code" }, ]; return ( @@ -17,14 +16,11 @@ const GridPageHeading = ({ children }: { children: ReactNode }) => { - Grid allows users to build applications based on{" "} - - CSS Grid Layout - - . It is a technical component that abstracts users from working directly with CSS Grid properties and allows - them to write more consistent and semantic layouts. + The grid component allows building applications based on the CSS grid layout module. It is a technical + component that abstracts users from working directly with grid properties and allows them to write more + consistent and semantic layouts. - + {children} diff --git a/apps/website/screens/components/grid/code/GridCodePage.tsx b/apps/website/screens/components/grid/code/GridCodePage.tsx index 962ff77387..6a013cbd07 100644 --- a/apps/website/screens/components/grid/code/GridCodePage.tsx +++ b/apps/website/screens/components/grid/code/GridCodePage.tsx @@ -6,210 +6,224 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import Example from "@/common/example/Example"; import basic from "./examples/basic"; import layout from "./examples/layout"; -import TableCode from "@/common/TableCode"; +import TableCode, { ExtendedTableCode } 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 gapTypeString = `{ + columnGap: string; + rowGap: string; +}`; const sections = [ { title: "Props", content: ( - - Name - Type - Description - Default - - - autoColumns - - string - - - Sets the grid-auto-columns CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'auto' - - - - autoFlow - - 'row' | 'column' | 'row dense' | 'column dense' - - - Sets the grid-auto-flow CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'row' - - - - autoRows - - string - - - Sets the grid-auto-rows CSS property. See{" "} - - MDN - {" "} - for further information. - - - 'auto' - - - - gap - - {coreSpacingTokensTypeString} | Gap - - - Sets the gap CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following properties: -
    -
  • - rowGap: gutter between rows. -
    • -
  • - columnGap: gutter between columns. -
    • -
- - - '0rem' - - - - placeContent - - - 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly' | - 'baseline' | PlaceContent - - - - Sets the place-content CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following properties: -
    -
  • - justifyContent: aligns the grid along the inline (row) axis. -
    • -
  • - alignContent: aligns the grid along the block (column) axis. -
    • -
- - - 'normal' - - - - placeItems - - 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceItems - - - Sets the place-items CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following properties: -
    -
  • - justifyItems: aligns grid items along the inline (row) axis. -
    • -
  • - alignItems: aligns grid items along the block (column) axis. -
    • -
- - - 'normal' - - - - templateAreas - - string[] - - - Sets the grid-template-areas CSS property. See{" "} - - MDN - {" "} - for further information. - - - - - - templateColumns - - string[] - - - Sets the grid-template-columns CSS property. See{" "} - - MDN - {" "} - for further information. - - - - - - templateRows - - string[] - - - Sets the grid-template-rows CSS property. See{" "} - - MDN - {" "} - for further information. - - - - - - as - - keyof HTMLElementTagNameMap - - Sets a custom HTML tag. - - 'div' - - - - - - - children - - - - React.ReactNode - - Custom content inside the grid container. - - - + + + Name + Type + Description + Default + + + + + as + + keyof HTMLElementTagNameMap + + Sets a custom HTML tag. + + 'div' + + + + autoColumns + + string + + + Sets the grid-auto-columns CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + autoFlow + + 'row' | 'column' | 'row dense' | 'column dense' + + + Sets the grid-auto-flow CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'row' + + + + autoRows + + string + + + Sets the grid-auto-rows CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + + + + children + + + + React.ReactNode + + Custom content inside the grid container. + - + + + gap + + Gap +

+ being Message an object with the following properties: +

+ {gapTypeString} + + + Sets the gap CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + rowGap: gutter between rows. +
    • +
  • + columnGap: gutter between columns. +
    • +
+ + + '0rem' + + + + placeContent + + + 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly' | + 'baseline' | PlaceContent + + + + Sets the place-content CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + justifyContent: aligns the grid along the inline (row) axis. +
    • +
  • + alignContent: aligns the grid along the block (column) axis. +
    • +
+ + + 'normal' + + + + placeItems + + 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceItems + + + Sets the place-items CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + justifyItems: aligns grid items along the inline (row) axis. +
    • +
  • + alignItems: aligns grid items along the block (column) axis. +
    • +
+ + + 'normal' + + + + templateAreas + + string[] + + + Sets the grid-template-areas CSS property. See{" "} + + MDN + {" "} + for further information. + + - + + + templateColumns + + string[] + + + Sets the grid-template-columns CSS property. See{" "} + + MDN + {" "} + for further information. + + - + + + templateRows + + string[] + + + Sets the grid-template-rows CSS property. See{" "} + + MDN + {" "} + for further information. + + - + + ), }, @@ -234,117 +248,121 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - areaName - - string - - - Sets the name of an item so that it can be referenced by a template created with the{" "} - grid-template-areas property. - - - - - - column - - number | string | GridCell - - - Sets the grid-column CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following - properties: -
    -
  • - start: starting position within the grid column. -
    • -
  • - end: ending position within the grid column. -
    • -
- - - - - - row - - number | string | GridCell - - - Sets the grid-row CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following - properties: -
    -
  • - start: starting position within the grid row. -
    • -
  • - end: ending position within the grid row. -
    • -
- - - - - - placeSelf - - 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceSelf - - - Sets the place-self CSS property. See{" "} - - MDN - {" "} - for further information. It can be either a value from the range or an object with the following - properties: -
    -
  • - justifySelf: aligns a grid item inside a cell along the inline (row) axis. -
    • -
  • - alignSelf: aligns a grid item inside a cell along the block (column) axis. -
    • -
- - - 'auto' - - - - as - - keyof HTMLElementTagNameMap - - Sets a custom HTML tag. - - 'div' - - - - - - - children - - - - React.ReactNode - - Custom content inside the grid item container. - - - + + + Name + Type + Description + Default + + + + + areaName + + string + + + Sets the name of an item so that it can be referenced by a template created with the{" "} + grid-template-areas property. + + - + + + as + + keyof HTMLElementTagNameMap + + Sets a custom HTML tag. + + 'div' + + + + + + + children + + + + React.ReactNode + + Custom content inside the grid item container. + - + + + column + + number | string | GridCell + + + Sets the grid-column CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + start: starting position within the grid column. +
    • +
  • + end: ending position within the grid column. +
    • +
+ + - + + + placeSelf + + 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceSelf + + + Sets the place-self CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + justifySelf: aligns a grid item inside a cell along the inline (row) axis. +
    • +
  • + alignSelf: aligns a grid item inside a cell along the block (column) axis. +
    • +
+ + + 'auto' + + + + row + + number | string | GridCell + + + Sets the grid-row CSS property. See{" "} + + MDN + {" "} + for further information. It can be either a value from the range or an object with the following + properties: +
    +
  • + start: starting position within the grid row. +
    • +
  • + end: ending position within the grid row. +
    • +
+ + - + + ), }, @@ -365,15 +383,13 @@ const sections = [ }, ]; -const GridCodePage = () => { - return ( - - - - - - - ); -}; +const GridCodePage = () => ( + + + + + + +); export default GridCodePage; diff --git a/apps/website/screens/components/grid/code/examples/layout.tsx b/apps/website/screens/components/grid/code/examples/layout.tsx index b6906c1f40..aaa2961e6a 100644 --- a/apps/website/screens/components/grid/code/examples/layout.tsx +++ b/apps/website/screens/components/grid/code/examples/layout.tsx @@ -5,9 +5,9 @@ const code = `() => { return ( { - + diff --git a/apps/website/screens/components/grid/overview/GridOverviewPage.tsx b/apps/website/screens/components/grid/overview/GridOverviewPage.tsx new file mode 100644 index 0000000000..a71b9571d1 --- /dev/null +++ b/apps/website/screens/components/grid/overview/GridOverviewPage.tsx @@ -0,0 +1,111 @@ +import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; +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 = [ + { + title: "Introduction", + content: ( + <> + + The grid component is a powerful layout tool that simplifies the creation of complex and responsive designs. + It allows developers to create structured layouts using rows and columns, making it easier to manage spacing + and alignment within a design. + + + ), + }, + { + title: "The grid layout", + content: ( + <> + + The grid layout module is a two-dimensional layout system for the web. It allows you to create complex layouts + using rows and columns, making it easier to design responsive web pages. The grid layout provides a more + efficient way to align and distribute space among items in a container, even when their size is unknown or + dynamic. + + + Below, we share a series of essential links to help you understand and use the grid component correctly. If + you are not acquainted with these concepts, we strongly recommend taking a moment to review them: + + + + + MDN web docs: CSS grid layout + + + + + Google web.dev: Grid + + + + + ), + }, + { + title: "Best practices", + content: ( + + + Use grid for complex layouts: the grid component is ideal for creating complex layouts with + multiple rows and columns. It allows you to create responsive designs that adapt to different screen sizes. + + + Keep it simple: while the grid component is powerful, it's essential to keep your layouts as + simple as possible. Avoid overcomplicating your designs with too many nested grids or complex structures, + which can reduce the readability and maintainability of your code. + + + Use grid items correctly: they are represented by the DxcGrid.Item tag and + should be used when the decision to follow the Grid layout pattern is assumed only by the parent container. + Ensure that you use the grid items correctly within the grid container. The grid items should be direct + descendants of the grid container to ensure proper alignment and spacing. + + + 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 grid properties like{" "} + templateColumns, templateRows, and templateAreas to create scalable + designs. + + + Use grid gaps wisely: the grid component provides a gap property to control spacing between + items. Use this property to create consistent spacing between items and avoid excessive margins or padding. + + + Leverage alignment and justification: use placeContent and{" "} + placeItems strategically to control content positioning within the grid container, ensuring a + well-structured and visually balanced layout. + + + 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. + + + Combine with other layout techniques: grid is powerful but not always the best tool for every + scenario. Consider using the{" "} + + flex + {" "} + component instead for one-dimensional layouts or stacked components with simpler structures. + + + ), + }, +]; + +const GridOverviewPage = () => ( + + + + + + +); + +export default GridOverviewPage; diff --git a/apps/website/screens/components/grid/specs/GridSpecsPage.tsx b/apps/website/screens/components/grid/specs/GridSpecsPage.tsx deleted file mode 100644 index aebaf99389..0000000000 --- a/apps/website/screens/components/grid/specs/GridSpecsPage.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { DxcFlex } from "@dxc-technology/halstack-react"; -import Figure from "@/common/Figure"; -import DocFooter from "@/common/DocFooter"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import gridAutoFlowSpecs from "./images/grid-autoFlow-specs.png"; -import gridTemplateSpecs from "./images/grid-templates-specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( - <> -
- Grid auto-flow: row, column and rows dense design specifications -
-
- Grid template: areas, rows and columns design specifications -
- - ), - }, -]; - -const GridSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default GridSpecsPage; diff --git a/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png b/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png deleted file mode 100644 index c07d81e70e..0000000000 Binary files a/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png and /dev/null differ diff --git a/apps/website/screens/components/grid/specs/images/grid-templates-specs.png b/apps/website/screens/components/grid/specs/images/grid-templates-specs.png deleted file mode 100644 index 0c3dc0fb40..0000000000 Binary files a/apps/website/screens/components/grid/specs/images/grid-templates-specs.png and /dev/null differ diff --git a/apps/website/screens/components/grid/usage/GridUsagePage.tsx b/apps/website/screens/components/grid/usage/GridUsagePage.tsx deleted file mode 100644 index 28259f9678..0000000000 --- a/apps/website/screens/components/grid/usage/GridUsagePage.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Usage", - content: ( - <> - - The Grid component allows for both row and column layouts while allowing for a lot of flexibility of item - placement within the grid itself. - - - ), - }, - { - title: "Layout, Spacing, and Placement", - content: ( - <> - - The layout type can be specified using the grid-auto-flow property. This property lets you - control how the auto-placement algorithm works, determining exactly how auto-placed items get flowed into the - grid. Use the gap property to set the space between items and the placement properties{" "} - placeContent and placeItems for more specific controls of how individual items stack - or align within the grid. - - - ), - }, - { - title: "Grid Templates", - content: ( - <> - - You can use templates to define grid areas, columns, and rows. The grid-template-areas property - is used to establish cells within a grid and assign them names. grid-template-columns defines the - line names and track sizing functions of the grid columns while grid-template-rows defines the - line names and track sizing functions of the grid columns. - - - ), - }, - { - title: "Grid Items", - content: ( - <> - - The Grid items are direct descendants of a grid container. They are represented by the{" "} - DxcGrid.Item tag and should be used when the decision to follow the Grid layout pattern is - assumed only by the parent container. - - - In case you are building a complex Grid layout with several nested grid containers, DxcGrid.Item{" "} - becomes very limited and therefore, you will have to wrap the children with DxcGrid. - - - ), - }, -]; - -const GridUsagePage = () => { - return ( - - - - - - - ); -}; - -export default GridUsagePage; diff --git a/packages/lib/src/grid/Grid.stories.tsx b/packages/lib/src/grid/Grid.stories.tsx index 392dc9e335..738dccb151 100644 --- a/packages/lib/src/grid/Grid.stories.tsx +++ b/packages/lib/src/grid/Grid.stories.tsx @@ -32,7 +32,6 @@ const ColoredContainer = styled.div<{ color?: string; width?: string; height?: s font-size: 1.5rem; font-weight: bold; color: #a46ede; - ${({ width }) => width && `width: ${width}`}; ${({ height }) => height && `height: ${height}`}; `; @@ -101,7 +100,7 @@ const Grid = () => ( templateColumns={["repeat(4, 1fr)"]} templateRows={["40px", "200px", "60px"]} templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]} - gap={{ rowGap: "0.5rem", columnGap: "1rem" }} + gap={{ rowGap: "var(--spacing-gap-s)", columnGap: "var(--spacing-gap-ml)" }} > @@ -119,7 +118,7 @@ const Grid = () => ( <ExampleContainer> - <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="0.5rem"> + <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="var(--spacing-gap-s)"> <DxcGrid.Item column={{ start: 1, end: -1 }}> <ColoredContainer color="yellow" height="100%"> Header @@ -134,7 +133,7 @@ const Grid = () => ( column={{ start: 2, end: -1 }} templateRows={["repeat(4, 1fr)"]} templateColumns={["repeat(2, 1fr)"]} - gap="1rem" + gap="var(--spacing-gap-ml)" > <ColoredContainer /> <ColoredContainer /> diff --git a/packages/lib/src/grid/types.ts b/packages/lib/src/grid/types.ts index 1d4d198f67..49fd152de4 100644 --- a/packages/lib/src/grid/types.ts +++ b/packages/lib/src/grid/types.ts @@ -1,27 +1,25 @@ import { ReactNode } from "react"; -import { CoreSpacingTokensType } from "../common/coreTokens"; -type Gap = { rowGap: CoreSpacingTokensType; columnGap?: CoreSpacingTokensType } | { rowGap?: CoreSpacingTokensType; columnGap: CoreSpacingTokensType } | CoreSpacingTokensType; -type GridCell = { start: number | string; end: number | string }; - -type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline"; +type Gap = string | { columnGap?: string; rowGap: string; } | { columnGap: string; rowGap?: string; }; +type GridCell = { end: number | string; start: number | string; }; +type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch"; type PlaceContentValues = - | "normal" - | "start" - | "end" + | "baseline" | "center" - | "stretch" - | "space-between" + | "end" + | "normal" | "space-around" + | "space-between" | "space-evenly" - | "baseline"; -type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline"; + | "start" + | "stretch"; +type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch"; type PlaceObject<Type, Suffix extends string> = { [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property]; }; type PlaceGeneric<PlaceValues, Element extends string> = - | PlaceObject<{ justify?: PlaceValues; align: PlaceValues }, Element> - | PlaceObject<{ justify: PlaceValues; align?: PlaceValues }, Element> + | PlaceObject<{ align: PlaceValues; justify?: PlaceValues; }, Element> + | PlaceObject<{ align?: PlaceValues; justify: PlaceValues; }, Element> | PlaceValues; export type GridItemProps = { @@ -29,18 +27,20 @@ export type GridItemProps = { * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property. */ areaName?: string; + /** + * Sets a custom HTML tag. + */ + as?: keyof HTMLElementTagNameMap; + /** + * Custom content inside the grid container. + */ + children: ReactNode; /** * Sets the grid-column CSS property. * * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column */ column?: number | string | GridCell; - /** - * Sets the grid-row CSS property. - * - * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row - */ - row?: number | string | GridCell; /** * Sets the place-self CSS property. * @@ -48,13 +48,11 @@ export type GridItemProps = { */ placeSelf?: PlaceGeneric<PlaceSelfValues, "self">; /** - * Sets a custom HTML tag. - */ - as?: keyof HTMLElementTagNameMap; - /** - * Custom content inside the grid container. + * Sets the grid-row CSS property. + * + * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row */ - children: ReactNode; + row?: number | string | GridCell; }; type Props = GridItemProps & { @@ -81,7 +79,7 @@ type Props = GridItemProps & { * * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap */ - gap?: CoreSpacingTokensType | Gap; + gap?: Gap; /** * Sets the place-content CSS property. *