From 218e78e9472a51b20b9a4c2667028767ebbce4d1 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 28 Feb 2023 12:10:14 -0500 Subject: [PATCH] add getForm() method; closes #1180 --- docs/resources/changelog.md | 1 + src/components/button/button.ts | 5 +++++ src/components/checkbox/checkbox.ts | 5 +++++ src/components/color-picker/color-picker.ts | 5 +++++ src/components/input/input.ts | 5 +++++ src/components/radio-group/radio-group.ts | 17 +++++++++++------ src/components/range/range.ts | 5 +++++ src/components/select/select.ts | 5 +++++ src/components/switch/switch.ts | 5 +++++ src/components/textarea/textarea.ts | 5 +++++ src/internal/shoelace-element.ts | 10 +++++----- 11 files changed, 57 insertions(+), 11 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 0bc9ad66..f90d92fe 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,6 +10,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added TypeScript types to all custom events [#1183](https://github.com/shoelace-style/shoelace/pull/1183) - Added the `svg` part to `` +- Added the `getForm()` method to all form controls [#1180](https://github.com/shoelace-style/shoelace/issues/1180) - Fixed a bug in `` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197) - Fixed a bug in `` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205) - Fixed a bug in `` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208) diff --git a/src/components/button/button.ts b/src/components/button/button.ts index bbf5f4de..8c578f66 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -257,6 +257,11 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon return true; } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { if (this.isButton()) { diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index ebf44753..7a223d39 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -158,6 +158,11 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.input.reportValidity(); diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index d151c6bb..aba32a2b 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -764,6 +764,11 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { if (!this.inline && !this.validity.valid) { diff --git a/src/components/input/input.ts b/src/components/input/input.ts index a2d010ae..d56b0855 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -377,6 +377,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.input.reportValidity(); diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index bce615e2..0c2dcacc 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -252,12 +252,9 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor return true; } - /** Sets a custom validation message. Pass an empty string to restore validity. */ - setCustomValidity(message = '') { - this.customValidityMessage = message; - this.errorMessage = message; - this.validationInput.setCustomValidity(message); - this.formControlController.updateValidity(); + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); } /** Checks for validity and shows the browser's validation message if the control is invalid. */ @@ -279,6 +276,14 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor return isValid; } + /** Sets a custom validation message. Pass an empty string to restore validity. */ + setCustomValidity(message = '') { + this.customValidityMessage = message; + this.errorMessage = message; + this.validationInput.setCustomValidity(message); + this.formControlController.updateValidity(); + } + render() { const hasLabelSlot = this.hasSlotController.test('label'); const hasHelpTextSlot = this.hasSlotController.test('help-text'); diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 9e4ed1b5..c2310f60 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -254,6 +254,11 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.input.reportValidity(); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 30e6ec55..e152d056 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -639,6 +639,11 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon return this.valueInput.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.valueInput.reportValidity(); diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 0a3dbaf9..06ddfafe 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -163,6 +163,11 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.input.reportValidity(); diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index d0fb1b3f..20ed4e8a 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -281,6 +281,11 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC return this.input.checkValidity(); } + /** Gets the associated form, if one exists. */ + getForm(): HTMLFormElement | null { + return this.formControlController.getForm(); + } + /** Checks for validity and shows the browser's validation message if the control is invalid. */ reportValidity() { return this.input.reportValidity(); diff --git a/src/internal/shoelace-element.ts b/src/internal/shoelace-element.ts index 6e4e6e38..87aae8be 100644 --- a/src/internal/shoelace-element.ts +++ b/src/internal/shoelace-element.ts @@ -95,7 +95,7 @@ export default class ShoelaceElement extends LitElement { } export interface ShoelaceFormControl extends ShoelaceElement { - // Standard form attributes + // Form attributes name: string; value: unknown; disabled?: boolean; @@ -103,7 +103,7 @@ export interface ShoelaceFormControl extends ShoelaceElement { defaultChecked?: boolean; form?: string; - // Standard validation attributes + // Constraint validation attributes pattern?: string; min?: number | Date; max?: number | Date; @@ -112,13 +112,13 @@ export interface ShoelaceFormControl extends ShoelaceElement { minlength?: number; maxlength?: number; - // Validation properties + // Form validation properties readonly validity: ValidityState; readonly validationMessage: string; - // Validation methods + // Form validation methods checkValidity: () => boolean; - /** Checks for validity and shows the browser's validation message if the control is invalid. */ + getForm: () => HTMLFormElement | null; reportValidity: () => boolean; setCustomValidity: (message: string) => void; }