From 28cd20452cfd62f78704c7f993d6769165634913 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 2 May 2022 15:41:38 -0700 Subject: [PATCH 01/12] Create NavList component --- src/NavList/NavList.tsx | 44 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/NavList/NavList.tsx diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx new file mode 100644 index 00000000000..9b4e1e15586 --- /dev/null +++ b/src/NavList/NavList.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import {ActionList} from '../ActionList' + +// ---------------------------------------------------------------------------- +// NavList + +export type NavListProps = { + 'aria-label'?: string +} + +const Root = React.forwardRef(({children}, ref) => { + return ( + + ) +}) + +Root.displayName = 'NavList' + +// ---------------------------------------------------------------------------- +// NavList.Item + +export type NavListItemProps = { + href?: string + 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean +} + +const Item = React.forwardRef( + ({href, 'aria-current': ariaCurrent, children}, ref) => { + return ( + + {children} + + ) + } +) + +// ---------------------------------------------------------------------------- +// Export + +export const NavList = Object.assign(Root, { + Item +}) From 343156d3e638926146a29cab6cb33033c84aa96b Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 3 May 2022 15:50:25 -0700 Subject: [PATCH 02/12] Implement NavList subcomponents --- src/NavList/NavList.tsx | 84 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 75 insertions(+), 9 deletions(-) diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 9b4e1e15586..e2556b5503d 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -6,15 +6,19 @@ import {ActionList} from '../ActionList' export type NavListProps = { 'aria-label'?: string + 'aria-labelledby'?: string + // sx } -const Root = React.forwardRef(({children}, ref) => { - return ( - - ) -}) +const Root = React.forwardRef( + ({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children}, ref) => { + return ( + + ) + } +) Root.displayName = 'NavList' @@ -24,21 +28,83 @@ Root.displayName = 'NavList' export type NavListItemProps = { href?: string 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean + // sx } const Item = React.forwardRef( ({href, 'aria-current': ariaCurrent, children}, ref) => { return ( - + {children} ) } ) +// ---------------------------------------------------------------------------- +// NavList.LeadingVisual + +const LeadingVisual = ActionList.LeadingVisual + +LeadingVisual.displayName = 'NavList.LeadingVisual' + +// ---------------------------------------------------------------------------- +// NavList.TrailingVisual + +const TrailingVisual = ActionList.TrailingVisual + +TrailingVisual.displayName = 'NavList.TrailingVisual' + +// ---------------------------------------------------------------------------- +// NavList.Divider + +const Divider = ActionList.Divider + +Divider.displayName = 'NavList.Divider' + +// ---------------------------------------------------------------------------- +// NavList.Group + +type NavListGroupProps = React.PropsWithChildren<{ + title?: string +}> + +// TODO: Dividers between groups +// TODO: Forward ref +const Group = ({title, children}: NavListGroupProps) => { + return {children} +} + +Group.displayName = 'NavList.Group' + // ---------------------------------------------------------------------------- // Export export const NavList = Object.assign(Root, { - Item + Item, + LeadingVisual, + TrailingVisual, + Divider, + Group }) From ded93ee1feb83ec8eea104593b584723fdec784a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 3 May 2022 15:50:37 -0700 Subject: [PATCH 03/12] Reset font weight of trailing visual --- src/ActionList/Visuals.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx index 80cf9e0814d..b40780443ee 100644 --- a/src/ActionList/Visuals.tsx +++ b/src/ActionList/Visuals.tsx @@ -62,7 +62,8 @@ export const TrailingVisual: React.FC = ({sx = {}, ...props}) => { height: '20px', // match height of text row flexShrink: 0, color: getVariantStyles(variant, disabled).annotationColor, - marginLeft: 2 + marginLeft: 2, + fontWeight: 'initial' }, sx as SxProp )} From 9519adf3460f7a7fdf542c9e6f174f4a2803d02f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 3 May 2022 15:50:56 -0700 Subject: [PATCH 04/12] Export NavList from drafts --- src/NavList/index.ts | 1 + src/drafts/index.ts | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/NavList/index.ts diff --git a/src/NavList/index.ts b/src/NavList/index.ts new file mode 100644 index 00000000000..f27654820fb --- /dev/null +++ b/src/NavList/index.ts @@ -0,0 +1 @@ +export * from './NavList' diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 42fe62fe81f..3cc6034face 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -4,3 +4,4 @@ * But, they are published on npm and you can import them for experimentation/feedback. * example: import {ActionList} from '@primer/react/drafts */ +export * from '../NavList' From 8a09b076b3e4e167dfebc26f84ea1cafbd72a2d4 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 3 May 2022 15:51:15 -0700 Subject: [PATCH 05/12] Update NavList docs --- docs/content/NavList.mdx | 226 +++++++-------------------------------- 1 file changed, 36 insertions(+), 190 deletions(-) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 298ed0b3473..3071e1cb5e4 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -2,44 +2,30 @@ title: NavList status: Draft description: Use nav list to render a vertical list of navigation links. +source: https://github.com/primer/react/tree/main/src/NavList --- -Not implemented yet - -To render a horizontal list of navigation links, consider using [UnderlineNav](/UnderlineNav). +```js +import {NavList} from '@primer/react/drafts' +``` ## Examples ### Simple -```jsx +```jsx live drafts - Dashboard + Home - Pull requests - Issues + About + Contact ``` -
- Rendered HTML - -```html - -``` - -
- ### With leading icons -```jsx +```jsx live drafts @@ -62,88 +48,34 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/ ``` -
- Rendered HTML - -```html - -``` - -
- ### With other leading visuals -```jsx +```jsx live drafts - #️⃣ + + #️⃣ + General - 🙏 + + 🙏 + Q&A - 🙌 + + 🙌 + Show and tell ``` -
- Rendered HTML - -```html - -``` - -
- ### With trailing visuals -```jsx +```jsx live drafts Inbox @@ -154,31 +86,13 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/ ``` -
- Rendered HTML - -```html - -``` - -
- ### With a heading -```jsx +```jsx live drafts <> -

