feat(PPDSC-2077): add grid-auto props and stylePreset overrides to GridLayout

site/pages/components/grid-layout.tsx

@@ -221,6 +221,71 @@ const GridLayoutComponent = (layoutProps: LayoutProps) => (
               },
             ],
           },
+          {
+            name: 'autoFlow',
+            propName: 'autoFlow',
+            options: [
+              {
+                label: 'row',
+                value: 'row',
+                isDefault: true,
+              },
+              {
+                label: 'column',
+                value: 'column',
+              },
+              {
+                label: 'dense',
+                value: 'dense',
+              },
+            ],
+          },
+          {
+            name: 'autoColumns',
+            propName: 'autoColumns',
+            options: [
+              {
+                label: 'none',
+                value: '',
+                isDefault: true,
+              },
+              {
+                label: 'auto',
+                value: 'auto',
+              },
+              {
+                label: '100px',
+                value: '100px',
+              },
+              {
+                label: 'minmax(100px, auto)',
+                value: 'minmax(100px, auto)',
+              },
+            ],
+          },
+          {
+            name: 'autoRows',
+            propName: 'autoRows',
+            options: [
+              {
+                label: 'none',
+                value: '',
+                isDefault: true,
+              },
+              {
+                label: 'auto',
+                value: 'auto',
+              },
+              {
+                label: '10%',
+                value: '10%',
+              },
+              {
+                label: 'minmax(20px, auto)',
+                value: 'minmax(20px, auto)',
+              },
+            ],
+          },
           {
             name: 'rowGap',
             propName: 'rowGap',
@@ -458,6 +523,60 @@ const GridLayoutComponent = (layoutProps: LayoutProps) => (
               ),
               required: null,
             },
+            {
+              name: 'autoFlow',
+              type: 'MQ<string>',
+              description: (
+                <>
+                  Controls how the auto-placement algorithm works, specifying
+                  exactly how auto-placed items get flowed into the grid, using
+                  the <InlineCode>grid-auto-flow</InlineCode>{' '}
+                  <Link
+                    href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow"
+                    target="_blank"
+                  >
+                    css property.
+                  </Link>
+                </>
+              ),
+              required: null,
+            },
+            {
+              name: 'autoRows',
+              type: 'MQ<string>',
+              description: (
+                <>
+                  Specifies the size of an implicitly-created grid row track or
+                  pattern of tracks, using the{' '}
+                  <InlineCode>grid-auto-rows</InlineCode>{' '}
+                  <Link
+                    href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows"
+                    target="_blank"
+                  >
+                    css property.
+                  </Link>
+                </>
+              ),
+              required: null,
+            },
+            {
+              name: 'autoColumns',
+              type: 'MQ<string>',
+              description: (
+                <>
+                  Specifies the size of an implicitly-created grid column track
+                  or pattern of tracks, using the{' '}
+                  <InlineCode>grid-auto-columns</InlineCode>{' '}
+                  <Link
+                    href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns"
+                    target="_blank"
+                  >
+                    css property.
+                  </Link>
+                </>
+              ),
+              required: null,
+            },
             {
               name: 'justifyContent',
               type: 'MQ<string>',

src/audio-player-composable/components/volume-control/styled.ts

@@ -1,8 +1,8 @@
 import {GridLayout} from '../../../grid-layout';
 import {
   getResponsiveSize,
-  getStylePreset,
   styled,
+  getStylePreset,
   getResponsiveSpace,
 } from '../../../utils/style';
 import {AudioPlayerVolumeControlProps} from './types';

src/grid-layout/__tests__/__snapshots__/grid-layout.test.tsx.snap

@@ -469,6 +469,126 @@ exports[`GridLayout renders GridLayout with overrides 1`] = `
 </DocumentFragment>
 `;
 
+exports[`GridLayout renders a grid with autoColumns 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  row-gap: 20px;
+  -webkit-column-gap: 20px;
+  column-gap: 20px;
+  grid-template-areas: "a a";
+  grid-auto-columns: 80px;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`GridLayout renders a grid with autoFlow 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  row-gap: 20px;
+  -webkit-column-gap: 20px;
+  column-gap: 20px;
+  grid-template-columns: repeat(3, 60px);
+  grid-auto-flow: column;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`GridLayout renders a grid with autoRows 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  row-gap: 20px;
+  -webkit-column-gap: 20px;
+  column-gap: 20px;
+  grid-template-areas: "a a";
+  grid-auto-rows: 80px;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+    <div
+      class="emotion-1"
+    >
+      TEST
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`GridLayout renders a grid with rowGap and columnGap 1`] = `
 <DocumentFragment>
   .emotion-0 {

src/grid-layout/__tests__/grid-layout.test.tsx

@@ -199,7 +199,46 @@ describe('GridLayout', () => {
     expect(fragment).toMatchSnapshot();
   });
 
-  test('renders GridLayout with logical overrides', async () => {
+  test('renders a grid with autoFlow', () => {
+    const props: GridLayoutProps = {
+      columns: 'repeat(3, 60px)',
+      columnGap: '20px',
+      rowGap: '20px',
+      autoFlow: 'column',
+      children: defaultChildren,
+    };
+
+    const fragment = renderToFragmentWithTheme(GridLayout, props);
+    expect(fragment).toMatchSnapshot();
+  });
+
+  test('renders a grid with autoRows', () => {
+    const props: GridLayoutProps = {
+      areas: 'a a',
+      autoRows: 'sizing100',
+      columnGap: '20px',
+      rowGap: '20px',
+      children: defaultChildren,
+    };
+
+    const fragment = renderToFragmentWithTheme(GridLayout, props);
+    expect(fragment).toMatchSnapshot();
+  });
+
+  test('renders a grid with autoColumns', () => {
+    const props: GridLayoutProps = {
+      areas: 'a a',
+      autoColumns: 'sizing100',
+      columnGap: '20px',
+      rowGap: '20px',
+      children: defaultChildren,
+    };
+
+    const fragment = renderToFragmentWithTheme(GridLayout, props);
+    expect(fragment).toMatchSnapshot();
+  });
+
+  test('renders GridLayout with logical overrides', () => {
     const props: GridLayoutProps = {
       overrides: {
         paddingInline: '30px',
@@ -208,7 +247,7 @@ describe('GridLayout', () => {
       children: defaultChildren,
     };
 
-    const fragment = renderToFragmentWithTheme(GridLayout, props) as any;
+    const fragment = renderToFragmentWithTheme(GridLayout, props);
     expect(fragment).toMatchSnapshot();
   });
 });