-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Breadcrumbs): css and api alignment (#2428)
Part of #2295 and #2221 Moves back link into `nav` as this make sense also from a11y perspective after discussion with NRK --------- Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
- Loading branch information
1 parent
03d776b
commit 32fdbd4
Showing
12 changed files
with
235 additions
and
294 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 | ||
| --- | ||
|
|
||
| Breadcrumbs: Rename `Breadcrumbs.Root` to `Breadcrumbs` and remove `Breadcrumbs.Nav` |
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,72 +1,63 @@ | ||
| .ds-breadcrumbs { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-2); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6); | ||
| --dsc-breadcrumbs-link-color: inherit; | ||
| } | ||
|
|
||
| .ds-breadcrumbs--sm { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-1); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5); | ||
| } | ||
|
|
||
| .ds-breadcrumbs--md { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-2); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6); | ||
| } | ||
|
|
||
| .ds-breadcrumbs--lg { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-3); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7); | ||
| } | ||
| &[data-size='sm'] { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-1); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5); | ||
| } | ||
|
|
||
| .ds-breadcrumbs__list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| gap: var(--dsc-breadcrumbs-spacing) 0; | ||
| } | ||
| &[data-size='lg'] { | ||
| --dsc-breadcrumbs-spacing: var(--ds-spacing-3); | ||
| --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7); | ||
| } | ||
|
|
||
| .ds-breadcrumbs__item:where(:not(:last-child))::after, | ||
| .ds-breadcrumbs > .ds-breadcrumbs__link::before { | ||
| background: currentcolor; | ||
| content: ''; | ||
| display: inline-block; | ||
| height: var(--dsc-breadcrumbs-chevron-size); | ||
| margin-inline: var(--dsc-breadcrumbs-spacing); | ||
| mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E") | ||
| 50% / contain no-repeat; | ||
| vertical-align: middle; | ||
| width: var(--dsc-breadcrumbs-chevron-size); | ||
| } | ||
| & > :is(ol, ul) { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| gap: var(--dsc-breadcrumbs-spacing) 0; | ||
| } | ||
|
|
||
| /* When link is direct child of Breadcrumbs, make it back button */ | ||
| .ds-breadcrumbs > .ds-breadcrumbs__link::before { | ||
| margin: 0; | ||
| rotate: 180deg; | ||
| } | ||
| & a:not(:focus-visible) { | ||
| color: inherit; | ||
| } | ||
|
|
||
| .ds-breadcrumbs__link { | ||
| --dsc-link-color: var(--dsc-breadcrumbs-link-color); | ||
| --dsc-link-color-visited: var(--dsc-breadcrumbs-link-color); | ||
| } | ||
| & a[aria-current='page'] { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .ds-breadcrumbs__link[aria-current='page'] { | ||
| text-decoration: none; | ||
| } | ||
| /* Draw chevron between items and before back link */ | ||
| & li:where(:not(:last-child))::after, | ||
| & > :not(ol, ul)::before { | ||
| background: currentcolor; | ||
| content: ''; | ||
| display: inline-block; | ||
| height: var(--dsc-breadcrumbs-chevron-size); | ||
| margin-inline: var(--dsc-breadcrumbs-spacing); | ||
| mask: center / contain no-repeat | ||
| url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E"); | ||
| vertical-align: middle; | ||
| width: var(--dsc-breadcrumbs-chevron-size); | ||
| } | ||
|
|
||
| .ds-breadcrumbs > .ds-breadcrumbs__link:where(:not(:only-child)) { | ||
| display: none; | ||
| } | ||
| /* When link is direct child of Breadcrumbs, make it back button */ | ||
| & > :not(ol, ul)::before { | ||
| margin: 0; | ||
| rotate: 180deg; | ||
| } | ||
|
|
||
| @media (max-width: 650px) { | ||
| .ds-breadcrumbs > .ds-breadcrumbs__nav:where(:not(:only-child)) { | ||
| display: none; | ||
| @media (max-width: 650px) { | ||
| & > :is(ol, ul):not(:only-child) { | ||
| display: none; /* Hide list when mobile and having back link */ | ||
| } | ||
| } | ||
|
|
||
| .ds-breadcrumbs > .ds-breadcrumbs__link { | ||
| display: block; | ||
| width: fit-content; | ||
| @media (min-width: 651px) { | ||
| & > :not(ol, ul) { | ||
| display: none; /* Hide back link when desktop and having list */ | ||
| } | ||
| } | ||
| } |
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
Oops, something went wrong.