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

add validation states to all form controls; closes #1011

Browse Source
This commit is contained in:
Cory LaViska
2022-11-18 09:56:05 -05:00
parent a3f658938d
commit daebd08475
13 changed files with 295 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/resources/changelog.md
View File

@@ -13,6 +13,16 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- 🚨 BREAKING: Removed the `fieldset` property from `<sl-radio-group>` (use CSS parts if you want to keep the border) [#965](https://github.com/shoelace-style/shoelace/issues/965)
- 🚨 BREAKING: Removed `base` and `label` parts from `<sl-radio-group>` (use `form-control` and `form-control__label` instead) [#965](https://github.com/shoelace-style/shoelace/issues/965)
- 🚨 BREAKING: Removed the `base` part from `<sl-icon>` (style the host element directly instead)
- 🚨 BREAKING: Removed the `invalid` attribute from form controls (use `[data-invalid]` to target it with CSS)
- Added validation states to all form controls to allow styling based on various validation states [#1011](https://github.com/shoelace-style/shoelace/issues/1011)
- `data-required` - indicates that a value is required
- `data-optional` - indicates that a value is NOT required
- `data-invalid` - indicates that the form control is invalid
- `data-valid` - indicates that the form control is valid
- `data-user-invalid` - indicates the form control is invalid and the user has interacted with it
- `data-user-valid` - indicates the form control is valid and the user has interacted with it
- Added `checkValidity()` method to all form controls
- Added `reportValidity()` method to `<sl-range>`
- Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
- Added tests for `<sl-menu>`, `<sl-menu-item>`, `<sl-menu-label>`, `<sl-rating>`, `<sl-relative-time>`, `<sl-skeleton>`, `<sl-tab-panel>` and `<sl-tag>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
[#949](https://github.com/shoelace-style/shoelace/pull/949) [#951](https://github.com/shoelace-style/shoelace/pull/951) [#953](https://github.com/shoelace-style/shoelace/pull/953)
@@ -37,6 +47,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- Fixed a bug in `<sl-radio-group>` that prevented the `invalid` property from correctly reflecting validity sometimes [#992](https://github.com/shoelace-style/shoelace/issues/992)
- Fixed a bug in `<sl-tree>` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963)
- Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725)
- Fixed an incorrect return value for `reportValidity()` in `<sl-color-picker>`
- Improved `<sl-badge>` to improve padding and render relative to the current font size
- Improved how many components display in forced-colors mode / Windows High Contrast mode
- Improved `<sl-color-picker>` so it's usable in forced-colors mode
@@ -50,6 +61,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
- Improved `<sl-tree-item>` so selected items are visible in forced-colors mode
- Improved `<sl-tab-group>` so tabs are cleaner and easier to understand in forced-colors mode
- Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962)
- Refactored form controls to use the `ShoelaceFormControl` interface to improve type safety and consistency
- Updated Lit to 2.4.1
- Updated Bootstrap Icons to 1.10.2
- Updated TypeScript to 4.8.4