fix(tab, tabs, tab-title, input, input-number, input-text, input-date…

…-picker, input-time-picker): bumping the scale of icon to M when parent is scale L (#6267) **Related Issue:** #5698 ## Summary Bumping the scales of `iconStart` and `iconEnd` to M when the parent `tab-title`,`input`, `input-number`, `input-text`, `input-date-picker`, `input-time-picker` components are `scale="l"` for a visual distinction between larger and smaller components without affecting the height of the components when icon(s) are added or removed. Added `_testOnly` snapshots.
Esri · Jan 14, 2023 · e8edf6b · e8edf6b
1 parent 2b8656a
commit e8edf6b
Show file tree

Hide file tree

Showing 17 changed files with 122 additions and 69 deletions.
diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -64,14 +64,21 @@ export const flipPlacements_TestOnly = (): string => html`
   </script>
 `;
 
-export const laoNumberingSystem_TestOnly = (): string => html`
+export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
+      open
       value="1/1/1"
       lang="zh-CN"
       numbering-system="laoo"
-    ></calcite-input-date-picker
-  </div>`;
+      scale="l"
+      start="2020-12-12"
+      end="2020-12-16"
+      range=""
+      layout="horizontal"
+    ></calcite-input-date-picker>
+  </div>
+`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">

diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
@@ -519,12 +519,16 @@ export class InputDatePicker
 
             {this.range && this.layout === "horizontal" && (
               <div class="horizontal-arrow-container">
-                <calcite-icon flipRtl={true} icon="arrow-right" scale="s" />
+                <calcite-icon
+                  flipRtl={true}
+                  icon="arrow-right"
+                  scale={this.scale === "l" ? "m" : "s"}
+                />
               </div>
             )}
             {this.range && this.layout === "vertical" && this.scale !== "s" && (
               <div class="vertical-arrow-container">
-                <calcite-icon icon="arrow-down" scale="s" />
+                <calcite-icon icon="arrow-down" scale={this.scale === "l" ? "m" : "s"} />
               </div>
             )}
             {this.range && (

diff --git a/src/components/input-number/input-number.scss b/src/components/input-number/input-number.scss
@@ -146,7 +146,7 @@
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader

diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts
@@ -116,8 +116,39 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystem_TestOnly = (): string =>
-  html`<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input-number>`;
+export const hebrewNumberingSystemAndMediumIconForLargeInputStyling_TestOnly = (): string =>
+  html`
+    <calcite-input-number
+      number-button-type="vertical"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+    ></calcite-input-number
+    ><calcite-input-number
+      number-button-type="vertical"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+      icon="pen"
+    ></calcite-input-number>
+    <calcite-input-number
+      number-button-type="horizontal"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+    ></calcite-input-number
+    ><calcite-input-number
+      number-button-type="horizontal"
+      lang="ar-EG"
+      numbering-system="hebr"
+      value="123456"
+      scale="l"
+      icon="pen"
+    ></calcite-input-number>
+  `;
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx
@@ -877,15 +877,15 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
       <calcite-icon
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -906,7 +906,7 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-up" scale="s" />
+        <calcite-icon icon="chevron-up" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -925,7 +925,7 @@ export class InputNumber
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-down" scale="s" />
+        <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 

diff --git a/src/components/input-text/input-text.scss b/src/components/input-text/input-text.scss
@@ -143,7 +143,7 @@ input:focus {
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader

diff --git a/src/components/input-text/input-text.stories.ts b/src/components/input-text/input-text.stories.ts
@@ -95,3 +95,17 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const mediumIconForLargeScaleStyling_TestOnly = (): string => html`
+  <calcite-label scale="l">
+    Input Label
+    <calcite-input-text placeholder="Placeholder" scale="l"></calcite-input-text>
+    <calcite-input-text
+      placeholder="Placeholder"
+      scale="l"
+      icon="search"
+      clearable
+      value="sample input to show x"
+    ></calcite-input-text>
+  </calcite-label>
+`;
diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx
@@ -592,15 +592,15 @@ export class InputText
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
       <calcite-icon
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
     const prefixText = <div class={CSS.prefix}>{this.prefixText}</div>;

diff --git a/src/components/input-time-picker/input-time-picker.stories.ts b/src/components/input-time-picker/input-time-picker.stories.ts
@@ -26,7 +26,8 @@ export const simple = (): string => html`
   </calcite-input-time-picker>
 `;
 
-export const disabled_TestOnly = (): string => html`<calcite-input-time-picker disabled></calcite-input-time-picker>`;
+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 darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -199,7 +199,7 @@
 }
 
 :host([icon][scale="l"]) input {
-  padding-inline-start: theme("padding.12");
+  padding-inline-start: theme("padding.14");
 }
 
 // positioning wrapper for icon and loader

diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
@@ -1019,15 +1019,15 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="x" scale="s" />
+        <calcite-icon icon="x" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
     const iconEl = (
       <calcite-icon
         class={CSS.inputIcon}
         flipRtl={this.iconFlipRtl}
         icon={this.requestedIcon}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -1048,7 +1048,7 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-up" scale="s" />
+        <calcite-icon icon="chevron-up" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -1067,7 +1067,7 @@ export class Input
         tabIndex={-1}
         type="button"
       >
-        <calcite-icon icon="chevron-down" scale="s" />
+        <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
       </button>
     );
 
@@ -1153,7 +1153,7 @@ export class Input
             />,
             this.isTextarea ? (
               <div class={CSS.resizeIconWrapper}>
-                <calcite-icon icon="chevron-down" scale="s" />
+                <calcite-icon icon="chevron-down" scale={this.scale === "l" ? "m" : "s"} />
               </div>
             ) : null
           ]

diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts
@@ -0,0 +1,8 @@
+export const CSS = {
+  container: "container",
+  containerHasText: "container--has-text",
+  iconEnd: "icon-end",
+  iconStart: "icon-start",
+  iconPresent: "icon-present",
+  titleIcon: "calcite-tab-title--icon"
+};
diff --git a/src/components/tab-title/tab-title.e2e.ts b/src/components/tab-title/tab-title.e2e.ts
@@ -1,8 +1,11 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-tab-title", () => {
   const tabTitleHtml = "<calcite-tab-title></calcite-tab-title>";
+  const iconStartHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconStart}`;
+  const iconEndHtml = `calcite-tab-title >>> .${CSS.titleIcon}.${CSS.iconEnd}`;
 
   it("renders", async () => renders(tabTitleHtml, { display: "block" }));
 
@@ -14,8 +17,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-start='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).not.toBeNull();
     expect(iconEnd).toBeNull();
@@ -25,8 +28,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-end='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).toBeNull();
     expect(iconEnd).not.toBeNull();
@@ -36,8 +39,8 @@ describe("calcite-tab-title", () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tab-title icon-start='plus' icon-end='plus'>Text</calcite-tab-title>`);
     const element = await page.find("calcite-tab-title");
-    const iconStart = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-start");
-    const iconEnd = await page.find("calcite-tab-title >>> .calcite-tab-title--icon.icon-end");
+    const iconStart = await page.find(iconStartHtml);
+    const iconEnd = await page.find(iconEndHtml);
     expect(element).toHaveAttribute(HYDRATED_ATTR);
     expect(iconStart).not.toBeNull();
     expect(iconEnd).not.toBeNull();

diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
@@ -59,7 +59,7 @@
 :host([scale="l"]) {
   margin-inline-end: 1.5rem;
   .container {
-    @apply text-0h py-3;
+    @apply text-0h py-2.5;
   }
 }
 
@@ -77,8 +77,7 @@
     justify-center
     truncate
     border-b-2
-    px-0
-    py-2;
+    px-0;
   border-block-end-style: solid;
 }
 
@@ -169,6 +168,9 @@
   .container {
     @apply px-4;
   }
+  .icon-present {
+    padding-block: 11px;
+  }
 }
 
 @media (forced-colors: active) {

diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
@@ -19,6 +19,7 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac
 import { createObserver } from "../../utils/observers";
 import { FlipContext, Scale } from "../interfaces";
 import { TabChangeEventDetail } from "../tab/interfaces";
+import { CSS } from "./resources";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -148,19 +149,19 @@ export class TabTitle implements InteractiveComponent {
 
     const iconStartEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-start"
+        class={{ [CSS.titleIcon]: true, [CSS.iconStart]: true }}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
     const iconEndEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-end"
+        class={{ [CSS.titleIcon]: true, [CSS.iconEnd]: true }}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -175,7 +176,8 @@ export class TabTitle implements InteractiveComponent {
         <div
           class={{
             container: true,
-            "container--has-text": this.hasText
+            [CSS.iconPresent]: this.iconStart || this.iconEnd ? true : null,
+            [CSS.containerHasText]: this.hasText
           }}
           ref={(el) => this.resizeObserver?.observe(el)}
         >

diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
@@ -27,5 +27,6 @@ section,
 }
 
 :host([scale="l"]) {
-  @apply text-0h py-3;
+  @apply text-0h;
+  padding-block: 13px;
 }