Make form component args consistent

trusted-american · Nov 9, 2023 · 3633e66 · 3633e66
1 parent d9cf0b7
commit 3633e66
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 18 deletions.
diff --git a/addon/components/form/date-input.hbs b/addon/components/form/date-input.hbs
@@ -1,5 +1,5 @@
 <Form::Label
-  @text={{@label}}
+  @text={{unless @inputOnly @label}}
   @identifier={{@identifier}}
   @required={{@required}}
 />
@@ -12,6 +12,7 @@
   max={{this.max}}
   class="form-control {{if @size (concat 'form-control-' @size)}}"
   required={{@required}}
+  aria-label={{if @inputOnly @label}}
   {{on "change" this.change}}
   ...attributes
 />

diff --git a/addon/components/form/date-input.ts b/addon/components/form/date-input.ts
@@ -9,12 +9,13 @@ export interface FormDateInputSignature {
     value: Date | null | undefined;
     min?: Date | null;
     max?: Date | null;
-    label?: string;
-    required?: boolean;
+    label: string;
     identifier: string;
-    size?: 'sm' | 'lg';
+    required?: boolean;
     help?: string;
     invalidFeedback?: string;
+    inputOnly?: boolean;
+    size?: 'sm' | 'lg';
     onChange: (value: Date | null) => void;
   };
   Element: HTMLInputElement;

diff --git a/addon/components/form/input.ts b/addon/components/form/input.ts
@@ -3,15 +3,15 @@ import Component from '@glimmer/component';
 export interface FormInputSignature {
   Args: {
     value: string | number | null | undefined | unknown;
-    size?: 'sm' | 'lg';
     type?: string;
     label: string;
     identifier: string;
     required?: boolean;
     help?: string;
     invalidFeedback?: string;
-    errors?: { message: string }[];
     inputOnly?: boolean;
+    size?: 'sm' | 'lg';
+    errors?: { message: string }[];
   };
   Element: HTMLInputElement;
 }

diff --git a/addon/components/form/select.hbs b/addon/components/form/select.hbs
@@ -1,5 +1,5 @@
 <Form::Label
-  @text={{@label}}
+  @text={{unless @inputOnly @label}}
   @identifier={{@identifier}}
   @required={{@required}}
 />
@@ -9,7 +9,7 @@
     id={{@identifier}}
     class="form-select {{if @size (concat 'form-select-' @size)}}"
     required={{@required}}
-    disabled={{@disabled}}
+    aria-label={{if @inputOnly @label}}
     {{on "change" (pick "target.value" @onChange)}}
     ...attributes
   >

diff --git a/addon/components/form/select.ts b/addon/components/form/select.ts
@@ -10,13 +10,13 @@ export interface Option<T = unknown> {
 
 interface Args {
   selected?: unknown;
-  label?: string;
+  label: string;
   identifier: string;
   required?: boolean;
-  disabled?: boolean;
-  size?: 'sm' | 'lg';
   help?: string;
   invalidFeedback?: string;
+  inputOnly?: boolean;
+  size?: 'sm' | 'lg';
   onChange: (value: never) => void;
 }
 

diff --git a/addon/components/form/textarea.hbs b/addon/components/form/textarea.hbs
@@ -1,15 +1,17 @@
 <Form::Label
-  @text={{@label}}
+  @text={{unless @inputOnly @label}}
   @identifier={{@identifier}}
   @required={{@required}}
 />
 
 <Textarea
   @value={{@value}}
   id={{@identifier}}
-  required={{@required}}
   class="form-control {{if @size (concat 'form-control-' @size)}}"
+  required={{@required}}
+  aria-label={{if @inputOnly @label}}
   ...attributes
 />
 
+<Form::Error @text={{@invalidFeedback}} />
 <Form::Help @text={{@help}} />
diff --git a/addon/components/form/textarea.ts b/addon/components/form/textarea.ts
@@ -3,11 +3,13 @@ import Component from '@glimmer/component';
 export interface FormTextareaSignature {
   Args: {
     value: string | null | undefined;
-    size?: 'sm' | 'lg';
-    label?: string;
+    label: string;
     identifier: string;
     required?: boolean;
     help?: string;
+    invalidFeedback?: string;
+    inputOnly?: boolean;
+    size?: 'sm' | 'lg';
   };
   Element: HTMLTextAreaElement;
 }

diff --git a/addon/components/list-filter.hbs b/addon/components/list-filter.hbs
@@ -59,9 +59,10 @@
                   (hash value="isBeforeOrOn" label="is before or on")
                 }}
                 @selected={{predicate.mode}}
+                @label="Mode"
                 @identifier="mode{{index}}"
+                @inputOnly={{true}}
                 @onChange={{fn (mut predicate.mode)}}
-                aria-label="Mode"
                 class="mb-2"
               />
 
@@ -82,9 +83,10 @@
                       (hash value="months" label="Months")
                     }}
                     @selected={{predicate.valueB}}
+                    @label="Value B"
                     @identifier="valueB{{index}}"
+                    @inputOnly={{true}}
                     @onChange={{fn (mut predicate.valueB)}}
-                    aria-label="Value B"
                   />
                 {{else}}
                   <Form::DateInput
@@ -140,9 +142,10 @@
               <Form::Select
                 @options={{predicate.options}}
                 @selected={{predicate.value}}
+                @label="Value"
                 @identifier="value{{index}}"
+                @inputOnly={{true}}
                 @onChange={{fn (mut predicate.value)}}
-                aria-label="Value"
               />
 
             {{/if}}