From 52bda73657c6849ebf7baeccda14b14799c463c6 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 28 Sep 2023 16:53:29 -0400 Subject: [PATCH] apply lindsay's tweaks --- docs/pages/components/nav-group.md | 182 +++--------------- docs/pages/components/nav-item.md | 44 +++++ src/components/details/details.styles.ts | 2 +- .../nav-group/nav-group.component.ts | 74 ++----- src/components/nav-group/nav-group.styles.ts | 30 +-- src/components/nav-item/nav-item.component.ts | 96 +++++++-- src/components/nav-item/nav-item.styles.ts | 67 ++++--- 7 files changed, 207 insertions(+), 288 deletions(-) diff --git a/docs/pages/components/nav-group.md b/docs/pages/components/nav-group.md index d906509a7..3de627a24 100644 --- a/docs/pages/components/nav-group.md +++ b/docs/pages/components/nav-group.md @@ -6,11 +6,14 @@ layout: component --- ```html:preview - + + + + Help + + ``` -{% raw %} - -```jsx:react -import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item'; -import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group'; - -export default () => { - return ( - -) -``` - -{% endraw %} - ## Examples -### Nav Group with heading +### Nav Group with label ```html:preview - + Transactions @@ -156,72 +86,4 @@ export default () => { Disputed Charges -``` - -{% raw %} - -```jsx:react -import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item'; -import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group'; - - - - Transactions - - - - Invoices - - - - Disputed Charges - - -``` - -{% endraw %} - -### Nav group with nested nav items - -Use the `expandable` attribute to mark a nav item as expandable. In addition, -you can add a `summary` slot or attribute to display in the `` element prior -to expanding the nav group. - -```html:preview - - - Transactions - - - - Invoices - - - - Disputed Charges - - -``` - -{% raw %} - -```jsx:react -import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item'; -import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group'; - - - - Transactions - - - - Invoices - - - - Disputed Charges - - -``` - -{% endraw %} +``` \ No newline at end of file diff --git a/docs/pages/components/nav-item.md b/docs/pages/components/nav-item.md index 07e19fd32..8524773b8 100644 --- a/docs/pages/components/nav-item.md +++ b/docs/pages/components/nav-item.md @@ -182,3 +182,47 @@ export default () => { ``` {% endraw %} + +### Nav group with nested nav items + +Use the `expandable` attribute to mark a nav item as expandable. In addition, +you can add a `label` slot or attribute to display in the `` element prior +to expanding the nav group. + +```html:preview + + + Transactions + + + + Invoices + + + + Disputed Charges + + +``` + +{% raw %} + +```jsx:react +import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item'; + + + + Transactions + + + + Invoices + + + + Disputed Charges + + +``` + +{% endraw %} \ No newline at end of file diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts index 538081d6e..341b7f07d 100644 --- a/src/components/details/details.styles.ts +++ b/src/components/details/details.styles.ts @@ -75,7 +75,7 @@ export default css` display: none; } - .details__body { + :not(.details--open) .details__body { overflow: hidden; } diff --git a/src/components/nav-group/nav-group.component.ts b/src/components/nav-group/nav-group.component.ts index ac3c6d38a..723c41aa8 100644 --- a/src/components/nav-group/nav-group.component.ts +++ b/src/components/nav-group/nav-group.component.ts @@ -1,9 +1,6 @@ import { html } from 'lit'; -import { LocalizeController } from '../../utilities/localize.js'; import { property } from 'lit/decorators.js'; -import { when } from 'lit/directives/when.js'; import styles from './nav-group.styles.js'; -import WaDetails from '../details/details.component.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; @@ -32,71 +29,22 @@ import type { CSSResultGroup } from 'lit'; export default class WaNavGroup extends WebAwesomeElement { static styles: CSSResultGroup = styles; - static dependencies = { - 'wa-details': WaDetails - }; - - private readonly localize = new LocalizeController(this); - - /** - * The text to display in the summary of the `` element when the nav group is expandable. - */ - @property({ reflect: true }) summary = ''; - /** * The label to display above the nav items slotted in. */ - @property({ reflect: true }) heading = ''; - - /** - * If true, will add a `` element into the shadowRoot that you can slot `` into. - */ - @property({ reflect: true, type: Boolean }) expandable: boolean = false; + @property({ reflect: true }) label = ''; render() { - const isRtl = this.localize.dir() === 'rtl'; + return html` +
+

+ ${this.label} +

- return html`
-

- ${this.heading} -

- - ${when( - this.expandable, - () => html` - -
- ${this.summary} -
- - - - - - - - -
- -
- - `, - () => html` -
- -
- ` - )} -
`; +
+ +
+
+ `; } } diff --git a/src/components/nav-group/nav-group.styles.ts b/src/components/nav-group/nav-group.styles.ts index 243489e5e..9aefba0e8 100644 --- a/src/components/nav-group/nav-group.styles.ts +++ b/src/components/nav-group/nav-group.styles.ts @@ -6,45 +6,29 @@ export default css` :host { display: block; + --gap: 6px; } p { margin: 0; - margin-bottom: 0.25rem; + margin-bottom: var(--wa-space-xs); } .base { color: var(--wa-color-text-normal); + height: 100%; } - .heading { + .label { + font-weight: var(--wa-font-weight-heading); color: var(--wa-color-neutral-text-on-surface); + padding-inline-start: var(--wa-space-xs); } .nav-items { display: flex; flex-direction: column; - gap: 6px; + gap: var(--gap); height: 100%; } - - .details::part(base) { - border-color: transparent; - } - - .details::part(content) { - padding-top: 6px; - padding-inline-start: 2em; - } - - .details::part(header) { - padding: var(--wa-space-square-s); - border-radius: var(--wa-corners-1x); - } - - .details::part(header):hover { - background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover)); - border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover)); - color: var(--wa-color-neutral-text-on-vivid); - } `; diff --git a/src/components/nav-item/nav-item.component.ts b/src/components/nav-item/nav-item.component.ts index f544c4ccc..2666292d7 100644 --- a/src/components/nav-item/nav-item.component.ts +++ b/src/components/nav-item/nav-item.component.ts @@ -5,6 +5,9 @@ import { property, state } from 'lit/decorators.js'; import styles from './nav-item.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; +import { when } from 'lit/directives/when.js'; +import { LocalizeController } from '@shoelace-style/localize'; +import WaDetails from '../details/details.component.js'; /** * @summary A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page navigations. @@ -22,11 +25,17 @@ import type { CSSResultGroup } from 'lit'; export default class WaNavItem extends WebAwesomeElement { static styles: CSSResultGroup = styles; + static dependencies = { + 'wa-details': WaDetails + }; + + private readonly localize = new LocalizeController(this); + /** maps to the underlying ``'s href */ @property() href = ''; /** maps to aria-current="page" */ - @property({ type: Boolean }) active: boolean = false; + @property({ type: Boolean, reflect: true }) active: boolean = false; /** Tells the browser where to open the link. Only used when `href` is present. */ @property() target: '_blank' | '_parent' | '_self' | '_top'; @@ -42,6 +51,17 @@ export default class WaNavItem extends WebAwesomeElement { /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */ @property() download?: string; + /** + * The text to display in the summary of the `` element when the nav item is expandable. + */ + @property({ reflect: true }) label = ''; + + /** + * If true, will add a `` element into the shadowRoot that you can slot `` into. + */ + @property({ reflect: true, type: Boolean }) expandable: boolean = false; + + @state() hasFocus: boolean = false; private handleBlur() { @@ -55,25 +75,63 @@ export default class WaNavItem extends WebAwesomeElement { } render() { + const isRtl = this.localize.dir() === 'rtl'; return html` -
- - - - - +
+ ${when( + this.expandable, + () => html` + +
+ ${this.label} +
+ + + + + + + + +
+ +
+ + `, + () => html` + + + + + + ` + )}
`; } diff --git a/src/components/nav-item/nav-item.styles.ts b/src/components/nav-item/nav-item.styles.ts index be3f6dde2..e0c5b334d 100644 --- a/src/components/nav-item/nav-item.styles.ts +++ b/src/components/nav-item/nav-item.styles.ts @@ -17,14 +17,10 @@ export default css` height: 100%; } - .control { - display: grid; - grid-auto-flow: column; - align-items: center; - justify-content: start; - gap: 8px; - width: 100%; - border: none; + .control, + .details::part(header) { + padding: var(--wa-space-square-xs); + border-radius: var(--wa-corners-1x); font: inherit; font-weight: var(--wa-font-weight-action); text-decoration: none; @@ -35,8 +31,16 @@ export default css` cursor: inherit; color: var(--wa-color-text-normal); line-height: var(--wa-font-height-compact); - padding: var(--wa-space-square-s); - border-radius: var(--wa-corners-1x); + } + + .control { + display: grid; + grid-auto-flow: column; + align-items: center; + justify-content: start; + gap: 8px; + width: 100%; + border: none; } .control::-moz-focus-inner { @@ -47,40 +51,59 @@ export default css` outline: transparent; } - .control:hover { - background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover)); + .details::part(header):is(:active, :hover), + .control:is(:active, :hover) { + background-color: var(--wa-color-neutral-fill-muted-alt); + color: var(--wa-color-text-normal); border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover)); - color: var(--wa-color-neutral-text-on-vivid); - } - - .control:active { - background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active)); - border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active)); } + .details::part(header):focus-visible, .control:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); outline-color: var(--wa-color-neutral-fill-vivid); } - .control.control--active { + .base--active .details::part(header), + .base--active .control { background-color: var(--wa-color-brand-fill-vivid); color: var(--wa-color-brand-text-on-vivid); } - .control--active:focus-visible { + .base--active .details::part(header):focus-visible, + .base--active .control:focus-visible { outline-color: var(--wa-color-brand-fill-vivid); } - .control--active:active { + .base--active .details::part(header):active, + .base--active .control:active { background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active)); border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active)); } - .control--active:hover { + .base--active .details::part(header):hover, + .base--active .control:hover { background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover)); border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover)); color: var(--wa-color-brand-text-on-vivid); } + + .details::part(base) { + border-color: transparent; + } + + .details::part(content) { + padding-top: 6px; + padding-inline-end: 0px; + padding-inline-start: 2em; + } + + + .nav-items { + display: flex; + flex-direction: column; + gap: 6px; + height: 100%; + } `;