Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Shoelace release 2.1.0 #35

Merged
merged 30 commits into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
2466507
Update <sl-switch> properties, styles, doc site examples
slhinyc Mar 16, 2024
7d59feb
Update <sl-radio> and <sl-radio-group> properties, styles, doc site e…
slhinyc Mar 25, 2024
d41e2b2
Add <sl-checkbox-group> component; related updates to <sl-checkbox>
slhinyc Apr 1, 2024
4d1751f
Updates to Radio, Radio Group, related to new Checkbox Group component
slhinyc Apr 1, 2024
d0168de
Misc doc site example and guidelines updates
slhinyc Apr 1, 2024
d77ee73
Fix 'contained' checkbox group and radio group logic so that existing…
slhinyc Apr 1, 2024
cd4c37f
Update checkbox and radio styles and props to adjust for simpleform w…
slhinyc Apr 2, 2024
e438603
Update Checkbox Group value to store checked state of all nested chec…
slhinyc Apr 2, 2024
9c8de06
Fix token mapping for sl-spacing-large
slhinyc Apr 5, 2024
fb9043e
Update dialog specing, icons, examples, and usage guidelines
slhinyc Apr 8, 2024
c817783
Update `danger` text color token value from 800 to 700
slhinyc Apr 12, 2024
5ce091a
Make sure Checkbox Group checks validity initially
slhinyc Apr 12, 2024
217b672
Fix inconsistent body padding for small dialog with header icon
slhinyc Apr 12, 2024
6e29081
Add usage guidelines for sl-dialog
slhinyc Apr 12, 2024
2cca9bb
Add new `checkbox-group` component
slhinyc Apr 23, 2024
13a8d86
Fix misc failing tests
slhinyc Apr 23, 2024
af0adc3
Add comments to `library.system.ts` so we know which icons have been …
slhinyc Apr 23, 2024
6b45689
Update alert toast stack position and examples
slhinyc Apr 24, 2024
68c9e65
Update dialog padding and font size for small dialog
slhinyc Apr 24, 2024
b842510
Update changelog.md
slhinyc Apr 24, 2024
03f7a92
More alert example updates
slhinyc Apr 25, 2024
8b7ecfb
Update checkbox border color when checkbox has focus
slhinyc Apr 25, 2024
f08d247
Fix padding for "Dialog as Wrapper" example
slhinyc Apr 25, 2024
2b7c573
Hide required asterisk for individual checkboxes
slhinyc Apr 29, 2024
eae74cc
Add `line-height` to Tab style so it doesn't inherit from `body`
slhinyc May 2, 2024
e6f99b7
Update checkbox-group & radio-group tests to fix references to `sl-in…
slhinyc May 3, 2024
884cd5c
Update test description in `checkbox-group.test.ts` to match test
slhinyc May 6, 2024
05d3793
Update to delete unnecessary initializeValue check in validity methods
slhinyc May 6, 2024
e143a47
Update checkbox-group tests to better match radio groups
slhinyc May 6, 2024
f77a382
Update checkbox group and radio group validity examples
slhinyc May 6, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_includes/component.njk
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
{# Guidelines #}
{% if
guidelines %}
<h2>Usage guidelines</h2>
<h2>Usage Guidelines</h2>
<div id="guidelines-content">{{ guidelines | markdown | safe }}</div>
{% endif %}
{# Importing #}
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/default.njk
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
<div class="content__toc">
<ul>
<li class="top">
<a href="#">On this page</a>
<a href="#">{{ meta.title }}</a>
</li>
</ul>
</div>
Expand Down
301 changes: 226 additions & 75 deletions docs/_includes/sidebar.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,72 @@
<li>
<h2>Getting Started</h2>
<ul>
<li><a href="/">Overview</a></li>
<li><a href="/getting-started/installation">Installation</a></li>
<li><a href="/getting-started/usage">Usage</a></li>
<li><a href="/teamshares/contributing">Contributing</a></li>
<li><a href="/teamshares/changelog">Changelog</a></li>
<li>
<a href="/">Overview</a>
</li>
<li>
<a href="/getting-started/installation">Installation</a>
</li>
<li>
<a href="/getting-started/usage">Usage</a>
</li>
<li>
<a href="/teamshares/contributing">Contributing</a>
</li>
<li>
<a href="/teamshares/changelog">Changelog</a>
</li>
</ul>
</li>
<li>
<h2>Tutorials</h2>
<ul>
<li><a href="/teamshares/recipes/protips">Protips</a></li>
<li><a href="/teamshares/view-components/wrapping">View Components</a></li>
<li><a href="/getting-started/form-controls">Form Controls</a></li>
<li><a href="/teamshares/recipes/rails-ujs">Rails UJS</a></li>
<li><a href="/teamshares/recipes/cypress">Cypress</a></li>
<li>
<a href="/teamshares/recipes/protips">Protips</a>
</li>
<li>
<a href="/teamshares/view-components/wrapping">View Components</a>
</li>
<li>
<a href="/getting-started/form-controls">Form Controls</a>
</li>
<li>
<a href="/teamshares/recipes/rails-ujs">Rails UJS</a>
</li>
<li>
<a href="/teamshares/recipes/cypress">Cypress</a>
</li>
</ul>
</li>
<li>
<h2>Teamshares Brand</h2>
<ul>
<li><a href="/teamshares/logo-assets">Logo & Brand Assets</a></li>
<li><a href="/teamshares/content">Content Guidelines</a></li>
<li>
<a href="/teamshares/logo-assets">Logo &amp; Brand Assets</a>
</li>
<li>
<a href="/teamshares/content">Content Guidelines</a>
</li>
</ul>
</li>
<li>
<h2>Styles</h2>
<ul>
<li><a href="/tokens/ts-colors">Colors</a></li>
<li><a href="/tokens/ts-typography">Typography</a></li>
<li><a href="/tokens/ts-spacing">Spacing</a></li>
<li><a href="/tokens/ts-elevation">Elevation</a></li>
<li><a href="/tokens/ts-border-radius">Border Radius</a></li>
<li>
<a href="/tokens/ts-colors">Colors</a>
</li>
<li>
<a href="/tokens/ts-typography">Typography</a>
</li>
<li>
<a href="/tokens/ts-spacing">Spacing</a>
</li>
<li>
<a href="/tokens/ts-elevation">Elevation</a>
</li>
<li>
<a href="/tokens/ts-border-radius">Border Radius</a>
</li>
</ul>
</li>
{#
Expand All @@ -53,74 +87,191 @@
<li>
<h2>Core Components</h2>
<ul>
<li><a href="/components/alert">Alert</a></li>
<li><a href="/components/avatar">Avatar</a></li>
<li><a href="/components/badge">Badge</a></li>
<li><a href="/components/breadcrumb">Breadcrumb</a></li>
<li><a href="/components/breadcrumb-item">Breadcrumb Item</a></li>
<li><a href="/components/button">Button</a></li>
<li><a href="/components/button-group">Button Group</a></li>
<li><a href="/components/card">Card</a></li>
<li><a href="/components/checkbox">Checkbox</a></li>
<li><a href="/components/details">Details (Collapsible Card)</a></li>
<li><a href="/components/dialog">Dialog (Modal)</a></li>
<li><a href="/components/divider">Divider</a></li>
<li><a href="/components/drawer">Drawer</a></li>
<li><a href="/components/dropdown">Dropdown</a></li>
<li><a href="/components/icon">Icon</a></li>
<li><a href="/components/icon-button">Icon Button</a></li>
<li><a href="/components/input">Input</a></li>
<li><a href="/components/menu">Menu</a></li>
<li><a href="/components/menu-item">Menu Item</a></li>
<li><a href="/components/menu-label">Menu Label</a></li>
<li><a href="/components/option">Option</a></li>
<li><a href="/components/progress-bar">Progress Bar</a></li>
<li><a href="/components/radio">Radio</a></li>
<li><a href="/components/radio-button">Radio Button</a></li>
<li><a href="/components/radio-group">Radio Group</a></li>
<li><a href="/components/progress-ring">Progress Ring</a></li>
<li><a href="/components/range">Range</a></li>
<li><a href="/components/rating">Rating</a></li>
<li><a href="/components/select">Select</a></li>
<li><a href="/components/skeleton">Skeleton</a></li>
<li><a href="/components/spinner">Spinner</a></li>
<li><a href="/components/split-panel">Split Panel</a></li>
<li><a href="/components/switch">Switch</a></li>
<li><a href="/components/tab-group">Tab Group</a></li>
<li><a href="/components/tab">Tab</a></li>
<li><a href="/components/tab-panel">Tab Panel</a></li>
<li><a href="/components/tag">Tag</a></li>
<li><a href="/components/textarea">Textarea</a></li>
<li><a href="/components/tooltip">Tooltip</a></li>
<li>
<a href="/components/alert">Alert</a>
</li>
<li>
<a href="/components/avatar">Avatar</a>
</li>
<li>
<a href="/components/badge">Badge</a>
</li>
<li>
<a href="/components/breadcrumb">Breadcrumb</a>
</li>
<li>
<a href="/components/breadcrumb-item">Breadcrumb Item</a>
</li>
<li>
<a href="/components/button">Button</a>
</li>
<li>
<a href="/components/button-group">Button Group</a>
</li>
<li>
<a href="/components/card">Card</a>
</li>
<li>
<a href="/components/checkbox">Checkbox</a>
</li>
<li>
<a href="/components/checkbox-group">Checkbox Group</a>
</li>
<li>
<a href="/components/details">Details (Collapsible Card)</a>
</li>
<li>
<a href="/components/dialog">Dialog (Modal)</a>
</li>
<li>
<a href="/components/divider">Divider</a>
</li>
<li>
<a href="/components/drawer">Drawer</a>
</li>
<li>
<a href="/components/dropdown">Dropdown</a>
</li>
<li>
<a href="/components/icon">Icon</a>
</li>
<li>
<a href="/components/icon-button">Icon Button</a>
</li>
<li>
<a href="/components/input">Input</a>
</li>
<li>
<a href="/components/menu">Menu</a>
</li>
<li>
<a href="/components/menu-item">Menu Item</a>
</li>
<li>
<a href="/components/menu-label">Menu Label</a>
</li>
<li>
<a href="/components/option">Option</a>
</li>
<li>
<a href="/components/progress-bar">Progress Bar</a>
</li>
<li>
<a href="/components/progress-ring">Progress Ring</a>
</li>
<li>
<a href="/components/radio">Radio (Radio Button)</a>
</li>
<li>
<a href="/components/radio-button">Radio Button (Segmented Control)</a>
</li>
<li>
<a href="/components/radio-group">Radio Group</a>
</li>
<li>
<a href="/components/range">Range</a>
</li>
<li>
<a href="/components/rating">Rating</a>
</li>
<li>
<a href="/components/select">Select</a>
</li>
<li>
<a href="/components/skeleton">Skeleton</a>
</li>
<li>
<a href="/components/spinner">Spinner</a>
</li>
<li>
<a href="/components/split-panel">Split Panel</a>
</li>
<li>
<a href="/components/switch">Switch</a>
</li>
<li>
<a href="/components/tab-group">Tab Group</a>
</li>
<li>
<a href="/components/tab">Tab</a>
</li>
<li>
<a href="/components/tab-panel">Tab Panel</a>
</li>
<li>
<a href="/components/tag">Tag</a>
</li>
<li>
<a href="/components/textarea">Textarea</a>
</li>
<li>
<a href="/components/tooltip">Tooltip</a>
</li>
</ul>
</li>
<li>
<h2>Auxiliary Components</h2>
<ul>
<li><a href="/components/carousel">Carousel</a></li>
<li><a href="/components/carousel-item">Carousel Item</a></li>
<li><a href="/components/copy-button">Copy Button</a></li>
<li>
<a href="/components/carousel">Carousel</a>
</li>
<li>
<a href="/components/carousel-item">Carousel Item</a>
</li>
<li>
<a href="/components/copy-button">Copy Button</a>
</li>
<!-- <li><a href="/vendor/data-grid">Data Grid</a></li> -->
<li><a href="/components/image-comparer">Image Comparer</a></li>
<li><a href="/components/qr-code">QR Code</a></li>
<li><a href="/components/tree">Tree</a></li>
<li><a href="/components/tree-item">Tree Item</a></li>
<li>
<a href="/components/image-comparer">Image Comparer</a>
</li>
<li>
<a href="/components/qr-code">QR Code</a>
</li>
<li>
<a href="/components/tree">Tree</a>
</li>
<li>
<a href="/components/tree-item">Tree Item</a>
</li>
</ul>
</li>
<li>
<h2>Utilities</h2>
<ul>
<li><a href="/components/animated-image">Animated Image</a></li>
<li><a href="/components/animation">Animation</a></li>
<li><a href="/components/format-bytes">Format Bytes</a></li>
<li><a href="/components/format-date">Format Date</a></li>
<li><a href="/components/format-number">Format Number</a></li>
<li><a href="/components/include">Include</a></li>
<li><a href="/components/mutation-observer">Mutation Observer</a></li>
<li><a href="/components/popup">Popup</a></li>
<li><a href="/components/relative-time">Relative Time</a></li>
<li><a href="/components/resize-observer">Resize Observer</a></li>
<li><a href="/components/visually-hidden">Visually Hidden</a></li>
<li>
<a href="/components/animated-image">Animated Image</a>
</li>
<li>
<a href="/components/animation">Animation</a>
</li>
<li>
<a href="/components/format-bytes">Format Bytes</a>
</li>
<li>
<a href="/components/format-date">Format Date</a>
</li>
<li>
<a href="/components/format-number">Format Number</a>
</li>
<li>
<a href="/components/include">Include</a>
</li>
<li>
<a href="/components/mutation-observer">Mutation Observer</a>
</li>
<li>
<a href="/components/popup">Popup</a>
</li>
<li>
<a href="/components/relative-time">Relative Time</a>
</li>
<li>
<a href="/components/resize-observer">Resize Observer</a>
</li>
<li>
<a href="/components/visually-hidden">Visually Hidden</a>
</li>
</ul>
</li>
</ul>
</ul>
Binary file added docs/assets/images/confirm-dialog-DO-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/confirm-dialog-DO.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/confirm-dialog-DONT-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/confirm-dialog-DONT.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading