chore!: refactor ModalLayout to Modal and use radix-ui primitives

Author: joshuaellis

.changeset/brown-lamps-wink.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: refactor ModalLayout to Modal and use radix-ui primitives

.changeset/nine-years-shake.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: refactor Grid to be composite component

.changeset/two-feet-promise.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix(design-system): time-picker icon was too small

docs/components/ColorCards.tsx

@@ -34,15 +34,15 @@ const ColorCards = () => {
         return (
           <Box key={colorName} tag="section">
             <H2>{`${colorName} colors`}</H2>
-            <Grid tag="ol" gap={6} gridCols={3}>
+            <Grid.Root tag="ol" gap={6} gridCols={3}>
               {colorKeys
                 .toSorted((a, b) => compare(a, b))
                 .map((key) => (
                   <li key={key}>
                     <Card colorKey={key} colorName={colorName} colorShade={key.split(colorName.toLowerCase())[1]} />
                   </li>
                 ))}
-            </Grid>
+            </Grid.Root>
           </Box>
         );
       })}
@@ -90,7 +90,7 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
         <ContrastInfo backgroundColor={colorHex} isLighter />
         <ContrastInfo backgroundColor={colorHex} isLighter isSmall />
       </Flex>
-      <Grid
+      <Grid.Root
         tag="dl"
         aria-label={`Table properties for ${colorName} ${colorShade}`}
         gap={2}
@@ -125,7 +125,7 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
             </Typography>
           </Box>
         ))}
-      </Grid>
+      </Grid.Root>
     </Box>
   );
 };

docs/stories/00-getting started/migration guides/migration-v1-v2.mdx

@@ -16,6 +16,9 @@ import { Meta } from '@storybook/blocks';
   - [Upgraded styled-components to V6](#upgraded-styled-components-to-v6)
   - [Removed CMS specific components](#removed-cms-specific-components)
   - [Radix-UI](#radix-ui)
+  - [Removed ThemeProvider](#removed-themeprovider)
+  - [IconButton API changes](#iconbutton-api-changes)
+  - [Grid is now a composite component](#grid-is-now-a-composite-component)
 - [Icons](#icons)
 
 ## Design System
@@ -202,13 +205,14 @@ made the decision to migrate to Radix-UI primitives for many of our components,
 of our APIs will change, but functionality should still remain the same. We recommend you check out the documentation
 for any of these components to understand better how to migrate your code.
 
-- `Accordion`
-- `Avatar`
-- `Checkbox`
-- `Popover`
-- `Radio`
-- `Tabs`
-- `Tooltip`
+- [`Accordion`](../?path=/docs/components-accordion--base)
+- [`Avatar`](../?path=/docs/components-avatar--base)
+- [`Checkbox`](../?path=/docs/components-checkbox--base)
+- [`Modal`](../?path=/docs/components-modal--base)
+- [`Popover`](../?path=/docs/components-popover--base)
+- [`Radio`](../?path=/docs/components-radio--base)
+- [`Tabs`](../?path=/docs/components-tabs--base)
+- [`Tooltip`](../?path=/docs/components-tooltip--base)
 
 ### Removed `ThemeProvider`
 
@@ -230,6 +234,24 @@ future release. If you don't want a tooltip you should set `withTooltip` to `fal
 + <IconButton withTooltip={false} label="Add"><Plus /></IconButton>
 ```
 
+### Grid is now a composite component
+
+`Grid` is now a composite Component. Therefore, `GridItem` has also been removed. To upgrade:
+
+```diff
+- import { Grid, GridItem } from '@strapi/design-system';
++ import { Grid } from '@strapi/design-system';
+
+- <Grid gridCols={4}>
+-   <GridItem col={2}>1</GridItem>
+-   <GridItem col={2}>2</GridItem>
+- </Grid>
++ <Grid.Root gridCols={4}>
++   <Grid.Item>1</Grid.Item>
++   <Grid.Item>2</Grid.Item>
++ </Grid.Root>
+```
+
 ---
 
 ## Icons

docs/stories/04-components/Modal.mdx

@@ -0,0 +1,86 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { Modal } from '@strapi/design-system';
+
+import * as ModalStories from './Modal.stories';
+
+<Meta of={ModalStories} />
+
+# ModalLayout
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Accessibility](#accessibility)
+- [Patterns](#patterns)
+
+## Usage
+
+```js
+import { Modal } from '@strapi/design-system';
+```
+
+<Canvas of={ModalStories.Base} />
+
+## Props
+
+### Root
+
+<TypeTable of={Modal.Props} />
+
+### Trigger
+
+The `Trigger` component permanently has the `asChild` prop meaning it will always render the child merging the props &
+behaviour of the component.
+
+<TypeTable of={Modal.TriggerProps} />
+
+### Content
+
+<TypeTable of={Modal.ContentProps} />
+
+### Close
+
+The `Close` component permanently has the `asChild` prop meaning it will always render the child merging the props &
+behaviour of the component.
+
+<TypeTable of={Modal.CloseProps} />
+
+### Header
+
+<TypeTable of={Modal.HeaderProps} />
+
+### Body
+
+This component is not mandatory to use, but does have inbuilt styles for the recommended padding around the content of
+the modal as well as a scrollable container.
+
+<TypeTable of={Modal.BodyProps} />
+
+### Footer
+
+<TypeTable of={Modal.FooterProps} />
+
+## Variants
+
+### Scrolling
+
+The `Modal` has a maximum height, when that is hit the content inside will scroll.
+
+<Canvas of={ModalStories.Scrolling} />
+
+## Accessibility
+
+Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal).
+
+## Patterns
+
+### Closing after async action
+
+A typical use of a modal in Strapi is to show a small form to the user, as such, the form should be submitted before the
+modal is closed and likewise, assuming success, you'd expect the modal to close. If you wrap the `confirm` button in
+`Modal.Close` it will automatically close the modal on click, not awaiting the async action.
+
+Therefore, to manage this you should control the modal programatically to close only on success of the async action.
+
+<Canvas of={ModalStories.CloseOnSuccess} />