js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

don't use "prop"

Browse Source
This commit is contained in:
Cory LaViska
2021-07-08 17:41:10 -04:00
parent ad7c02f745
commit f39cb976aa
16 changed files with 62 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/alert.md
View File

@@ -89,7 +89,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
### Duration
Set the `duration` prop to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
```html preview
<div class="alert-duration">
@@ -120,7 +120,7 @@ Set the `duration` prop to automatically hide an alert after a period of time. T
To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
You should always use the `closable` prop so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.
You should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.
```html preview
<div class="alert-toast">

12
docs/components/button.md
View File

@@ -25,7 +25,7 @@ Use the `type` attribute to set the button's type.
### Sizes
Use the `size` prop to change a button's size.
Use the `size` attribute to change a button's size.
```html preview
<sl-button size="small">Small</sl-button>
@@ -35,7 +35,7 @@ Use the `size` prop to change a button's size.
### Pill Buttons
Use the `pill` prop to give buttons rounded edges.
Use the `pill` attribute to give buttons rounded edges.
```html preview
<sl-button size="small" pill>Small</sl-button>
@@ -45,7 +45,7 @@ Use the `pill` prop to give buttons rounded edges.
### Circle Buttons
Use the `circle` prop to create circular icon buttons.
Use the `circle` attribute to create circular icon buttons.
```html preview
<sl-button type="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
@@ -146,7 +146,7 @@ Use the `prefix` and `suffix` slots to add icons.
### Caret
Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
```html preview
<sl-button size="small" caret>Small</sl-button>
@@ -156,7 +156,7 @@ Use the `caret` prop to add a dropdown indicator when a button will trigger a dr
### Loading
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
```html preview
<sl-button type="default" loading>Default</sl-button>
@@ -169,7 +169,7 @@ Use the `loading` prop to make a button busy. The width will remain the same as
### Disabled
Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed.
Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview
<sl-button type="default" disabled>Default</sl-button>

2
docs/components/drawer.md
View File

@@ -92,7 +92,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
### Contained to an Element
By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` prop and `position: relative` to the parent.
By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` attribute and `position: relative` to the parent.
```html preview
<div

2
docs/components/form.md
View File

@@ -196,7 +196,7 @@ The `invalid` attribute reflects the form control's validity, so you can style i
To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.
Remember that the `invalid` prop on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` prop will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
Remember that the `invalid` attribute on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` attribute will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
Instead, toggle a class and target it in your stylesheet as shown below.

4
docs/components/format-date.md
View File

@@ -11,7 +11,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
```
The `date` prop determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
@@ -44,7 +44,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
### Hour Formatting
By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hourFormat` prop to `12` or `24`.
By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
```html preview
<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br>

6
docs/components/input.md
View File

@@ -24,7 +24,7 @@ Use the `placeholder` attribute to add a placeholder.
### Clearable
Add the `clearable` prop to add a clear button when the input has content.
Add the `clearable` attribute to add a clear button when the input has content.
```html preview
<sl-input placeholder="Clearable" clearable></sl-input>
@@ -32,7 +32,7 @@ Add the `clearable` prop to add a clear button when the input has content.
### Toggle Password
Add the `toggle-password` prop to add a toggle button that will show the password when activated.
Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
```html preview
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
@@ -44,7 +44,7 @@ Add the `toggle-password` prop to add a toggle button that will show the passwor
### Pill
Use the `pill` prop to give inputs rounded edges.
Use the `pill` attribute to give inputs rounded edges.
```html preview
<sl-input placeholder="Small" size="small" pill></sl-input>

6
docs/components/qr-code.md
View File

