fix(input-date-picker, input-time-picker): adjust chevron scale accor…

…dingly (#8012) **Related Issue:** #6889 ## Summary Uses `getIconScale` to apply corresponding scale to internal chevron icon.
Esri · Oct 20, 2023 · f894f80 · f894f80
1 parent 331247f
commit f894f80
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -35,9 +35,7 @@
 }
 
 .toggle-icon {
-  @apply absolute flex
-  w-4 cursor-pointer
-  items-center;
+  @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);

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
@@ -94,6 +94,13 @@ export const invalidStatus_TestOnly = (): string => html`
   </div>
 `;
 
+export const scales_TestOnly = (): string =>
+  html`
+    <calcite-input-date-picker scale="s" icon value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="m" icon value="2020-12-12"></calcite-input-date-picker>
+    <calcite-input-date-picker scale="l" icon value="2020-12-12"></calcite-input-date-picker>
+  `;
+
 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
@@ -660,7 +660,10 @@ export class InputDatePicker
   renderToggleIcon(open: boolean): VNode {
     return (
       <span class={CSS.toggleIcon}>
-        <calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
+        <calcite-icon
+          icon={open ? "chevron-up" : "chevron-down"}
+          scale={getIconScale(this.scale)}
+        />
       </span>
     );
   }

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -23,9 +23,7 @@
 }
 
 .toggle-icon {
-  @apply absolute flex
-  w-4 cursor-pointer
-  items-center;
+  @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);

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
@@ -42,6 +42,13 @@ export const milliseconds_TestOnly = (): string => html`
 export const disabled_TestOnly = (): string =>
   html`<calcite-input-time-picker disabled scale="l" icon step="1" value="01:02"></calcite-input-time-picker>`;
 
+export const scales_TestOnly = (): string =>
+  html`
+    <calcite-input-time-picker scale="s" icon value="01:02"></calcite-input-time-picker>
+    <calcite-input-time-picker scale="m" icon value="01:02"></calcite-input-time-picker>
+    <calcite-input-time-picker scale="l" icon value="01:02"></calcite-input-time-picker>
+  `;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker class="calcite-mode-dark" value="22:37" step="1"> </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
@@ -72,6 +72,7 @@ import updateLocale from "dayjs/esm/plugin/updateLocale";
 import { getSupportedLocale } from "../../utils/locale";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { decimalPlaces } from "../../utils/math";
+import { getIconScale } from "../../utils/component";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayjsLocaleToLocaleConfigImport = new Map([
@@ -1026,7 +1027,10 @@ export class InputTimePicker
   renderToggleIcon(open: boolean): VNode {
     return (
       <span class={CSS.toggleIcon}>
-        <calcite-icon icon={open ? "chevron-up" : "chevron-down"} scale="s" />
+        <calcite-icon
+          icon={open ? "chevron-up" : "chevron-down"}
+          scale={getIconScale(this.scale)}
+        />
       </span>
     );
   }