fix(input-date-picker, input-time-picker): do not show dropdown affor…

…dance when read-only (#7559) **Related Issue:** #6899 ## Summary Updates `input-date-picker` and `input-time-picker` to follow read-only design spec.
Esri · Aug 22, 2023 · 5a3f19c · 5a3f19c
1 parent 47163ed
commit 5a3f19c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -80,6 +80,12 @@ export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string
   </div>
 `;
 
+export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
+  <div style="width: 400px">
+    <calcite-input-date-picker read-only value="2020-12-12"></calcite-input-date-picker>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -543,7 +543,7 @@ export class InputDatePicker
                 // eslint-disable-next-line react/jsx-sort-props
                 ref={this.setStartInput}
               />
-              {this.renderToggleIcon(this.open && this.focusedInput === "start")}
+              {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start")}
               <span aria-hidden="true" class={CSS.assistiveText} id={this.placeholderTextId}>
                 Date Format: {this.localeData?.placeholder}
               </span>
@@ -641,7 +641,7 @@ export class InputDatePicker
                   // eslint-disable-next-line react/jsx-sort-props
                   ref={this.setEndInput}
                 />
-                {this.renderToggleIcon(this.open && this.focusedInput === "end")}
+                {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end")}
               </div>
             )}
           </div>

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -84,3 +84,7 @@ export const arabicLocaleNumberingSystem_TestOnly = (): string => html`
   >
   </calcite-input-time-picker>
 `;
+
+export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
+  <calcite-input-time-picker read-only value="10:37"></calcite-input-time-picker>
+`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -825,7 +825,7 @@ export class InputTimePicker
             // eslint-disable-next-line react/jsx-sort-props
             ref={this.setCalciteInputEl}
           />
-          {this.renderToggleIcon(this.open)}
+          {!this.readOnly && this.renderToggleIcon(this.open)}
         </div>
         <calcite-popover
           focusTrapDisabled={true}