@@ -14,7 +14,7 @@ QR codes are useful for providing small pieces of information to users who can q
### Colors
Use the `fill` and `background` props to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
```html preview
<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
@@ -22,7 +22,7 @@ Use the `fill` and `background` props to modify the QR code's colors. You should
### Size
Use the `size` prop to change the size of the QR code.
Use the `size` attribute to change the size of the QR code.
```html preview
<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
@@ -30,7 +30,7 @@ Use the `size` prop to change the size of the QR code.
### Radius
Create a rounded effect with the `radius` prop.
Create a rounded effect with the `radius` attribute.
```html preview
<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>

4
docs/components/range.md
View File

@@ -14,7 +14,7 @@ Ranges allow the user to select a single value within a given range using a slid
### Disabled
Use the `disabled` prop to disable a slider.
Use the `disabled` attribute to disable a slider.
```html preview
<sl-range min="0" max="100" step="1" disabled></sl-range>
@@ -38,7 +38,7 @@ To disable the tooltip, set `tooltip` to `none`.
### Custom Tooltip Formatter
You can change the tooltip's content by setting the `tooltipFormatter` prop to a function that accepts the range's value as an argument.
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
```html preview
<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>

2
docs/components/relative-time.md
View File

@@ -11,7 +11,7 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
```
The `date` prop determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.

6
docs/components/select.md
View File

@@ -46,7 +46,7 @@ Use the `clearable` attribute to make the control clearable.
### Pill
Use the `pill` prop to give selects rounded edges.
Use the `pill` attribute to give selects rounded edges.
```html preview
<sl-select pill>
@@ -58,7 +58,7 @@ Use the `pill` prop to give selects rounded edges.
### Disabled
Use the `disabled` prop to disable a select.
Use the `disabled` attribute to disable a select.
```html preview
<sl-select placeholder="Disabled" disabled>
@@ -132,7 +132,7 @@ Use the `size` attribute to change a select's size.
### Selecting Options Programmatically
The `value` prop is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
```html preview
<div class="selecting-example">

2
docs/components/tab-group.md
View File

@@ -78,7 +78,7 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
### Closable Tabs
Add the `closable` prop to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
```html preview
<sl-tab-group class="tabs-closable">

4
docs/components/tag.md
View File

@@ -16,7 +16,7 @@ Tags are used as labels to organize things or to indicate a selection.
### Sizes
Use the `size` prop to change a tab's size.
Use the `size` attribute to change a tab's size.
```html preview
<sl-tag size="small">Small</sl-tag>
@@ -26,7 +26,7 @@ Use the `size` prop to change a tab's size.
### Pill
Use the `pill` prop to give tabs rounded edges.
Use the `pill` attribute to give tabs rounded edges.
```html preview
<sl-tag size="small" pill>Small</sl-tag>

2
docs/components/tooltip.md
View File

@@ -122,7 +122,7 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
### Manual Trigger
Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` prop to control when the tooltip is shown.
Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
```html preview
<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>

10
docs/getting-started/usage.md
View File

