-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Using principles from #2295 - Removing `asChild` on ListOrdered and ListUnordered as using other tags will break HTML validity and remove built in list-type styling - Removing the wrapping `div` caused by `List.Root` so root truly becomes a pure context provider and simplify DOM - Replacing `List.Root`, `List.Heading`, `List.Unordered`, `List.Ordered` with `<List variant="unordered | ordered | none">` for more HTML-aligned API and less verbose DOM - Automatic connect heading with list if provided - not a must, but a nice a11y enhancement - Fix a11y for VoiceOver when `list-style: none` --------- Co-authored-by: Tobias Barsnes <[email protected]> Co-authored-by: Michael Marszalek <[email protected]>
- Loading branch information
3 people
authored
Sep 12, 2024
1 parent
5a46662
commit f3abcda
Showing
18 changed files
with
456 additions
and
546 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@digdir/designsystemet-css": patch | ||
| "@digdir/designsystemet-react": patch | ||
| --- | ||
|
|
||
| List: Remove `List.Root` and `List.Heading`, which changes API |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,32 @@ | ||
| .ds-list { | ||
| --dsc-list-font-size: var(--ds-font-size-5); | ||
| --dsc-list-padding-left: var(--ds-spacing-6); | ||
| --dsc-list-spacing: var(--ds-spacing-3); | ||
| --dsc-list-spacing-nested: var(--ds-spacing-2); | ||
|
|
||
| font-size: var(--dsc-list-font-size); /* Replace with composes paragraph-md */ | ||
| line-height: var(--ds-line-height-md); /* Replace with composes paragraph-md */ | ||
| margin: 0; | ||
| padding-left: var(--dsc-list-padding-left); | ||
| } | ||
|
|
||
| .ds-list--sm { | ||
| --dsc-list-padding-left: var(--ds-spacing-4); | ||
| } | ||
| & > li + li { margin-top: var(--dsc-list-spacing) } | ||
| & > li > :is(ol, ul) { --dsc-list-spacing: var(--dsc-list-spacing-nested) } /* Shrink spacing a bit when nested */ | ||
|
|
||
| .ds-list--md, | ||
| .ds-list--lg { | ||
| --dsc-list-padding-left: var(--ds-spacing-6); | ||
| } | ||
| /* Add zero-width space to fix VoiceOver: https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html | ||
| * This can also be acheived by using role="list" + role="listitem", but is nice to solve with CSS avoiding cluttered HTML | ||
| */ | ||
| & > li::before { | ||
| content: "\200B"; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .ds-list__item { | ||
| margin-bottom: var(--ds-spacing-2); | ||
| } | ||
| &[data-size="sm"] { | ||
| --dsc-list-padding-left: var(--ds-spacing-4); | ||
| --dsc-list-font-size: var(--ds-font-size-4); /* Replace with composes paragraph-sm */ | ||
| } | ||
|
|
||
| .ds-list__item > .ds-list { | ||
| margin-top: var(--ds-spacing-2); | ||
| &[data-size="lg"] { | ||
| --dsc-list-font-size: var(--ds-font-size-6); /* Replace with composes paragraph-sm */ | ||
| --dsc-list-spacing: var(--ds-spacing-4); | ||
| } | ||
| } |
48 changes: 31 additions & 17 deletions
48
packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,45 @@ | ||
| import { useContext, useEffect } from 'react'; | ||
| import { forwardRef, useContext, useEffect } from 'react'; | ||
|
|
||
| import type { ListHeadingProps } from '../List'; | ||
| import { List } from '../List'; | ||
| import { Heading, type HeadingProps } from '../Typography/Heading'; | ||
|
|
||
| import { ErrorSummaryContext } from './ErrorSummaryRoot'; | ||
| import { | ||
| ErrorSummaryContext, | ||
| type ErrorSummaryProps, | ||
| } from './ErrorSummaryRoot'; | ||
|
|
||
| export type ErrorSummaryHeadingProps = ListHeadingProps; | ||
| export type ErrorSummaryHeadingProps = HeadingProps; | ||
|
|
||
| export const ErrorSummaryHeading = ({ | ||
| id, | ||
| ...rest | ||
| }: ErrorSummaryHeadingProps) => { | ||
| const { headingId, setHeadingId } = useContext(ErrorSummaryContext); | ||
| const HEADING_SIZE_MAP: { | ||
| [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size']; | ||
| } = { | ||
| sm: '2xs', | ||
| md: 'xs', | ||
| lg: 'sm', | ||
| } as const; | ||
|
|
||
| export const ErrorSummaryHeading = forwardRef< | ||
| HTMLHeadingElement, | ||
| ErrorSummaryHeadingProps | ||
| >(function ErrorSummaryHeading( | ||
| { className, id, ...rest }: ErrorSummaryHeadingProps, | ||
| ref, | ||
| ) { | ||
| const { size, headingId, setHeadingId } = useContext(ErrorSummaryContext); | ||
|
|
||
| useEffect(() => { | ||
| if (id && headingId !== id) { | ||
| setHeadingId(id); | ||
| } | ||
| if (id && headingId !== id) setHeadingId(id); | ||
| }, [headingId, id, setHeadingId]); | ||
|
|
||
| return ( | ||
| <List.Heading | ||
| {...rest} | ||
| id={headingId} | ||
| <Heading | ||
| className='ds-error-summary__heading' | ||
| id={headingId} | ||
| size={HEADING_SIZE_MAP[size ?? 'md']} | ||
| spacing | ||
| ref={ref} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| }; | ||
| }); | ||
|
|
||
| ErrorSummaryHeading.displayName = 'ErrorSummaryHeading'; |
Oops, something went wrong.