Skip to main content
Changelog
2.3.0
-
Documentation and Figma Code Connect updates (no visible changes to components)
- Set up Figma Code Connect for some components
- Add Cypress testing docs to several form-related components
-
Add separate
TS Form
code example panel for components that can be rendered with
ts_form_for
-
Update string syntax in Slim code examples to use boolean (e.g.
open=true
instead of
open='true'
)
-
Add code example for
sl-drawer
opened from sl-dropdown
with button trigger
-
Minor component styling updates
- Update
sl-divider
default color
- Update size of close icon (x) in
sl-alert
- Update
sl-tag
font weight to medium
-
Update spacing and hover state for
sl-tab-group
and sl-tab
to match
ViewComponent Tab
2.2.1
-
Bump to update
package-lock.json
file + update docs to make sure this step isn’t forgotten
next time
2.2.0
-
Update
text
variant of sl-button
to strip all padding so that it aligns better
with other elements on the screen
- Add Link page for documentation of default link style and link button options
-
Fix
sl-checkbox
and sl-radio
bug where a contained
checkbox or
radio had a hover state even when disabled
- Fix padding cascade bug for
sl-dialog
body for announcement
variant
-
Fix
sl-button
bug where a disabled link (a
) button still opens the
href
link
-
Misc doc site improvements
- Update props tables to be more readable with no scrolling
- Add “no footer” and default width examples to
sl-dialog
docs
- Fix bug where Event names are hidden when
SLIM
preview is selected
-
Fix bug where icon doesn’t display for component properties where
reflect
is
true
- Fix bug where some pages don’t have a page title showing in the sidebar
2.1.2
-
Fix to fix spacing for
sl-checkbox
when nested in sl-checkbox-group
with Simple
Form (ts_form_for
)
2.1.1
-
Minor updates to
sl-checkbox-group
-
Update how checkbox group value is stored, to match how the Simple Form checkboxes collection stores
values
-
Update
sl-checkbox
styling so that if the parent Checkbox Group is
data-user-invalid
, all slotted checkboxes in the group are styled as
data-user-invalid
-
Misc bug fixes 🐞
-
Remove margin-top from
sl-checkbox
when not nested in a sl-checkbox-group
- Remove unnecessary padding from
sl-dialog
with header icon for mobile screens
-
Fix wrong class reference for
sl-checkbox-group
(was using
sl-radio-group
class)
- Minor doc site example updates to
Checkbox Group
and Checkbox
-
Update doc site sidebar link to Github to always point to
teamshares/shoelace
rather than a
(wrong) tag
2.1.0
-
Upstream merge, going from 2.11.2 -> 2.14.0. Most of the changes are pretty minor. See the
upstream changelog
for details.
-
Also the following component and documentation page updates:
-
Alert
- Change default
sl-toast-stack
placement from top right to bottom right
- Update examples to better align with our pattern usage
-
Checkbox and Checkbox Group
-
Add new
sl-checkbox-group
component with form component decorators (help text, label
with tooltip, context note) and contained
and horizontal
options
- Update
sl-checkbox
to make it work with new sl-checkbox-group
-
Dialog
- Add more examples
- Fix bottom spacing for no-footer dialog
- Fix body spacing for dialog with header icon
- Make body style consistent (
body-1
) across all dialog sizes
- Update body text color to
ts-text-default
(from ts-text-subdued
)
-
Input
- Add
label-tooltip
and context-note
slots and attributes
- Add new type
currency
with default prefix and suffix elements
-
Add default prefix icon options to types
email
, tel
, and
search
-
Update documentation examples to call out or hide unused patterns (
pill
,
filled
, size small
)
- Add icon & usage guidelines
- Moved styles from
overrides.css
into component styles.ts
file
- Minor styling updates
-
Menu, Menu Item, Menu Label
- Update documentation examples
- Add icon guidelines
- Moved styles from
overrides.css
into component styles.ts
file
- Minor styling updates
-
Option
- Update documentation examples
- Add icon guidelines
- Moved styles from
overrides.css
into component styles.ts
file
- Minor styling updates
-
Radio and Radio Group
- Add
horizontal
layout option to Radio Group
- Add new form component decorators help text, label with tooltip, context note)
-
Select
- Add
label-tooltip
and context-note
slots and attributes
-
Update documentation examples to call out or hide unused patterns (
pill
,
filled
, size small
)
- Add icon & usage guidelines
- Moved styles from
overrides.css
into component styles.ts
file
- Minor styling updates
-
Switch
-
Add new
label-position
options: left
and left-justified
- Update examples
-
Textarea
- Add
label-tooltip
and context-note
slots and attributes
-
Update documentation examples to call out or hide unused patterns (
filled
, sizes
small
, large
)
- Moved styles from
overrides.css
into component styles.ts
file
- Minor styling updates
-
Misc
- Bump Font Awesome registry to v6.5.0
-
Replace system icons with Font Awesome svgs
eye
, eye-slash
(used in password
Input)
x-circle-fill
(used in clearable
Input)
chevron-down
(used in Select)
checked
(used in Checkbox)
x-lg
(used in Alert, Dialog, Drawer, Tab, and Tag)
-
Add new system icon
checked-option
for use in Option and Menu to show selected
options and menu items
2.0.2
- Fix:
sl-spinner
not rendering correctly in Safari
2.0.1
-
Fix: Support for clickable links and buttons in the
summary
slot of sl-details
.
- Improved design for
sl-spinner
- Added CODEOWNERS to automatically tag reviewers
2.0.0
-
MASSIVE set of changes from upstream (jumping from 2.5.0 > 2.11.2). This included a
big restructuring of the codebase in upstream 2.6.0, which moved the component code into separate
name.component.ts
files. Lots of other files got moved around, the build process changed, and
the docs site is now using eleventy. Please see the upstream change logs for more details.
-
Also the following component and documentation page updates:
-
Badge
- Update styling
- Add new color theme variants: red (default) and gray
- Map existing semantic variants to newly added colors (neutral = gray, danger = red)
-
Make
pill
option the default; add square
boolean to display a square
badge
-
If you were previously using the
pill
boolean to display a pill badge, you can
now delete that boolean from your sl-badge
.
-
If you were previously using the default square badge, you’ll need to add a
square
boolean to get the square badge back. (Note: The square badge is not a
standard Teamshares Design System pattern, so please check with the designer on your team
about this usage).
- Add new value attribute to auto-format numbers > 99
-
Button
- Move styles from overrides.css into main component styles file
-
Update styling for default outline button so that it can be used for the Radio Button (segmented
radio)
-
Card
- Update styling (increase header padding)
-
Dialog
- Move styles from overrides.css into main component styles file
- Add new sizes: small, medium (default), large
- Add new type variants: default (default), warning, announcement
- Add optional header-icon slot to display an icon to the left of the dialog title
-
Tooltip
-
Docs
- Add new usage guidelines to Alert, Badge, and Tag
-
Update examples / hide irrelevant examples from doc pages for Badge, Breadcrumb, Breadcrumb
Item,Card, Details (Collapsible card), Dialog (Modal), Icon
-
Add helper tips and warning alerts above examples to highlight patterns that are available with
Shoelace but aren’t standard options for the Teamshares Design System
-
Show alert above Properties table when component has unused properties (to discourage use of
properties that still work but aren’t part of the Teamshares Design System)
1.3.1
-
Button
- Remove default icon size increase for small buttons
1.3.0
-
Alert
- Update styling
- Add optional
header
slot
-
Breadcrumb
- Update styling
- Change default separator to
/
-
Card
-
Details
-
Tab
-
Tag
- Update styling
-
Add new color variants:
blue
, green
, gray
, yellow
,
red
, teal
, fuchsia
, purple
-
Map existing semantic variants to new colors (
primary
= blue
,
success
= green
, neutral
= gray
,
warning
= yellow
, danger
= red
)
-
Docs
- Add new Styles pages for Spacing, Elevation, Border Radius
- Add design pattern and Figma component status badges to all components
- Force site to always display light theme
1.2.3
- Fix for missing generated CSS tokens
- Minor docs quotation fix
1.2.2
- Utilities now export a method to automatically register FontAwesome icon libraries
- Slim template formatting for CodePen examples
- Tokens and overrides included in CodePen examples
- New export of tokens.json to be consumed by shared-ui as part of config
- CSS tokens generated automatically from the tokens.json
1.2.1
- Fix focus issue on inputs caused by Tailwind
- Use Font Awesome in doc sites
1.2.0
- Updated to upstream 2.4.0
- Docs redesign (courtesy of Sara H)
- Improved Font Awesome documentation
-
A couple additional commits from upstream/next including:
- Buttons allow variable height children
- Documentation of radio button sizing
1.1.1
- Increase padding for details
- Fix details example for alternate icons
1.1.0
-
Checkbox
- Added
contained
modifier to wrap the checkbox in a container
- Added
description
slot to appear in smaller text below the label
-
Radio
- Added
contained
modifier to wrap the radio in a container
- Added
description
slot to appear in smaller text below the label
1.0.7
- Increase icon size for small buttons
1.0.6
- Another fix for exports / imports in shared-ui
1.0.5
- Minor, attempting to fix imports in
shared-ui
1.0.4
- Updated to upstream 2.1.0
- Added teal color tokens
- Modified exports to allow pulling in tokens more easily
- Added Slim code to all docs
1.0.3
-
Pulled in upstream fixes on
next
branch, including fixes for dropdown
and
select
- Hide shoelace elements until they are defined (FOUCE)
- Fixes for Tailwind resets that broke menu styling
1.0.2
-
Updated to upstream release 2.0.0
- First stable release
- Some fixes for selects and form elements
-
Migrated tokens and overrides from
shared-ui
- This repo is now the source of truth for tokens and override styles
-
Updated Heroicons to 2.0.14
- No significant changes, just keeping up with upstream
1.0.1-alpha.4
-
Updated to upstream version 2.0.0-beta.88
- Includes breaking change to
sl-select
-
Button
- Pill button is now default
- Added
square
modifier to get rounded-rectangle shape
- Added
x-large
size
-
Docs
- Removed unused button styles
- Added Teamshares section
- Updated style overrides