Workflows

+ + Workflows + All workflows @@ -190,26 +104,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/ ``` -
- Rendered HTML - -```html -

Workflows

- -``` - -
- ### With aria-label -```jsx +```jsx live drafts Overview @@ -219,24 +116,9 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/ ``` -
- Rendered HTML - -```html - -``` - -
- ### With groups -```jsx +```jsx live drafts @@ -251,34 +133,10 @@ To render a horizontal list of navigation links, consider using [UnderlineNav](/ ``` -
- Rendered HTML - -```html - -``` - -
- ### With sub-items +Not implemented yet + ```jsx Branches @@ -325,9 +183,11 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render ### With a divider -```jsx +```jsx live drafts - Dashboard + + Dashboard + Pull requests Issues @@ -336,26 +196,10 @@ If a `NavList.Item` contains a `NavList.SubNav`, the `NavList.Item` will render ``` -
- Rendered HTML - -```html - -``` - -
- ### With React Router +Not implemented yet + ```jsx import {Link, useMatch, useResolvedPath} from 'react-router-dom' import {NavList} from '@primer/react' @@ -383,6 +227,8 @@ function App() { ### With Next.js +Not implemented yet + ```jsx import {useRouter} from 'next/router' import Link from 'next/link' From 2583f2a35b5c42d6164984b7c8b8550953841ec6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 5 May 2022 16:33:24 -0700 Subject: [PATCH 06/12] Update NavList.mdx --- docs/content/NavList.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 3071e1cb5e4..38f2c7c3160 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -352,9 +352,9 @@ function App() { Date: Thu, 5 May 2022 16:47:53 -0700 Subject: [PATCH 07/12] Add children to props type --- src/NavList/NavList.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index e2556b5503d..b91269de882 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -5,6 +5,7 @@ import {ActionList} from '../ActionList' // NavList export type NavListProps = { + children: React.ReactNode 'aria-label'?: string 'aria-labelledby'?: string // sx @@ -26,6 +27,7 @@ Root.displayName = 'NavList' // NavList.Item export type NavListItemProps = { + children: React.ReactNode href?: string 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean // sx @@ -87,6 +89,7 @@ Divider.displayName = 'NavList.Divider' // NavList.Group type NavListGroupProps = React.PropsWithChildren<{ + children: React.ReactNode title?: string }> From fa0fa0e3f00925a934ac919c87ac0d494db4f358 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 5 May 2022 16:48:51 -0700 Subject: [PATCH 08/12] Add NavList tests --- docs/content/NavList.mdx | 2 +- src/NavList/NavList.test.tsx | 43 ++ .../__snapshots__/NavList.test.tsx.snap | 560 ++++++++++++++++++ 3 files changed, 604 insertions(+), 1 deletion(-) create mode 100644 src/NavList/NavList.test.tsx create mode 100644 src/NavList/__snapshots__/NavList.test.tsx.snap diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 38f2c7c3160..786b2dd7e84 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -355,7 +355,7 @@ function App() { noUnnecessaryDeps: true, adaptsToThemes: true, adaptsToScreenSizes: true, - fullTestCoverage: false, + fullTestCoverage: true, usedInProduction: false, usageExamplesDocumented: true, hasStorybookStories: false, diff --git a/src/NavList/NavList.test.tsx b/src/NavList/NavList.test.tsx new file mode 100644 index 00000000000..89c25d5d296 --- /dev/null +++ b/src/NavList/NavList.test.tsx @@ -0,0 +1,43 @@ +import {render} from '@testing-library/react' +import React from 'react' +import {ThemeProvider, SSRProvider} from '..' +import {NavList} from './NavList' + +describe('NavList', () => { + it('renders a simple list', () => { + const {container} = render( + + + + + Home + + About + Contact + + + + ) + expect(container).toMatchSnapshot() + }) + + it('renders with groups', () => { + const {container} = render( + + + + + + Getting started + + + + Avatar + + + + + ) + expect(container).toMatchSnapshot() + }) +}) diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap new file mode 100644 index 00000000000..86b8b8c0f11 --- /dev/null +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -0,0 +1,560 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NavList renders a simple list 1`] = ` +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c5 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c0 { + margin: 0; + padding-inline-start: 0; + padding-top: 8px; + padding-bottom: 8px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding-left: 0; + padding-right: 0; + font-size: 14px; + padding-top: 0; + padding-bottom: 0; + line-height: 20px; + min-height: 5px; + margin-left: 8px; + margin-right: 8px; + border-radius: 6px; + -webkit-transition: background 33.333ms linear; + transition: background 33.333ms linear; + color: #24292f; + cursor: pointer; +} + +.c2[aria-disabled] { + cursor: not-allowed; +} + +.c2 [data-component="ActionList.Item--DividerContainer"] { + position: relative; +} + +.c2 [data-component="ActionList.Item--DividerContainer"]::before { + content: " "; + display: block; + position: absolute; + width: 100%; + top: -7px; + border: 0 solid; + border-top-width: 0; + border-color: var(--divider-color,transparent); +} + +.c2:not(:first-of-type) { + --divider-color: rgba(208,215,222,0.48); +} + +[data-component="ActionList.Divider"] + .c2 { + --divider-color: transparent !important; +} + +.c2:hover:not([aria-disabled]), +.c2:focus:not([aria-disabled]), +.c2[data-focus-visible-added]:not([aria-disabled]) { + --divider-color: transparent; +} + +.c2:hover:not([aria-disabled]) + .c1, +.c2:focus:not([aria-disabled]) + .c2, +.c2[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c3 { + color: #0969da; + -webkit-text-decoration: none; + text-decoration: none; + padding-left: 8px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; + position: relative; +} + +.c3:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c3:is(button) { + display: inline-block; + padding: 0; + font-size: inherit; + white-space: nowrap; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c3:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c3[aria-current] { + font-weight: 600; + background-color: rgba(208,215,222,0.24); +} + +.c3[aria-current]::after { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ""; + background-color: #0969da; + border-radius: 6px; +} + +@media (hover:hover) and (pointer:fine) { + .c2:hover:not([aria-disabled]) { + background-color: rgba(208,215,222,0.32); + color: #24292f; + } + + .c2:focus:not([data-focus-visible-added]) { + background-color: rgba(208,215,222,0.24); + color: #24292f; + outline: none; + } + + .c2[data-focus-visible-added] { + outline: none; + border: 2 solid; + box-shadow: 0 0 0 2px #0969da; + } + + .c2:active:not([aria-disabled]) { + background-color: rgba(208,215,222,0.48); + color: #24292f; + } +} + +@media (forced-colors:active) { + .c2:focus { + outline: solid 1px transparent !important; + } +} + + +`; + +exports[`NavList renders with groups 1`] = ` +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c8 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c1 { + list-style: none; +} + +.c1:not(:first-child) { + margin-top: 8px; +} + +.c2 { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 16px; + padding-right: 16px; + font-size: 12px; + font-weight: 600; + color: #57606a; +} + +.c3 { + padding-inline-start: 0; +} + +.c0 { + margin: 0; + padding-inline-start: 0; + padding-top: 8px; + padding-bottom: 8px; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding-left: 0; + padding-right: 0; + font-size: 14px; + padding-top: 0; + padding-bottom: 0; + line-height: 20px; + min-height: 5px; + margin-left: 8px; + margin-right: 8px; + border-radius: 6px; + -webkit-transition: background 33.333ms linear; + transition: background 33.333ms linear; + color: #24292f; + cursor: pointer; +} + +.c5[aria-disabled] { + cursor: not-allowed; +} + +.c5 [data-component="ActionList.Item--DividerContainer"] { + position: relative; +} + +.c5 [data-component="ActionList.Item--DividerContainer"]::before { + content: " "; + display: block; + position: absolute; + width: 100%; + top: -7px; + border: 0 solid; + border-top-width: 0; + border-color: var(--divider-color,transparent); +} + +.c5:not(:first-of-type) { + --divider-color: rgba(208,215,222,0.48); +} + +[data-component="ActionList.Divider"] + .c5 { + --divider-color: transparent !important; +} + +.c5:hover:not([aria-disabled]), +.c5:focus:not([aria-disabled]), +.c5[data-focus-visible-added]:not([aria-disabled]) { + --divider-color: transparent; +} + +.c5:hover:not([aria-disabled]) + .c4, +.c5:focus:not([aria-disabled]) + .c5, +.c5[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c6 { + color: #0969da; + -webkit-text-decoration: none; + text-decoration: none; + padding-left: 8px; + padding-right: 8px; + padding-top: 6px; + padding-bottom: 6px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-radius: 6px; + color: inherit; + position: relative; +} + +.c6:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c6:is(button) { + display: inline-block; + padding: 0; + font-size: inherit; + white-space: nowrap; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.c6:hover { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c6[aria-current] { + font-weight: 600; + background-color: rgba(208,215,222,0.24); +} + +.c6[aria-current]::after { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ""; + background-color: #0969da; + border-radius: 6px; +} + +@media (hover:hover) and (pointer:fine) { + .c5:hover:not([aria-disabled]) { + background-color: rgba(208,215,222,0.32); + color: #24292f; + } + + .c5:focus:not([data-focus-visible-added]) { + background-color: rgba(208,215,222,0.24); + color: #24292f; + outline: none; + } + + .c5[data-focus-visible-added] { + outline: none; + border: 2 solid; + box-shadow: 0 0 0 2px #0969da; + } + + .c5:active:not([aria-disabled]) { + background-color: rgba(208,215,222,0.48); + color: #24292f; + } +} + +@media (forced-colors:active) { + .c5:focus { + outline: solid 1px transparent !important; + } +} + +
+ +
+`; From 9bb23544806c2191264275fdf8cc7e611b7fe7bf Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 5 May 2022 16:50:16 -0700 Subject: [PATCH 09/12] Create breezy-cooks-destroy.md --- .changeset/breezy-cooks-destroy.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-cooks-destroy.md diff --git a/.changeset/breezy-cooks-destroy.md b/.changeset/breezy-cooks-destroy.md new file mode 100644 index 00000000000..ef9811a393b --- /dev/null +++ b/.changeset/breezy-cooks-destroy.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add draft of `NavList` component From b3178d58fb9001df7838e974fe9100f63b2122f3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 9 May 2022 15:10:20 -0700 Subject: [PATCH 10/12] Pass props to underlying nav element --- docs/content/NavList.mdx | 9 +++++++-- src/NavList/NavList.tsx | 22 +++++++++------------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 786b2dd7e84..4521b2a9d31 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -262,8 +262,13 @@ function App() { - - + MDN + } + /> ### NavList.Item diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index b91269de882..5a4649eaa62 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -6,20 +6,16 @@ import {ActionList} from '../ActionList' export type NavListProps = { children: React.ReactNode - 'aria-label'?: string - 'aria-labelledby'?: string // sx -} - -const Root = React.forwardRef( - ({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children}, ref) => { - return ( - - ) - } -) +} & React.ComponentProps<'nav'> + +const Root = React.forwardRef(({children, ...props}, ref) => { + return ( + + ) +}) Root.displayName = 'NavList' From a47ce1f7ecbb3222ae58fec5de7d35c9f590f529 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 9 May 2022 15:21:03 -0700 Subject: [PATCH 11/12] Show divider between groups --- src/NavList/NavList.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx index 5a4649eaa62..f3329181e8d 100644 --- a/src/NavList/NavList.tsx +++ b/src/NavList/NavList.tsx @@ -92,7 +92,13 @@ type NavListGroupProps = React.PropsWithChildren<{ // TODO: Dividers between groups // TODO: Forward ref const Group = ({title, children}: NavListGroupProps) => { - return {children} + return ( + <> + {/* Hide divider if the group is the first item in the list */} + + {children} + + ) } Group.displayName = 'NavList.Group' From f9d35dd885cc4b7d0a3902621a63962d61adf412 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 10 May 2022 12:08:27 -0700 Subject: [PATCH 12/12] Update snapshot --- .../__snapshots__/NavList.test.tsx.snap | 102 +++++++++++------- 1 file changed, 62 insertions(+), 40 deletions(-) diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 86b8b8c0f11..d0a6a4e1299 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -260,7 +260,7 @@ exports[`NavList renders a simple list 1`] = ` `; exports[`NavList renders with groups 1`] = ` -.c7 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -275,7 +275,7 @@ exports[`NavList renders with groups 1`] = ` min-width: 0; } -.c8 { +.c9 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -283,14 +283,26 @@ exports[`NavList renders with groups 1`] = ` } .c1 { + height: 1px; + background-color: rgba(208,215,222,0.48); + margin-top: calc(8px - 1px); + margin-bottom: 8px; list-style: none; } -.c1:not(:first-child) { - margin-top: 8px; +.c1:first-child { + display: none; } .c2 { + list-style: none; +} + +.c2:not(:first-child) { + margin-top: 8px; +} + +.c3 { padding-top: 6px; padding-bottom: 6px; padding-left: 16px; @@ -300,7 +312,7 @@ exports[`NavList renders with groups 1`] = ` color: #57606a; } -.c3 { +.c4 { padding-inline-start: 0; } @@ -311,7 +323,7 @@ exports[`NavList renders with groups 1`] = ` padding-bottom: 8px; } -.c5 { +.c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -332,15 +344,15 @@ exports[`NavList renders with groups 1`] = ` cursor: pointer; } -.c5[aria-disabled] { +.c6[aria-disabled] { cursor: not-allowed; } -.c5 [data-component="ActionList.Item--DividerContainer"] { +.c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c5 [data-component="ActionList.Item--DividerContainer"]::before { +.c6 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -351,27 +363,27 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--divider-color,transparent); } -.c5:not(:first-of-type) { +.c6:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c5 { +[data-component="ActionList.Divider"] + .c6 { --divider-color: transparent !important; } -.c5:hover:not([aria-disabled]), -.c5:focus:not([aria-disabled]), -.c5[data-focus-visible-added]:not([aria-disabled]) { +.c6:hover:not([aria-disabled]), +.c6:focus:not([aria-disabled]), +.c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c5:hover:not([aria-disabled]) + .c4, -.c5:focus:not([aria-disabled]) + .c5, -.c5[data-focus-visible-added] + li { +.c6:hover:not([aria-disabled]) + .c5, +.c6:focus:not([aria-disabled]) + .c6, +.c6[data-focus-visible-added] + li { --divider-color: transparent; } -.c6 { +.c7 { color: #0969da; -webkit-text-decoration: none; text-decoration: none; @@ -392,12 +404,12 @@ exports[`NavList renders with groups 1`] = ` position: relative; } -.c6:hover { +.c7:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c6:is(button) { +.c7:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -414,18 +426,18 @@ exports[`NavList renders with groups 1`] = ` appearance: none; } -.c6:hover { +.c7:hover { color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c6[aria-current] { +.c7[aria-current] { font-weight: 600; background-color: rgba(208,215,222,0.24); } -.c6[aria-current]::after { +.c7[aria-current]::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -437,31 +449,31 @@ exports[`NavList renders with groups 1`] = ` } @media (hover:hover) and (pointer:fine) { - .c5:hover:not([aria-disabled]) { + .c6:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #24292f; } - .c5:focus:not([data-focus-visible-added]) { + .c6:focus:not([data-focus-visible-added]) { background-color: rgba(208,215,222,0.24); color: #24292f; outline: none; } - .c5[data-focus-visible-added] { + .c6[data-focus-visible-added] { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c5:active:not([aria-disabled]) { + .c6:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #24292f; } } @media (forced-colors:active) { - .c5:focus { + .c6:focus { outline: solid 1px transparent !important; } } @@ -472,11 +484,16 @@ exports[`NavList renders with groups 1`] = ` class="c0" >