diff --git a/packages/webawesome/docs/docs/components/slider.md b/packages/webawesome/docs/docs/components/slider.md index 5b0bb6b284..c4d44d65d9 100644 --- a/packages/webawesome/docs/docs/components/slider.md +++ b/packages/webawesome/docs/docs/components/slider.md @@ -281,14 +281,3 @@ Use the `disabled` attribute to disable a slider. ``` -### Required - -Mark a slider as required using the `required` attribute. Users must interact with required sliders before the form can be submitted. - -```html {.example} -
- -
- -
-``` diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index e52da37bf0..410e2b2b99 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -10,8 +10,6 @@ Components with the Experimental badge sh ## Unreleased -TBD - - Added `--wa-space-5xl` design token to all themes [issue:1606] - Added `wa-gap-5xl` utility class [issue:1606] - Added `wa-gap-4xl` to the gap utility `:where()` selector @@ -24,6 +22,8 @@ Components with the Experimental badge sh - Fixed slider styling when using the `label` slot so that it matches attribute use. [issue:2124] - Fixed a bug in `` that caused horizontal page overflow in Chrome when containing wide content such as tables - Fixed a bug in `` and native `
` that caused full-width elements to overflow the details content [issue:2137] +- Fixed a bug in `` that introduced a `required` attribute which isn't valid on range elements [issue:1471] +TBD - Fixed the `autocorrect` property type in `` and `` to use `boolean` instead of a string union - Improved `` and `` so all internal dimensions (labels, checkboxes, expand buttons, etc.) scale proportionally with `font-size`, making it easy to resize the tree [discuss:2147] - Improved `` diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts index 1a5d092bb1..007542e3eb 100644 --- a/packages/webawesome/src/components/slider/slider.ts +++ b/packages/webawesome/src/components/slider/slider.ts @@ -179,9 +179,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement { /** The granularity the value must adhere to when incrementing and decrementing. */ @property({ type: Number }) step: number = 1; - /** Makes the slider a required field. */ - @property({ type: Boolean, reflect: true }) required = false; - /** Tells the browser to focus the slider when the page loads or a dialog is shown. */ @property({ type: Boolean }) autofocus: boolean; diff --git a/packages/webawesome/src/internal/validators/slider-validator.ts b/packages/webawesome/src/internal/validators/slider-validator.ts index 44ea1d0dcc..f2890ddd73 100644 --- a/packages/webawesome/src/internal/validators/slider-validator.ts +++ b/packages/webawesome/src/internal/validators/slider-validator.ts @@ -2,17 +2,11 @@ import type WaSlider from '../../components/slider/slider.js'; import type { Validator } from '../webawesome-form-associated-element.js'; /** - * Comprehensive validator for sliders that handles required, range, and step validation + * Comprehensive validator for sliders that handles range and step validation */ export const SliderValidator = (): Validator => { - // Create a native range input to get localized validation messages - const nativeRequiredRange = Object.assign(document.createElement('input'), { - type: 'range', - required: true, - }); - return { - observedAttributes: ['required', 'min', 'max', 'step'], + observedAttributes: ['min', 'max', 'step'], checkValidity(element) { const validity: ReturnType = { message: '', @@ -34,14 +28,6 @@ export const SliderValidator = (): Validator => { return input.validationMessage; }; - // Check required validation first - if (element.required && !element.hasInteracted) { - validity.isValid = false; - validity.invalidKeys.push('valueMissing'); - validity.message = nativeRequiredRange.validationMessage || 'Please fill out this field.'; - return validity; - } - // For range sliders, validate both values if (element.isRange) { const minValue = element.minValue;