From 49d06bdbcd3a71dea286ed734a1d62ae38ccd6cf Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 20 Jun 2024 10:45:39 -0400 Subject: [PATCH 1/7] touch up outline responsive behavior --- docs/assets/styles/docs.css | 4 ---- docs/assets/styles/outline.css | 6 ++++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 67b3775d9..776774c14 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -105,10 +105,6 @@ wa-page[view='desktop'] > #sidebar { max-height: 100%; } -wa-page[view='desktop'] > #outline { - max-width: 240px; -} - #sidebar, #outline { h2 { diff --git a/docs/assets/styles/outline.css b/docs/assets/styles/outline.css index 6f9b7afce..26ee6c274 100644 --- a/docs/assets/styles/outline.css +++ b/docs/assets/styles/outline.css @@ -1,6 +1,5 @@ #outline { order: 2; - padding-inline-end: 2rem; margin-block: 2rem; } @@ -12,6 +11,9 @@ #outline > nav { position: sticky; top: calc(var(--docs-header-height) + 3.5rem); + padding-inline-end: 2rem; + max-width: 240px; + min-width: 240px; } #outline-expandable { @@ -28,7 +30,7 @@ margin-inline-start: 1rem; } -@media screen and (max-width: 1299px) { +@media screen and (max-width: 1199px) { #outline { padding-block: 0.25rem; margin-block-end: -1rem; From 8a15dcb379a4746974d5cf15af09bd23c43bb1df Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 20 Jun 2024 10:51:07 -0400 Subject: [PATCH 2/7] add space after component info --- docs/assets/styles/docs.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 776774c14..5e3f345d0 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -165,6 +165,10 @@ wa-page > main { margin-inline: auto; } +.component-info { + margin-block-end: var(--wa-flow-spacing); +} + /* Current link */ #sidebar, #outline { From 8ab6ffb4e121219bc642759503182cc9d1c5eee2 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 20 Jun 2024 10:59:24 -0400 Subject: [PATCH 3/7] support markdown in component summaries --- docs/_layouts/component.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index bee60ba6a..18685ca69 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -19,7 +19,7 @@

- {{ component.summary }} + {{ component.summary | inlineMarkdown | safe }}

