From 39e65e6f601d01b2d042c35a1067a91afc1e7814 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 2 Sep 2021 14:08:42 +1000 Subject: [PATCH 1/4] move getChildTag to util, apply to Inline component as well --- .../packages/core/src/components/Inline.tsx | 7 ++++--- .../packages/core/src/components/Stack.tsx | 14 ++------------ design-system/packages/core/src/utils.ts | 13 +++++++++++++ .../admin-ui/pages/HomePage/index.tsx | 16 ++++++++++++++-- 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/design-system/packages/core/src/components/Inline.tsx b/design-system/packages/core/src/components/Inline.tsx index 31f63e2d196..4b5a9cdaa67 100644 --- a/design-system/packages/core/src/components/Inline.tsx +++ b/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 ( ( > {Children.map(children, child => child !== null && child !== undefined ? ( -
( }} > {child} -
+ ) : null )} diff --git a/design-system/packages/core/src/components/Stack.tsx b/design-system/packages/core/src/components/Stack.tsx index 8bc6ff1017f..ae06186d42a 100644 --- a/design-system/packages/core/src/components/Stack.tsx +++ b/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) => { - 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(); diff --git a/design-system/packages/core/src/utils.ts b/design-system/packages/core/src/utils.ts index 0841bfc38be..06670dcda2b 100644 --- a/design-system/packages/core/src/utils.ts +++ b/design-system/packages/core/src/utils.ts @@ -11,6 +11,19 @@ import { } from 'react'; import { createPortal } from 'react-dom'; +/* + Simple switch to coerce a child tag from a parent tag argument +*/ +export const getChildTag = (parentTag?: ElementType) => { + switch (parentTag) { + case 'ul': + case 'ol': + return 'li'; + default: + return 'div'; + } +}; + /* @johannes' one weird trick for fixing TypeScript autocomplete */ diff --git a/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx b/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx index 3b75c3fac18..7aeba6a8a18 100644 --- a/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx +++ b/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx @@ -30,7 +30,11 @@ const ListCard = ({ listKey, count }: ListCardProps) => { const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const router = useRouter(); return ( -
+
{ ) : ( - + {(() => { if (visibleLists.state === 'error') { return ( From 810e907b18febed55ee1987636d397404cf06860 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 2 Sep 2021 14:12:34 +1000 Subject: [PATCH 2/4] update comment --- design-system/packages/core/src/utils.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/design-system/packages/core/src/utils.ts b/design-system/packages/core/src/utils.ts index 06670dcda2b..0a41678c6c6 100644 --- a/design-system/packages/core/src/utils.ts +++ b/design-system/packages/core/src/utils.ts @@ -12,7 +12,8 @@ import { import { createPortal } from 'react-dom'; /* - Simple switch to coerce a child tag from a parent tag argument + Simple switch to return a child tag from a parent tag argument. + Returns a div by default. */ export const getChildTag = (parentTag?: ElementType) => { switch (parentTag) { From 55dc85a969a663fec300dfbb26cae74fbb7425b8 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 2 Sep 2021 14:15:12 +1000 Subject: [PATCH 3/4] changeset --- .changeset/empty-panthers-vanish.md | 5 +++++ .changeset/long-birds-return.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/empty-panthers-vanish.md create mode 100644 .changeset/long-birds-return.md diff --git a/.changeset/empty-panthers-vanish.md b/.changeset/empty-panthers-vanish.md new file mode 100644 index 00000000000..faa79c6ec90 --- /dev/null +++ b/.changeset/empty-panthers-vanish.md @@ -0,0 +1,5 @@ +--- +'@keystone-next/keystone': patch +--- + +Dashboard cards now enclosed in unordered list, for clearer semantics. diff --git a/.changeset/long-birds-return.md b/.changeset/long-birds-return.md new file mode 100644 index 00000000000..babb00753b4 --- /dev/null +++ b/.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' From 72affc04b692e3a966ac3421747557aeaaf44920 Mon Sep 17 00:00:00 2001 From: gwyneplaine Date: Thu, 2 Sep 2021 14:17:20 +1000 Subject: [PATCH 4/4] replace padding-inline-start with more standard padding-left --- .../admin-ui/pages/HomePage/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx b/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx index 7aeba6a8a18..5a16e51b12e 100644 --- a/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx +++ b/packages/keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx @@ -30,11 +30,7 @@ const ListCard = ({ listKey, count }: ListCardProps) => { const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const router = useRouter(); return ( -
+
{ gap="large" paddingY="xlarge" css={{ - paddingInlineStart: '0px', + paddingLeft: '0px', marginBottom: '0px', }} >