@@ -6,19 +6,19 @@ Shoelace components are just regular HTML elements, or "custom elements" to be p
### Properties
Many components have properties ("props") that can be set using attributes. For example, buttons accept a `size` attribute that dictates the button's size.
Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
```html
<sl-button size="small">Click me</sl-button>
```
Some props are booleans, so they only have true/false values. To activate a boolean prop, add the corresponding attribute without a value.
Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
```html
<sl-button disabled>Click me</sl-button>
```
In rare cases, a prop may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` prop to an array of colors. This can be done with JavaScript.
In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This can be done with JavaScript.
```html
<sl-color-picker></sl-color-picker>
@@ -102,9 +102,9 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
You might expect similarly named elements to share the same API as native HTML elements. This is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts.
For example, `<button>` and `<sl-button>` both have a `type` attribute, but it does different things (the former controls whether the button submits a form and the latter controls the button's appearance). Similarly, you can't call `focus()` on a Shoelace input — you need to use the component's `focus()` method instead. There are technical reasons for some of these design decisions that are outside the scope of this page.
For example, `<button>` and `<sl-button>` both have a `type` attribute, but it does different things. The former controls whether the button submits a form and the latter controls the button's appearance.
?> **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each property, method, and event is intended to do.
?> **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
## Code Completion

52
docs/resources/changelog.md
View File

@@ -12,10 +12,10 @@ This release improves the developer experience of `<sl-animation>`. Previously,
This is a lot more intuitive and makes it easier to activate animations imperatively. In addition, the `play` attribute is automatically removed automatically when the animation finishes or cancels, making it easier to restart finite animations. Lastly, the animation's timing is now accessible through the new `currentTime` property instead of `getCurrentTime()` and `setCurrentTime()`.
- 🚨 BREAKING: removed the `pause` prop from `sl-animation` (use the `play` prop to start and stop the animation instead)
- 🚨 BREAKING: removed the `pause` attribute from `sl-animation` (use `play` to start and stop the animation instead)
- 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `sl-animation` (use the `currentTime` property instead)
- 🚨 BREAKING: removed `closeOnSelect` prop from `sl-dropdown` (use `stayOpenOnSelect` instead)
- Added `currentTime` to `sl-animation` to control the current time without methods
- 🚨 BREAKING: removed the `close-on-select` attribute from `sl-dropdown` (use `stay-open-on-select` instead)
- Added the `currentTime` property to `sl-animation` to control the current time without methods
- Fixed a bug in `sl-range` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
- Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> in a menu didn't work with click handlers
- Reworked `sl-menu` and `sl-menu-item` to use a roving tab index and improve keyboard accessibility
@@ -69,7 +69,7 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
## 2.0.0-beta.42
This release addresses an issue with the `open` prop no longer working in a number of components, as a result of the changes in beta.41. It also removes a small but controversial feature that complicated show/hide logic and led to a poor experience for developers and end users.
This release addresses an issue with the `open` attribute no longer working in a number of components, as a result of the changes in beta.41. It also removes a small but controversial feature that complicated show/hide logic and led to a poor experience for developers and end users.
There are two ways to show/hide affected components: by calling `show() | hide()` and by toggling the `open` prop. Previously, it was possible to call `event.preventDefault()` in an `sl-show | sl-hide ` handler to stop the component from showing/hiding. The problem becomes obvious when you set `el.open = false`, the event gets canceled, and in the next cycle `el.open` has reverted to `true`. Not only is this unexpected, but it also doesn't play nicely with frameworks. Additionally, this made it impossible to await `show() | hide()` since there was a chance they'd never resolve.
@@ -146,7 +146,7 @@ The most elegant solution I found was to use the [Web Animations API](https://de
## 2.0.0-beta.37
- Added `click()` method to `sl-checkbox`, `sl-radio`, and `sl-switch`
- Added the `activation` prop to `sl-tab-group` to allow for automatic and manual tab activation
- Added the `activation` attribute to `sl-tab-group` to allow for automatic and manual tab activation
- Added `npm run create <tag>` script to scaffold new components faster
- Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect
- Fixed a bug in `sl-tooltip` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391)
@@ -205,7 +205,7 @@ From now on, importing a component will register it automatically. The caveat is
- Fixed a bug where link buttons could have incorrect `target`, `download`, and `rel` props
- Fixed `aria-label` and `aria-labelledby` props in `sl-dialog` and `sl-drawer`
- Fixed `tabindex` prop in `sl-menu`
- Fixed `tabindex` attribute in `sl-menu`
- Fixed a bug in `sl-select` where tags would always render as pills
- Fixed a bug in `sl-button` where calling `setFocus()` would throw an error
@@ -233,7 +233,7 @@ From now on, importing a component will register it automatically. The caveat is
**This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
- 🚨 BREAKING: removed the `symbol` prop from `sl-rating` and reverted to `getSymbol` for optimal flexibility
- 🚨 BREAKING: removed the `symbol` property from `sl-rating` and reverted to `getSymbol` for optimal flexibility
- Added `vscode.html-custom-data.json` to the build to support IntelliSense (see [the usage section](/getting-started/usage#code-completion) for details)
- Added a base style to prevent FOUC before components are defined
- Fixed bug where TypeScript types weren't being generated [#364](https://github.com/shoelace-style/shoelace/pull/364)
@@ -258,7 +258,7 @@ The component API remains the same except for the changes noted below. Thanks fo
- 🚨 BREAKING: removed the experimental `sl-theme` component due to limitations (you should set the `sl-theme-[name]` class on the `<body>` instead)
- 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
- 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
- 🚨 BREAKING: changed `getSymbol` prop in `sl-rating` to `symbol` (it now accepts a string or a function that returns an icon name)
- 🚨 BREAKING: changed `getSymbol` property in `sl-rating` to `symbol` (it now accepts a string or a function that returns an icon name)
- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-shoelace` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
- Fixed `min` and `max` types in `sl-input` to allow numbers and strings [#330](https://github.com/shoelace-style/shoelace/issues/330)
- Fixed a bug where `sl-checkbox`, `sl-radio`, and `sl-switch` controls would shrink with long labels [#325](https://github.com/shoelace-style/shoelace/issues/325)
@@ -301,7 +301,7 @@ The component API remains the same except for the changes noted below. Thanks fo
- Fixed a bug in `sl-tab-group` where removing tabs would throw an error
- Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
- Removed `text` type from `sl-badge` as it was erroneously copied and never had styles
- Updated `sl-tab-group` so the `active` prop is reflected to the attribute
- Updated `sl-tab-group` so the `active` property is reflected to its attribute
- Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
- Updated to Bootstrap Icons 1.3.0
@@ -320,7 +320,7 @@ The component API remains the same except for the changes noted below. Thanks fo
- 🚨 BREAKING: Removed `copy-button` part from `sl-color-picker` since copying is now done by clicking the preview
- Added `getFormattedValue()` method to `sl-color-picker` so you can retrieve the current value in any format
- Added visual separators between solid buttons in `sl-button-group`
- Added `help-text` prop to `sl-input`, `sl-textarea`, and `sl-select`
- Added `help-text` attribute to `sl-input`, `sl-textarea`, and `sl-select`
- Fixed a bug where moving the mouse while `sl-dropdown` is closing would remove focus from the trigger
- Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
@@ -341,7 +341,7 @@ The component API remains the same except for the changes noted below. Thanks fo
- Added `sl-format-date` component
- Added `indeterminate` state to `sl-progress-bar` [#274](https://github.com/shoelace-style/shoelace/issues/274)
- Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
- Added `allow-scripts` prop to `sl-include` [#280](https://github.com/shoelace-style/shoelace/issues/280)
- Added `allow-scripts` attribute to `sl-include` [#280](https://github.com/shoelace-style/shoelace/issues/280)
- Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
- Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
- Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
@@ -354,7 +354,7 @@ The component API remains the same except for the changes noted below. Thanks fo
- Added `sl-format-number` component
- Added `sl-relative-time` component
- Added `closable` prop to `sl-tab`
- Added `closable` attribute to `sl-tab`
- Added experimental `sl-resize-observer` utility
- Added experimental `sl-theme` utility and updated theming documentation
- Fixed a bug where `sl-menu-item` wouldn't render properly in the dark theme
@@ -367,10 +367,10 @@ The component API remains the same except for the changes noted below. Thanks fo
- 🚨 BREAKING: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
- Moved `tabindex` from `sl-menu` to `sl-menu-item`
- Removed the `active` prop from `sl-menu-item` because synthetic focus states are bad for accessibility
- Removed the `active` attribute from `sl-menu-item` because synthetic focus states are bad for accessibility
- Removed the `sl-activate` and `sl-deactivate` events from `sl-menu-item` (listen for `focus` and `blur` instead)
- Updated `sl-select` so keyboard navigation still works
- Added `no-scroll-controls` prop to `sl-tab-group` [#253](https://github.com/shoelace-style/shoelace/issues/253)
- Added `no-scroll-controls` attribute to `sl-tab-group` [#253](https://github.com/shoelace-style/shoelace/issues/253)
- Fixed a bug where setting `open` initially wouldn't show `sl-dialog` or `sl-drawer` [#255](https://github.com/shoelace-style/shoelace/issues/255)
- Fixed a bug where `disabled` could be set when buttons are rendered as links
- Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside `sl-dialog` [#252](https://github.com/shoelace-style/shoelace/issues/252)
@@ -404,9 +404,9 @@ The component API remains the same except for the changes noted below. Thanks fo
- 🚨 BREAKING: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
- Added support for dropdowns and non-icon elements to `sl-input`
- Added `spellcheck` prop to `sl-input`
- Added `spellcheck` attribute to `sl-input`
- Added `sl-icon-library` to allow custom icon library registration
- Added `library` prop to `sl-icon` and `sl-icon-button`
- Added `library` attribute to `sl-icon` and `sl-icon-button`
- Added "Integrating with Rails" tutorial to the docs, courtesy of [ParamagicDev](https://github.com/ParamagicDev)
- Fixed a bug where `sl-progress-ring` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227)
- Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
@@ -437,7 +437,7 @@ The following pages demonstrate why this change was necessary.
## 2.0.0-beta.18
- Added `name` and `invalid` prop to `sl-color-picker`
- Added `name` and `invalid` attribute to `sl-color-picker`
- Added support for form submission and validation to `sl-color-picker`
- Added touch support to demo resizers in the docs
- Added `sl-responsive-embed` component
@@ -467,20 +467,20 @@ The following pages demonstrate why this change was necessary.
**Form validation has been reworked and is much more powerful now!**
- The `invalid` prop now reflects the control's validity as determined by the browser's constraint validation API
- The `invalid` attribute now reflects the control's validity as determined by the browser's constraint validation API
- Added `required` to `sl-checkbox`, `sl-select`, and `sl-switch`
- Added `reportValidity()` and `setCustomValidity()` methods to all form controls
- Added validation checking for custom and native form controls to `sl-form`
- Added `novalidate` prop to `sl-form` to disable validation
- Removed the `valid` prop from all form controls
- Added `novalidate` attribute to `sl-form` to disable validation
- Removed the `valid` attribute from all form controls
- Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve this)
## 2.0.0-beta.16
- Add `hoist` prop to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
- Add `sl-format-bytes` utility component
- Add `clearable` and `required` props to `sl-select`
- Add `slclear` event to `sl-input`
- Added `hoist` attribute to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
- Added `sl-format-bytes` utility component
- Added `clearable` and `required` props to `sl-select`
- Added `slclear` event to `sl-input`
- Added keyboard support to the preview resizer in the docs
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
@@ -552,7 +552,7 @@ The following pages demonstrate why this change was necessary.
- Added the icon button component
- Added the skeleton component
- Added the `typeToSelect` method to menu so type-to-select behavior can be controlled externally
- Added the `pulse` prop to badge
- Added the `pulse` attribute to badge
- Fixed a bug where hovering over select showed the wrong cursor
- Fixed a bug where tabbing into a select control would highlight the label
- Fixed a bug where tabbing out of a select control wouldn't close it
@@ -560,7 +560,7 @@ The following pages demonstrate why this change was necessary.
- Fixed a bug where type-to-select wasn't working after the first letter
- Fixed a bug where clicking on menu items and dividers would steal focus from the menu
- Fix a bug where the color picker wouldn't parse uppercase values
- Removed `noFooter` prop from dialog and drawer (slot detection is automatic, so the prop is not required)
- Removed the `no-footer` attribute from dialog and drawer (slot detection is automatic, so the attribute is not required)
- Removed `close-icon` slot from alert
- Replaced make-shift icon buttons with `sl-icon-button` in alert, dialog, drawer, and tag
- Updated Stencil to 1.17.1

6
docs/resources/contributing.md
View File

@@ -233,9 +233,9 @@ export default class SlExample {
}
```
### When to use a prop vs. a CSS custom property
### When to use a property vs. a CSS custom property
When designing a component's API, standard properties ("props") are generally used to change the _behavior_ of a component, whereas CSS custom properties ("CSS variables") are used to change the _appearance_ of a component. Remember that props can't respond to media queries, but CSS variables can.
When designing a component's API, standard properties are generally used to change the _behavior_ of a component, whereas CSS custom properties ("CSS variables") are used to change the _appearance_ of a component. Remember that properties can't respond to media queries, but CSS variables can.
There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable.
@@ -259,7 +259,7 @@ Consumers of the library should never need to worry about preprocessing the libr
Form controls should support validation through the following conventions:
- All form controls must have an `invalid` prop that reflects their validity
- All form controls must have an `invalid` property that reflects their validity
- All form controls must have a `setCustomValidity()` method so the user can set a custom validation message
- All form controls must have a `reportValidity()` method that report their validity during form submission
- All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible