Skip to content

Commit

Permalink
Merge upstream 2.14.0 (#33)
Browse files Browse the repository at this point in the history
* move emphasis

* don't hijack key presses in text fields; fixes shoelace-style#1492 (shoelace-style#1504)

* Fix missing comma in linear-gradient (shoelace-style#1506)

* React import paths (shoelace-style#1507)

* fix react imports in examples

* move types to definition files

* update changelog

* update changelog

* update changelog

* 2.7.0

* JetBrains IDE Integration (shoelace-style#1512)

* upgrade vs code integration package

* add references

* add web-types plugin

* update reference

* run prettier

* update documentation

* run prettier

* remove test script

* fix arg name

* Add docs on setting multiple values in select (shoelace-style#1508)

* update docs

* fix broken tests for shoelace-element (shoelace-style#1516)

* add stub code prior to test

* fix broken test

* prettier

* prettier

* prettier

* Fix NPMDIR config (shoelace-style#1518)

* Fix NPMDIR config

* Add missing semi

* Radio button fix (shoelace-style#1524)

* fix formatting

* fix radio button spacing; fixes shoelace-style#1523

* ignore package.json

* fix(docs): Inline Form Validation Docs throw error on top level await (shoelace-style#1522)

* Update for path changes

see 3a61d20

* Fix lint warnings

* SlTree: separate expand/collapse and selection behaviour in 'single' mode (shoelace-style#1521)

* Never select tree items when clicking the chevron

This changes the behaviour of sl-tree so that clicking on the expand/collapse icon will not select/deselect the item, only toggle it's expanded state.

* Refactor: inline SlTree.syncTreeItems

This was only called from 2 places, and they each had different
behaviour anyways.

* SlTree: separate expand/collapse from selection

This makes 'multi' and 'single' mode consistent with each other, and
with native file managers.

* prettier

* Add HTMLElement to the getTag() return type

* fix tree tests; shoelace-style#1521

* update docs

* Update React Wrappers with Refs that work (shoelace-style#1526)

* fix react types for refs

* fix displayName

* fix displayName]

* attempt to fix typings for React refs

* fix bad type

* prettier

* add changelog entry

* prettier

* Submenus (shoelace-style#1527)

* [RFC] Proof-of-concept commit for submenu support

This is a Request For Comments to seek directional guidance towards
implementing the submenu slot of menu-item.

Includes:
- SubmenuController to manage event listeners on menu-item.
- Example usage in menu-item documentation.
- Trivial tests to check rendering.

Outstanding questions include:
- Accessibility concerns. E.g. where to handle 'ArrowRight',
  'ArrowLeft'?
- Should selection of menu-item denoting submenu be possible or
  customizable?
- How to parameterize contained popup?
- Implementation concerns:
  - Use of ref / id
  - delegation of some rendering to the controller
  - What to test

Related to [shoelace-style#620](shoelace-style#620).

* Update submenu-controller.ts

Removed extraneous `console.log()`.

* PoC working of ArrowRight to focus on submenu.

* Revert "PoC working of ArrowRight to focus on submenu."

(Didn't mean to publish this.)

This reverts commit be04e9a.

* [WIP] Submenu WIP continues.

- Submenus now close on change-of-focus, not a timeout.
- Keyboard navigation support added.
- Skidding fix for better alignment.
- Submenu documentation moved to Menu page.
- Tests for accessibility, right and left arrow keys.

* Cleanup: Removed dead code and dead code comments.

* style: Eslint warnings and errors fixed. npm run verify now passes.

* fix: 2 changes to menu / submenu on-click behavior:

1. Close submenu on click explicitly, so this occurs even if the menu is
   not inside of an sl-dropdown.

2. In menu, ignore clicks that do not explicitly target a menu-item.
   Clicks that were on (e.g. a menu-border) were emitting select events.

* fix: Prevent menu's extraneous Enter / space key propagation.

Menu's handleKeyDown calls item.click (to emit the selection).
Propagating the keyboard event on Enter / space would the cause re-entry
into a submenu, so prevent the needless propagation.

* Submenu tweaks ...

- 100 ms delay when opening submenus on mouseover
- Shadows added
- Distance added to popup to have submenus overlap menu slightly.

* polish up submenu stuff

* stay highlighted when submenu is open

* update changelog

* resolve feedback

---------

Co-authored-by: Bryce Moore <[email protected]>

* remove baseUrl from tsconfig for better dev experience (shoelace-style#1530)

* remove extra react component wrapper, upgrade to v2 of @lit-labs/react (shoelace-style#1531)

* remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module.

* add changelog entry

* prettier

* fix empty attributes in properties table (shoelace-style#1536)

* use <sl-copy-button> (shoelace-style#1535)

* fix copy button focus

* fix plop template

* fix component links; closes shoelace-style#1538

* fix: use verbatimModuleSyntax and isolatedModules (shoelace-style#1534)

* feat: use verbatimModuleSyntax and isolatedModules

* prettier

* remove newline

* prettier

* fix: check `<slot>` elements for assignedElements to allow wrapping focus-trapped elements (shoelace-style#1537)

* fix: internal logic for tabbable checks slotted elements

* prettier

* add better note for generators

* prettier

* fix tests

* prettier

* prettier

* fix tabbable test for safari

* prettier

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <[email protected]>

* Update src/internal/modal.ts

Co-authored-by: Cory LaViska <[email protected]>

* Update src/internal/tabbable.ts

Co-authored-by: Cory LaViska <[email protected]>

---------

Co-authored-by: Cory LaViska <[email protected]>

* remove unused code path (shoelace-style#1539)

* update version

* 2.8.0

* reformat by CEM plugin

* fix stuck search

* log stderr in builds (shoelace-style#1543)

* fix spacing; shoelace-style#1540 (shoelace-style#1544)

* update ctrl/tinycolor; fixes shoelace-style#1542 (shoelace-style#1545)

* show errors in dev server (shoelace-style#1547)

* show errors in dev server

* fix build

* prettier

* fix web-types reference

* clean up messaging

* simplify implementation

* fix: make German translation more consistent + neutral (shoelace-style#1558)

In German you can say "Du" (=informal) or "Sie" (= formal). Before this commit both versions were used at the same time. It is preferred to make interfaces neutral, as some systems use "Du" (iOS, macOS) and some "Sie" (MS, Android). In addition all other translations were neutral, too, so this makes it more consistent.

* remove webtypes

* update bootstrap icons

* fix(autoloader): only attempt to register root element if it's shoelace element (shoelace-style#1563)

* update changelog

* updated react wrapper (shoelace-style#1565)

- updated @lit-labs/react to latest version with improved type compatibility
- added small preact section to the react docs with link to preact/compat typescript config guide

* fix: add missing super.disconnectCallback() calls (shoelace-style#1564)

* fixes shoelace-style#1548

* ONLY-USE: Fix bug: svg url treated as sprite

* Fixed typo (Alert doc): "take affect" -> "take effect" (shoelace-style#1578)

One of the examples given in the documentation for Alerts says "Settings will take **affect** on next login". Which is a typo since affect is a verb, not a noun.

* fix words; shoelace-style#1578

* fixes shoelace-style#1576

* add support for external modals; fixes shoelace-style#1571 (shoelace-style#1575)

* rename private var; shoelace-style#1572

* update changelog

* update version

* 2.9.0

* update changelog

* ignore package.json

* fix localize bug

* comma separate exportparts (shoelace-style#1586)

Fixes shoelace-style#1585.

* update changelog

* add PR

* fix focus trapping to respect the currently focused element (shoelace-style#1583)

* fix focus trapping to respect the currently focused element

* prettier

* remove index.html

* fix activeElements

* prettier

* update changelog

* prettier

* add docs for web-types (shoelace-style#1608)

* add docs for web-types

* add missing word

* Create zh-cn.ts (shoelace-style#1604)

* update changelog

* Add safe triangle for submenu selection (shoelace-style#1600)

* add safe triangle; fixes shoelace-style#1550

* make z-index relative to submenu

* refactor submenu properties

* Fire `sl-select` when clicking an element inside a menu-item (shoelace-style#1599)

* Fire sl-select when clicking an element inside a menu-item

* changelog + remove unused code

* prettier

* prettier

---------

Co-authored-by: Cory LaViska <[email protected]>

* update deps (all but majors)

* typescript + esbuild updates

* lit 3, eslint, lint-stages updates

* update prettier

* update plop, ora, sinon

* Updated @lit-labs/react to @lit/react now as this is stable

* Updated @lit-labs/react to @lit/react now as this is stable

* remove whitespace

* use discussions for features

* Fix `tabbable` performance issues in Chrome / Edge (shoelace-style#1614)

* fix: improve tabbable performance

* add note about composed-offset-position

* update package.json

* prettier

* prettier

* prettier

* update changelog

* Update carousel.md to document the default aspect ratio of 16/9. (shoelace-style#1617)

* remove unused dep

* update default

* update comments

* oh, safari (shoelace-style#1655)

* update version

* prettier

* 2.10.0

* Create hr.ts (shoelace-style#1656)

* update changelog

* don't block escape; fixes shoelace-style#1607 (shoelace-style#1661)

* Fix placeholder color in sl-select (shoelace-style#1667)

* fix placeholder color in sl-select

* add issue number

* fix details example

* fix empty react index; closes shoelace-style#1659 (shoelace-style#1663)

* Update angular.md (shoelace-style#1670)

Added more instructions for clearity about what to do

* prettier

* update version

* prettier

* 2.11.0

* fix script in docs; closes shoelace-style#1670

* Update angular.md (shoelace-style#1671)

removed the < brackets

Co-authored-by: Cory LaViska <[email protected]>

* fix: multiple slides per page navigation (shoelace-style#1605)

* fix(carousel): change navigation logic

* chore: update tests

* chore: create polyfill for scrollend

* chore: add unit tests and clean up

* chore: leftover

* chore: minor fix

* chore: avoid initialization for clones

* fix(carousel): update page navigation logic

* chore(carousel): revert change

* chore(carousel): minor changes

* chore: update pagination logic

* fix: enforce slidesPerMove value

* update changelog

* remove ts-check

* fix cspell and ts

* fix slotted image dimensions

* update version

* 2.11.1

* fix(carousel): add instance check to isCarouselItem (shoelace-style#1684)

* update changelog

* 2.11.2

* fix issues with no translation errors for bundled components (shoelace-style#1696)

* only emit sl-change when you stop dragging (shoelace-style#1689)

* only emit sl-change when you stop dragging

* only emit sl-change when you stop dragging

* prettier

* add changelog entry

* update changelog

* update changelog

* update changelog

* upgrade jet brains plugin and stop writing to package.json

* Add loading attribute to menu-item

* Updates copy button with Bootstrap Icons 1.11 (shoelace-style#1702)

* update changelog

* Keep text shown

* fix form controls to read from property instead of attribute (shoelace-style#1707)

* fix form controls to read from properties and attributes

* update changelog

* prettier

* update changelog

* prettier

* small comment fix

* Fix form controls entering / leaving a form (shoelace-style#1708)

* fix dynamic form controls

* update comment

* add form.checkValidity()

* prettier

* Fix React .d.ts files to import from valid path; fixes shoelace-style#1713 (shoelace-style#1714)

* Fix nested dialogs (shoelace-style#1711)

* fix nested dialog focus

* fix nested dialog focus

* fix nested dialog focus

* prettier

* remove index.html

* fix tests

* prettier

* add two-way binding info back

* removes duplicative style declaration in the skeleton component (shoelace-style#1722)

* Add italian translations (shoelace-style#1727)

Co-authored-by: Andrea Folini <[email protected]>

* update changelog

* prettier

* update WTR

* temp disable webkit

* re-enable webkit tests

* update playwright version for webkit

* update playwright install cmd

* fix

* update deprecated properties

* skip because firefox

* skip because ff

* skip ff

* 2.12.0

* Small typo (shoelace-style#1728)

* Fix 'controlled' typo (shoelace-style#1735)

* more ff test skips

* restore ff tests

* try node 20

* revert

* fix a11y error

* temporarily disable FF in Web Test Runner

* prettier

* Run web test runner with production modules (shoelace-style#1736)

* Run web test runner with production modules

* prettier

* Reduce size

* Improve tooltip accessibility (shoelace-style#1749)

* always close on escape, even when not focused; shoelace-style#1734

* use fallbacks instead of defaults

* add words

* add safe trapezoids / hover bridge; fixes shoelace-style#1734

* oh, webkit

* remove unused import

* cleanup just in case

* Fixes `setRangeText()` in `<sl-input>` and `<sl-textarea>` (shoelace-style#1752)

* fix setSelectionRange(); fixes shoelace-style#1746

* remove comment

* remove console.log

* remove unused style

* Further improve tabbable performance (shoelace-style#1750)

* improve tabbable performance

* improve tabbable performance

* add PR #

* prettier

* change to getSlottedChildrenOutsideRootElement

* prettier

* Make sure `<sl-select>` closes when focusing out (shoelace-style#1764)

* fixes shoelace-style#1763

* fix comment

* 🤷🏻‍♂️

* whatever wtr

* Add .d.ts files to theme style.js files (shoelace-style#1767)

* prettier

* moar prettier

* No more pipes (shoelace-style#1771)

* a little whitespace never hurt nobody

* remove pipes from docs

* fix trimPipes

* update; shoelace-style#1700

* Account for elements with tabbable controls (shoelace-style#1755)

* account for elements with tabbable controls

* prettier

* add changelog entry

* prettier

* Add missing extensions (shoelace-style#1770)

* fix(typescript): add missing extension to imports in typescript

This is required for the types to work with the new
`--module-resolution=node16`.

The list of places to fix was obtained by a crude script:

```sh
rg -g'**/*.ts' -g'!**/*.test.ts' ' from\s+.\.' | rg -v '\.js'
```

References shoelace-style#1765

* add missing extensions

* revert tsconfig

* prettier

* fix test files for NodeNext

* prettier

* changelog entry

* prettier

* prettier

* prettier

---------

Co-authored-by: Andrey Lushnikov <[email protected]>

* fix(spinner): fix spinner animation, prevent spinner resize in flex containers (shoelace-style#1787)

* update settings

* update changelog; shoelace-style#1787

* reformat comment

* fix typo

* fixes shoelace-style#1730 (shoelace-style#1820)

* fixes shoelace-style#1805 (shoelace-style#1821)

* fixes shoelace-style#1795 (shoelace-style#1822)

* fixes shoelace-style#1823 (shoelace-style#1826)

* fixes shoelace-style#1779 (shoelace-style#1828)

* fix(color-picker): add missing percent signs (shoelace-style#1831)

* update changelog

* Add Radio Group `help-text` slot documentation (shoelace-style#1818)

* add vue types (shoelace-style#1797)

* add vue types

* run prettier

* add postinstall script for playwright

* Update docs/pages/frameworks/vue.md

---------

Co-authored-by: Cory LaViska <[email protected]>

* fix(carousel): fix issues with safari (shoelace-style#1748)

* fix(carousel): fix scrollend polyfill

* fix(carousel): refactor mouse dragging

* chore: revert original mouse dragging implementation

* fix: add workaround for safari

* chore: add unit tests

* chore: minor changes

* chore: revert change

* chore: skip test case

* chore: revert changes to docs

* chore: remove leftover

* update changelog; shoelace-style#1748

* fix dialog focus trapping behavior (shoelace-style#1813)

* fix dialog focus trapping behavior

* add changelog entry

* prettier

* remove duplicate 'disabled' check in tabbable

* fix dialog stuff

* prettier

* fix logic around checking active elements

* prettier

* prettier

* remove cusrtom-elements.mjs

---------

Co-authored-by: Cory LaViska <[email protected]>

* Fixing the initial values on doc (shoelace-style#1785)

This commit replaces the string-based 'value' prop with an array in the documentation example related to multiple selection in Shoelace's React components.

* internals: refactor stop animations resolve mechanism (shoelace-style#1780)

* internals: refactor stop animations resolve mechanism

* remove cancel/finish listeners from stop animations function

* Use close watcher when supported in place of escape key handlers (shoelace-style#1788)

* Use close watcher when supported in place of escape key handlers

* Update src/components/select/select.component.ts

---------

Co-authored-by: Cory LaViska <[email protected]>

* update changelog

* prettier

* ignore types

* whitespace

* don't ignore

* remove old test

* remove unused import

* 2.13.0

* no more tomatoes (shoelace-style#1836)

* 2.13.1

* remove html from getTextLabel() (shoelace-style#1840)

* fix animated image documentation for CSS part (shoelace-style#1838)

* add switch help text (shoelace-style#1800)

* Add checkbox help text (shoelace-style#1860)

* add help text to sl-checkbox to match sl-switch

* add missing import

* locale: add Arabic translation (shoelace-style#1852)

* update changelog

* update changelog

* fix(carousel): remove check for scrolling (shoelace-style#1862)

* update changelog

* fix help text a11y

* Import styles more efficiently (shoelace-style#1861)

* import styles more efficiently; fixes shoelace-style#1692

* remove scale transition

* add missing import to template

* remove styles from template

* update install event from `postinstall` to `prepare` (shoelace-style#1868)

* update lock file

* update version

* 2.14.0

* Updated package-lock

* Working locally

* Update `<sl-spinner>` merge conflict changes after reviewing locally

* Interim fix for Checkbox label alignment; Add back checkbox help text example

* Replace Checkbox `description` slot with `help-text`

* Re-add Switch and Menu Item examples missed during merge

* Commenting out unused methods

* Prettier

* Update spinner.test.ts

---------

Co-authored-by: Cory LaViska <[email protected]>
Co-authored-by: king8fisher <[email protected]>
Co-authored-by: Burton Smith <[email protected]>
Co-authored-by: Alexander Krolick <[email protected]>
Co-authored-by: Konnor Rogers <[email protected]>
Co-authored-by: Peter Siska <[email protected]>
Co-authored-by: Thomas Allmer <[email protected]>
Co-authored-by: nathan <[email protected]>
Co-authored-by: Stephen Sugden <[email protected]>
Co-authored-by: Bryce Moore <[email protected]>
Co-authored-by: Burton Smith <[email protected]>
Co-authored-by: Mario Hamann <[email protected]>
Co-authored-by: Wes <[email protected]>
Co-authored-by: Alan Chambers <[email protected]>
Co-authored-by: Christian Schuller <[email protected]>
Co-authored-by: Yehuda Ringler <[email protected]>
Co-authored-by: mfocqueteau <[email protected]>
Co-authored-by: Cam Skene <[email protected]>
Co-authored-by: jarviszheng <[email protected]>
Co-authored-by: Christian Schilling <[email protected]>
Co-authored-by: John F Morton <[email protected]>
Co-authored-by: fountainpen <[email protected]>
Co-authored-by: floflausch <[email protected]>
Co-authored-by: Alessandro <[email protected]>
Co-authored-by: Mitch Ray <[email protected]>
Co-authored-by: Henry Wilkinson <[email protected]>
Co-authored-by: Coridyn <[email protected]>
Co-authored-by: Nick Lemmon <[email protected]>
Co-authored-by: folini96 <[email protected]>
Co-authored-by: Andrea Folini <[email protected]>
Co-authored-by: Rikard Kling <[email protected]>
Co-authored-by: Matt Obee <[email protected]>
Co-authored-by: Ryan <[email protected]>
Co-authored-by: Andrey Lushnikov <[email protected]>
Co-authored-by: Michael Warren <[email protected]>
Co-authored-by: clintcs <[email protected]>
Co-authored-by: YassSSH <[email protected]>
Co-authored-by: Matin <[email protected]>
Co-authored-by: Luke Warlow <[email protected]>
Co-authored-by: Ahmad Alfy <[email protected]>
Co-authored-by: Sara <[email protected]>
  • Loading branch information
Show file tree
Hide file tree
Showing 191 changed files with 8,785 additions and 7,303 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npx playwright install-deps
- run: npx playwright install --with-deps
- run: npm ci
- run: npm run verify
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
_site
.cache
.DS_Store
package.json
package-lock.json
cdn
dist
docs/assets/images/sprite.svg
Expand Down
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"cSpell.words": ["Teamshares"],
"html.suggest.html5": true,
Expand Down
1 change: 1 addition & 0 deletions cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
"monospace",
"mousedown",
"mousemove",
"mouseout",
"mouseup",
"multiselectable",
"nextjs",
Expand Down
4 changes: 4 additions & 0 deletions custom-elements-manifest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export default {
}
}
},

{
name: 'shoelace-react-event-names',
analyzePhase({ ts, node, moduleDoc }) {
Expand All @@ -166,6 +167,7 @@ export default {
}
}
},

{
name: 'shoelace-translate-module-paths',
packageLinkPhase({ customElementsManifest }) {
Expand Down Expand Up @@ -202,6 +204,7 @@ export default {
});
}
},

// Generate custom VS Code data
customElementVsCodePlugin({
outdir,
Expand All @@ -216,6 +219,7 @@ export default {
customElementJetBrainsPlugin({
outdir: './dist',
excludeCss: true,
packageJson: false,
referencesTemplate: (_, tag) => {
return {
name: 'Documentation',
Expand Down
149 changes: 72 additions & 77 deletions docs/_includes/component.njk
Original file line number Diff line number Diff line change
@@ -1,75 +1,62 @@
{% extends "default.njk" %}

{# Find the component based on the `tag` front matter #}
{% set component =
getComponent('sl-' + page.fileSlug) %}
{% set component = getComponent('sl-' + page.fileSlug) %}

{% block content %}
{# Determine the badge variant for code status #}
{% if
component.status == 'stable' %}
{% if component.status == 'stable' %}
{% set badgeVariant = 'primary' %}
{% elseif component.status == 'experimental' %}
{% set badgeVariant = 'warning' %}
{% elseif component.status == 'planned' %}
{% set badgeVariant = 'neutral' %}
{% elseif
component.status == 'deprecated' %}
{% elseif component.status == 'deprecated' %}
{% set badgeVariant = 'danger' %}
{% else %}
{% set badgeVariant = 'neutral' %}
{% endif %}

{# Determine the badge variant for pattern status #}
{% if component.pattern.length %}
{% if component.pattern == 'stable' %}
{% set patternBadgeVariant = 'primary' %}
{% elseif component.pattern == 'in review' %}
{% set
patternBadgeVariant = 'neutral' %}
{% set patternBadgeVariant = 'neutral' %}
{% else %}
{% set patternBadgeVariant = 'danger' %}
{% endif %}
{% else %}
{% set
patternBadgeVariant = 'danger' %}
{% set patternBadgeVariant = 'danger' %}
{% endif %}

{# Determine the badge variant for figma status #}
{% if
component.figma.length %}
{% if component.figma.length %}
{% if component.figma == 'ready' %}
{% set figmaBadgeVariant = 'success' %}
{% elseif
component.figma == 'draft' %}
{% elseif component.figma == 'draft' %}
{% set figmaBadgeVariant = 'warning' %}
{% else %}
{% set figmaBadgeVariant = 'danger' %}
{% endif %}
{% else %}
{% set figmaBadgeVariant = 'danger' %}
{% endif %}

{# Header #}
<header class="component-header">
<div class="component-header__info">
<sl-tag variant="neutral" size="small" pill> Since Shoelace {{component.since or '?' }}
<sl-tag variant="neutral" size="small" pill>
Since Shoelace {{component.since or '?' }}
</sl-tag>
<sl-tag size="small" variant="{{ badgeVariant }}" pill style="text-transform: capitalize">
Code {{ component.status }}
<sl-tag size="small" variant="{{ badgeVariant }}" pill style="text-transform: capitalize" >
Code {{ component.status }}
</sl-tag>
<sl-tag
size="small"
variant="{{ patternBadgeVariant }}"
pill
style="text-transform: capitalize"
class="{% if component.pattern == 'hide' %}hidden{% endif %}"
>
Pattern {{ component.pattern or 'Tentative' }}
<sl-tag size="small" variant="{{ patternBadgeVariant }}" pill style="text-transform: capitalize" class="{% if component.pattern == 'hide' %}hidden{% endif %}" >
Pattern {{ component.pattern or 'Tentative' }}
</sl-tag>
<sl-tag
size="small"
variant="{{ figmaBadgeVariant }}"
pill
style="text-transform: capitalize"
class="{% if component.figma == 'hide' %}hidden{% endif %}"
>
Figma {{ component.figma or 'Needed' }}
<sl-tag size="small" variant="{{ figmaBadgeVariant }}" pill style="text-transform: capitalize" class="{% if component.figma == 'hide' %}hidden{% endif %}" >
Figma {{ component.figma or 'Needed' }}
</sl-tag>
</div>
<h1>{{ component.name | classNameToComponentName }}</h1>
Expand All @@ -87,20 +74,20 @@ component.figma == 'draft' %}

{# Main Markdown Content #}
{{ content | safe }}

{# Guidelines #}
{% if guidelines %}
{% if
guidelines %}
<h2>Guidelines</h2>
<div id="guidelines">
{{ guidelines | markdown | safe }}
</div>
<div id="guidelines">{{ guidelines | markdown | safe }}</div>
{% endif %}
{# Importing #}
<h2>Importing</h2>
<p>
If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any
of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
</p>
If you're using the autoloader or the traditional loader, you can ignore this
section. Otherwise, feel free to use any of the following snippets to
<a href="/getting-started/installation#cherry-picking">cherry pick</a> this
component.
</p>

<sl-tab-group>
<sl-tab slot="nav" panel="script">Script</sl-tab>
Expand All @@ -110,29 +97,41 @@ component.figma == 'draft' %}

<sl-tab-panel name="script">
<p>
To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
using a script tag:
</p>
To import this component from
<a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace"
>the CDN</a
>
using a script tag:
</p>
<pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
</sl-tab-panel>

<sl-tab-panel name="import">
<p>
To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
using a JavaScript import:
</p>
To import this component from
<a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace"
>the CDN</a
>
using a JavaScript import:
</p>
<pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
</sl-tab-panel>

<sl-tab-panel name="bundler">
<p>
To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
</p>
To import this component using
<a href="{{ rootUrl('/getting-started/installation#bundling') }}"
>a bundler</a
>:
</p>
<pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
</sl-tab-panel>

<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
<p>
To import this component as a
<a href="/frameworks/react">React component</a>:
</p>
<pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
</sl-tab-panel>
</sl-tab-group>
Expand Down Expand Up @@ -166,15 +165,17 @@ component.figma == 'draft' %}
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em>
</p>
{% endif %}

{# Properties #}
{% if component.properties.length %}
<h2>Properties</h2>
{% if unusedProperties.length %}
<div role="alert" class="callout callout--warning">
<p>
<strong>Note</strong>: The following appear as options in the Properties table but are currently not part of the
Teamshares Design System. Please check with the design team before using these options:
</p>
<strong>Note</strong>: The following appear as options in the Properties
table but are currently not part of the Teamshares Design System. Please
check with the design team before using these options:
</p>
{{ unusedProperties | markdown | safe }}
</div>
{% endif %}
Expand All @@ -198,7 +199,8 @@ component.figma == 'draft' %}
<td>
<code class="nowrap">{{ prop.name }}</code>
{% if prop.attribute | length > 0 %}
{% if prop.attribute != prop.name %}
{% if prop.attribute != prop.name
%}
<br/>
<sl-tooltip content="This attribute is different from its property">
<small>
Expand All @@ -210,17 +212,15 @@ component.figma == 'draft' %}
{% endif %}
{% endif %}
</td>
<td>
{{ prop.description | markdownInline | safe }}
</td>
<td>{{ prop.description | markdownInline | safe }}</td>
<td style="text-align: center">
{% if prop.reflects %}
<sl-icon label="yes" name="check-lg"></sl-icon>
{% endif %}
</td>
<td>
{% if prop.type.text %}
<code>{{ prop.type.text | markdownInline | safe }}</code>
<code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
{% else %} - {% endif %}
</td>
<td>
Expand All @@ -235,9 +235,8 @@ component.figma == 'draft' %}
<code>updateComplete</code>
</td>
<td>
A read-only promise that resolves when the component has
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
</td>
A read-only promise that resolves when the component has <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
</td>
<td></td>
<td></td>
<td></td>
Expand All @@ -246,12 +245,10 @@ component.figma == 'draft' %}
</table>

<p>
<em
>Learn more about
<a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em
>
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}" >attributes and properties</a >.</em>
</p>
{% endif %}

{# Events #}
{% if component.events.length %}
<h2>Events</h2>
Expand All @@ -277,7 +274,7 @@ component.figma == 'draft' %}
<td>{{ event.description | markdownInline | safe }}</td>
<td>
{% if event.type.text %}
<code>{{ event.type.text }}</code>
<code>{{ event.type.text | trimPipes }}</code>
{% else %} - {% endif %}
</td>
</tr>
Expand All @@ -289,6 +286,7 @@ component.figma == 'draft' %}
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em>
</p>
{% endif %}

{# Methods #}
{% if component.methods.length %}
<h2>Methods</h2>
Expand All @@ -312,7 +310,7 @@ component.figma == 'draft' %}
{% if method.parameters.length %}
<code>
{% for param in method.parameters %}
{{ param.name }}: {{ param.type.text }}
{{ param.name }}: {{ param.type.text | trimPipes }}
{% if not loop.last %},{% endif %}
{% endfor %}
</code>
Expand All @@ -327,6 +325,7 @@ component.figma == 'draft' %}
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em>
</p>
{% endif %}

{# Custom Properties #}
{% if component.cssProperties.length %}
<h2>Custom Properties</h2>
Expand All @@ -353,12 +352,10 @@ component.figma == 'draft' %}
</table>

<p>
<em
>Learn more about
<a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em
>
<em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em>
</p>
{% endif %}

{# CSS Parts #}
{% if component.cssParts.length %}
<h2>Parts</h2>
Expand All @@ -383,11 +380,10 @@ component.figma == 'draft' %}
</table>

<p>
<em
>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em
>
<em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em>
</p>
{% endif %}

{# Animations #}
{% if component.animations.length %}
<h2>Animations</h2>
Expand All @@ -412,11 +408,10 @@ component.figma == 'draft' %}
</table>

<p>
<em
>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em
>
<em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em>
</p>
{% endif %}

{# Dependencies #}
{% if component.dependencies.length %}
<h2>Dependencies</h2>
Expand Down
Loading

0 comments on commit fffaa40

Please sign in to comment.