{% endblock %} From 7e5fa4e620f54e924bef2b33e6d63fc6714c42a7 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 20 Jun 2024 11:00:30 -0400 Subject: [PATCH 4/7] fix relative links in summaries --- src/components/breadcrumb-item/breadcrumb-item.ts | 2 +- src/components/carousel-item/carousel-item.ts | 2 +- src/components/option/option.ts | 2 +- src/components/radio-group/radio-group.ts | 2 +- src/components/tab-panel/tab-panel.ts | 2 +- src/components/tree-item/tree-item.ts | 2 +- src/components/tree/tree.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts index b4d74445f..f856cf91e 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.ts @@ -7,7 +7,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; /** - * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links. + * @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links. * @documentation https://shoelace.style/components/breadcrumb-item * @status stable * @since 2.0 diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts index 49237142a..9d0243b85 100644 --- a/src/components/carousel-item/carousel-item.ts +++ b/src/components/carousel-item/carousel-item.ts @@ -6,7 +6,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; /** - * @summary A carousel item represent a slide within a [carousel](/components/carousel). + * @summary A carousel item represent a slide within a [carousel](/docs/components/carousel). * * @since 2.0 * @status experimental diff --git a/src/components/option/option.ts b/src/components/option/option.ts index be3689f04..d157a6c9f 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -10,7 +10,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; /** - * @summary Options define the selectable items within various form controls such as [select](/components/select). + * @summary Options define the selectable items within various form controls such as [select](/docs/components/select). * @documentation https://shoelace.style/components/option * @status stable * @since 2.0 diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 27b914546..c3ca02727 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -18,7 +18,7 @@ import type WaRadio from '../radio/radio.js'; import type WaRadioButton from '../radio-button/radio-button.js'; /** - * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control. + * @summary Radio groups are used to group multiple [radios](/docs/components/radio) or [radio buttons](/docs/components/radio-button) so they function as a single form control. * @documentation https://shoelace.style/components/radio-group * @status stable * @since 2.0 diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts index 548b6dc3d..8b64b1b2c 100644 --- a/src/components/tab-panel/tab-panel.ts +++ b/src/components/tab-panel/tab-panel.ts @@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit'; let id = 0; /** - * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content. + * @summary Tab panels are used inside [tab groups](/docs/components/tab-group) to display tabbed content. * @documentation https://shoelace.style/components/tab-panel * @status stable * @since 2.0 diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts index 5fd410fba..4747000b4 100644 --- a/src/components/tree-item/tree-item.ts +++ b/src/components/tree-item/tree-item.ts @@ -21,7 +21,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup, PropertyValueMap } from 'lit'; /** - * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree). + * @summary A tree item serves as a hierarchical node that lives inside a [tree](/docs/components/tree). * @documentation https://shoelace.style/components/tree-item * @status stable * @since 2.0 diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index e7b8bc4a7..a26c6e3e3 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -50,7 +50,7 @@ function syncCheckboxes(changedTreeItem: WaTreeItem, initialSync = false) { } /** - * @summary Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user. + * @summary Trees allow you to display a hierarchical list of selectable [tree items](/docs/components/tree-item). Items with children can be expanded and collapsed as desired by the user. * @documentation https://shoelace.style/components/tree * @status stable * @since 2.0 From 16cdfbb11b8325d984c0e36705378a940569153c Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 20 Jun 2024 11:10:22 -0400 Subject: [PATCH 5/7] fix relative links --- docs/docs/components/breadcrumb-item.md | 2 +- docs/docs/components/button-group.md | 2 +- docs/docs/components/carousel-item.md | 2 +- docs/docs/components/copy-button.md | 2 +- docs/docs/components/dialog.md | 2 +- docs/docs/components/divider.md | 2 +- docs/docs/components/drawer.md | 2 +- docs/docs/components/dropdown.md | 6 +++--- docs/docs/components/icon-button.md | 2 +- docs/docs/components/menu.md | 6 +++--- docs/docs/components/popup.md | 2 +- docs/docs/components/radio-button.md | 2 +- docs/docs/components/radio-group.md | 6 +++--- docs/docs/components/radio.md | 4 ++-- docs/docs/components/tab-group.md | 2 +- docs/docs/components/tab-panel.md | 2 +- docs/docs/components/tab.md | 2 +- 17 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/docs/components/breadcrumb-item.md b/docs/docs/components/breadcrumb-item.md index 2b8dfcced..a071cd8be 100644 --- a/docs/docs/components/breadcrumb-item.md +++ b/docs/docs/components/breadcrumb-item.md @@ -16,5 +16,5 @@ layout: component ``` :::info -Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb). +Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb). ::: diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index de7f10069..2e09c930e 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -135,7 +135,7 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index 34379d947..af19d6137 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -40,5 +40,5 @@ layout: component ``` :::info -Additional demonstrations can be found in the [carousel examples](/components/carousel). +Additional demonstrations can be found in the [carousel examples](/docs/components/carousel). ::: diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index bf305965b..a4cf36054 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -25,7 +25,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t ### Custom Icons -Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [``](/components/icon) or your own images. +Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [``](/docs/components/icon) or your own images. ```html {.example} diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 0ae560e9b..129ffa6c8 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -127,7 +127,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di ### Header Actions -The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed. +The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed. ```html {.example} diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index 62c7026aa..9fb78d197 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -54,7 +54,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The ### Menu Dividers -Use dividers in [menus](/components/menu) to visually group menu items. +Use dividers in [menus](/docs/components/menu) to visually group menu items. ```html {.example} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index d8d041655..473958041 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -187,7 +187,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d ### Header Actions -The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed. +The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/docs/components/icon-button) if needed. ```html {.example} diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index c5c970920..f74771ee8 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -6,7 +6,7 @@ layout: component Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it. -Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel. +Dropdowns are designed to work well with [menus](/docs/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/docs/components/color-picker)). The API gives you complete control over showing, hiding, and positioning the panel. ```html {.example} @@ -35,7 +35,7 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a ### Getting the Selected Item -When dropdowns are used with [menus](/components/menu), you can listen for the [`wa-select`](/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands. +When dropdowns are used with [menus](/docs/components/menu), you can listen for the [`wa-select`](/docs/components/menu#events) event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands. ```html {.example}