Skip to main content
    
    
    
    
      
      
        
        
          Changelog
          
            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