Add getChildTag fn to Inline component (#6453)

* move getChildTag to util, apply to Inline component as well

* update comment

* changeset

* replace padding-inline-start with more standard padding-left

.changeset/empty-panthers-vanish.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/keystone': patch
+---
+
+Dashboard cards now enclosed in unordered list, for clearer semantics.

.changeset/long-birds-return.md

@@ -0,0 +1,5 @@
+---
+'@keystone-ui/core': minor
+---
+
+Added functionality to ensure that Inline elements that are 'ul' or 'ol' automatically wrap children in 'li' rather than 'div'

design-system/packages/core/src/components/Inline.tsx

@@ -4,7 +4,7 @@
 import { Children, ReactNode } from 'react';
 import { jsx } from '../emotion';
 
-import { forwardRefWithAs } from '../utils';
+import { forwardRefWithAs, getChildTag } from '../utils';
 import { Theme } from '../types';
 import { useTheme } from '../theme';
 import { Box, BoxProps } from './Box';
@@ -30,6 +30,7 @@ export const Inline = forwardRefWithAs<'div', InlineProps>(
     const { spacing } = useTheme();
     const resolvedAlign = alignment[align];
     const resolvedGap = spacing[gap];
+    const ChildWrapper = getChildTag(props.as);
 
     return (
       <Box
@@ -45,7 +46,7 @@ export const Inline = forwardRefWithAs<'div', InlineProps>(
       >
         {Children.map(children, child =>
           child !== null && child !== undefined ? (
-            <div
+            <ChildWrapper
               css={{
                 display: 'flex',
                 flexWrap: 'wrap',
@@ -54,7 +55,7 @@ export const Inline = forwardRefWithAs<'div', InlineProps>(
               }}
             >
               {child}
-            </div>
+            </ChildWrapper>
           ) : null
         )}
       </Box>

design-system/packages/core/src/components/Stack.tsx

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { ElementType, Children, Fragment, ReactNode, isValidElement } from 'react';
+import { Children, Fragment, ReactNode, isValidElement } from 'react';
 
 import { jsx } from '../emotion';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { useTheme } from '../theme';
 import { Theme } from '../types';
-import { forwardRefWithAs, mapResponsiveProp } from '../utils';
+import { forwardRefWithAs, mapResponsiveProp, getChildTag } from '../utils';
 
 import { Box, BoxProps } from './Box';
 import { Divider } from './Divider';
@@ -45,16 +45,6 @@ export type StackProps = {
   gap?: keyof Theme['spacing'];
 } & BoxProps;
 
-const getChildTag = (parentTag?: ElementType<any>) => {
-  switch (parentTag) {
-    case 'ul':
-    case 'ol':
-      return 'li';
-    default:
-      return 'div';
-  }
-};
-
 export const Stack = forwardRefWithAs<'div', StackProps>(
   ({ across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props }, ref) => {
     const { spacing } = useTheme();

design-system/packages/core/src/utils.ts

@@ -11,6 +11,20 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 
+/*
+  Simple switch to return a child tag from a parent tag argument.
+  Returns a div by default.
+*/
+export const getChildTag = (parentTag?: ElementType<any>) => {
+  switch (parentTag) {
+    case 'ul':
+    case 'ol':
+      return 'li';
+    default:
+      return 'div';
+  }
+};
+
 /*
   @johannes' one weird trick for fixing TypeScript autocomplete
 */

packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx

@@ -158,7 +158,15 @@ export const HomePage = () => {
           <LoadingDots label="Loading lists" size="large" tone="passive" />
         </Center>
       ) : (
-        <Inline gap="large" paddingY="xlarge">
+        <Inline
+          as="ul"
+          gap="large"
+          paddingY="xlarge"
+          css={{
+            paddingLeft: '0px',
+            marginBottom: '0px',
+          }}
+        >
           {(() => {
             if (visibleLists.state === 'error') {
               return (