From 3fd61f4cae2228e7866dd75aba62b8a4830d1f79 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Tue, 10 Jan 2023 10:04:28 -0800
Subject: [PATCH 01/11] fix(tab-title, input): bumping the scale of icon to M
 when parent is scale L

---
 src/components/input/input.tsx         | 10 +++++-----
 src/components/tab-title/tab-title.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index bb40f454d1f..c85ac9c83b5 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -1019,7 +1019,7 @@ 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 = (
@@ -1027,7 +1027,7 @@ export class Input
         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/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index f99b52bd962..6215984bd51 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -151,7 +151,7 @@ export class TabTitle implements InteractiveComponent {
         class="calcite-tab-title--icon icon-start"
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 
@@ -160,7 +160,7 @@ export class TabTitle implements InteractiveComponent {
         class="calcite-tab-title--icon icon-end"
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
-        scale="s"
+        scale={this.scale === "l" ? "m" : "s"}
       />
     );
 

From d8f9e63f52fd015d04deef61c6318a592ae0bea4 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Tue, 10 Jan 2023 12:06:39 -0800
Subject: [PATCH 02/11] WIP: snapshots

---
 .../input-date-picker/input-date-picker.stories.ts     | 10 ++++++++++
 src/components/input-number/input-number.stories.ts    |  3 +++
 .../input-time-picker/input-time-picker.stories.ts     |  3 +++
 src/components/tabs/tabs.stories.ts                    | 10 ++++++++++
 4 files changed, 26 insertions(+)

diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts
index e37388c226a..95c60335f2f 100644
--- a/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -83,3 +83,13 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const mediumIconForLargeInputDatePicker_TestOnly = (): string => html`
+  <calcite-input-date-picker
+    scale="l"
+    start="2020-12-12"
+    end="2020-12-16"
+    range=""
+    layout="horizontal"
+  ></calcite-input-date-picker>
+`;
diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts
index ef3c95cf061..9eaabf3372d 100644
--- a/src/components/input-number/input-number.stories.ts
+++ b/src/components/input-number/input-number.stories.ts
@@ -121,3 +121,6 @@ export const hebrewNumberingSystem_TestOnly = (): string =>
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
+
+export const mediumIconForLargeInputNumber_TestOnly = (): string =>
+  html`<calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>`;
diff --git a/src/components/input-time-picker/input-time-picker.stories.ts b/src/components/input-time-picker/input-time-picker.stories.ts
index d29bdc6dfbe..deb19a823dc 100644
--- a/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/src/components/input-time-picker/input-time-picker.stories.ts
@@ -83,3 +83,6 @@ export const arabicLocaleNumberingSystem_TestOnly = (): string => html`
   >
   </calcite-input-time-picker>
 `;
+
+export const mediumIconForLargeInputTimePicker_TestOnly = (): string =>
+  html`<calcite-input icon type="time" step="1" value="01:02" scale="l"></calcite-input>`;
diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
index 477c427e514..7c78d02c928 100644
--- a/src/components/tabs/tabs.stories.ts
+++ b/src/components/tabs/tabs.stories.ts
@@ -194,3 +194,13 @@ export const TabChilrenWithPercentageHeights = (): string => html`
     </calcite-tab>
   </calcite-tabs>
 `;
+
+export const mediumIconForLargeTabTitle_TestOnly = (): string => html`
+  <calcite-tabs scale="l">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" selected>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+    </calcite-tab-nav>
+  </calcite-tabs>
+`;

From 3520677a76023b1d4f269fb7bccc7c4e8b479fd1 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 11:08:29 -0800
Subject: [PATCH 03/11] WIP: combined
 laoNumberingSystemAndMediumIconForLargeInput

---
 .../input-date-picker.stories.ts              | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 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
index 95c60335f2f..a0c7f94f973 100644
--- 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 = (): 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">
@@ -83,13 +90,3 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
-
-export const mediumIconForLargeInputDatePicker_TestOnly = (): string => html`
-  <calcite-input-date-picker
-    scale="l"
-    start="2020-12-12"
-    end="2020-12-16"
-    range=""
-    layout="horizontal"
-  ></calcite-input-date-picker>
-`;

From 0a8836de6534f53efef23db2d038de5399b20350 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 13:22:53 -0800
Subject: [PATCH 04/11] WIP: cleanup and combine stories

---
 .../input-date-picker/input-date-picker.stories.ts          | 2 +-
 src/components/input-number/input-number.stories.ts         | 3 ---
 .../input-time-picker/input-time-picker.stories.ts          | 6 ++----
 3 files changed, 3 insertions(+), 8 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
index a0c7f94f973..f0fb38f3026 100644
--- a/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -64,7 +64,7 @@ export const flipPlacements_TestOnly = (): string => html`
   </script>
 `;
 
-export const laoNumberingSystemAndMediumIconForLargeInput = (): string => html`
+export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       open
diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts
index d6b31569f69..145b7fcec16 100644
--- a/src/components/input-number/input-number.stories.ts
+++ b/src/components/input-number/input-number.stories.ts
@@ -121,6 +121,3 @@ export const hebrewNumberingSystem_TestOnly = (): string =>
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
-
-export const mediumIconForLargeInputNumber_TestOnly = (): string =>
-  html`<calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>`;
diff --git a/src/components/input-time-picker/input-time-picker.stories.ts b/src/components/input-time-picker/input-time-picker.stories.ts
index deb19a823dc..9421412c815 100644
--- 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 disabledAndMediumIconForLargeInput_TestOnly = (): string =>
+  html`<calcite-input-time-picker disabled scale="l"></calcite-input-time-picker>`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker
@@ -83,6 +84,3 @@ export const arabicLocaleNumberingSystem_TestOnly = (): string => html`
   >
   </calcite-input-time-picker>
 `;
-
-export const mediumIconForLargeInputTimePicker_TestOnly = (): string =>
-  html`<calcite-input icon type="time" step="1" value="01:02" scale="l"></calcite-input>`;

From 3925dde7627fcd92116f403ec47ca3a63db2d6bb Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 14:20:44 -0800
Subject: [PATCH 05/11] WIP: add more components to the fix

---
 .../input-date-picker/input-date-picker.tsx        |  8 ++++++--
 src/components/input-message/input-message.tsx     |  2 +-
 .../input-number/input-number.stories.ts           |  4 ++--
 src/components/input-number/input-number.tsx       |  8 ++++----
 src/components/input-text/input-text.stories.ts    | 14 ++++++++++++++
 src/components/input-text/input-text.tsx           |  4 ++--
 .../input-time-picker/input-time-picker.stories.ts |  4 ++--
 src/components/input/input.stories.ts              |  6 ++++--
 8 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
index e9ab4024559..3e4bdd5a46f 100644
--- 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-message/input-message.tsx b/src/components/input-message/input-message.tsx
index 414308e997e..c94b8c9e649 100644
--- a/src/components/input-message/input-message.tsx
+++ b/src/components/input-message/input-message.tsx
@@ -87,7 +87,7 @@ export class InputMessage {
           class="calcite-input-message-icon"
           flipRtl={this.iconFlipRtl}
           icon={iconName}
-          scale="s"
+          scale={this.scale === "l" ? "m" : "s"}
         />
       );
     }
diff --git a/src/components/input-number/input-number.stories.ts b/src/components/input-number/input-number.stories.ts
index 145b7fcec16..3715588e3b6 100644
--- a/src/components/input-number/input-number.stories.ts
+++ b/src/components/input-number/input-number.stories.ts
@@ -116,8 +116,8 @@ 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 hebrewNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string =>
+  html`<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456" scale="l"></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
index 4c8d2319a09..ab833301873 100644
--- a/src/components/input-number/input-number.tsx
+++ b/src/components/input-number/input-number.tsx
@@ -877,7 +877,7 @@ 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 = (
@@ -885,7 +885,7 @@ export class InputNumber
         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.stories.ts b/src/components/input-text/input-text.stories.ts
index dd36fdf314d..3bad5dfb587 100644
--- 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 mediumIconForLargeScale_TestOnly = (): string => html`
+  <calcite-label scale="l">
+    Input Label
+    <calcite-input-text
+      placeholder="Placeholder"
+      scale="l"
+      icon="search"
+      icon
+      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
index 813ca2c12d2..d1d95650bc4 100644
--- a/src/components/input-text/input-text.tsx
+++ b/src/components/input-text/input-text.tsx
@@ -592,7 +592,7 @@ 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 = (
@@ -600,7 +600,7 @@ export class InputText
         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
index 9421412c815..e13cca4d33d 100644
--- a/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/src/components/input-time-picker/input-time-picker.stories.ts
@@ -26,8 +26,8 @@ export const simple = (): string => html`
   </calcite-input-time-picker>
 `;
 
-export const disabledAndMediumIconForLargeInput_TestOnly = (): string =>
-  html`<calcite-input-time-picker disabled scale="l"></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.stories.ts b/src/components/input/input.stories.ts
index 176ae6a7d5f..92de144f02f 100644
--- a/src/components/input/input.stories.ts
+++ b/src/components/input/input.stories.ts
@@ -155,8 +155,10 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystem_TestOnly = (): string =>
-  html` <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input>`;
+export const hebrewNumberingSystemWithInputMessageMediumIconForLargeScale_TestOnly = (): string => html`
+  <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456" scale="l"></calcite-input>
+  <calcite-input-message status="idle" scale="l" icon> Info message </calcite-input-message>
+`;
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;

From 29b1261a310cc67aa881306dee40e7e90a64834e Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 14:35:01 -0800
Subject: [PATCH 06/11] WIP:
 disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly

---
 src/components/tabs/tabs.stories.ts | 54 +++++++----------------------
 1 file changed, 12 insertions(+), 42 deletions(-)

diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
index 1f429301e31..6c94558c677 100644
--- a/src/components/tabs/tabs.stories.ts
+++ b/src/components/tabs/tabs.stories.ts
@@ -150,39 +150,19 @@ export const justTabNav = (): string => html`
   </calcite-tab-nav>
 `;
 
-export const disabledTabs_TestOnly = (): string => {
-  const disabledLabel = "Disabled Tabs";
-  const disabledValuesObj = {
-    Tab1: "tab1",
-    Tab2: "tab2",
-    Tab3: "tab3"
-  };
-  const defaultValue = "tab2";
-  const optionsKnobSelections = optionsKnob(
-    disabledLabel,
-    disabledValuesObj,
-    defaultValue,
-    { display: "multi-select" },
-    "DISABLED-TABS"
-  );
-  const tab1disabled = optionsKnobSelections.includes(disabledValuesObj.Tab1);
-  const tab2disabled = optionsKnobSelections.includes(disabledValuesObj.Tab2);
-  const tab3disabled = optionsKnobSelections.includes(disabledValuesObj.Tab3);
-
-  return `
-      <calcite-tabs>
-        <calcite-tab-nav slot="title-group">
-          <calcite-tab-title selected ${tab1disabled ? "disabled" : ""}>Tab 1 Title</calcite-tab-title>
-          <calcite-tab-title ${tab2disabled ? "disabled" : ""}>Tab 2 Title</calcite-tab-title>
-          <calcite-tab-title ${tab3disabled ? "disabled" : ""}>Tab 3 Title</calcite-tab-title>
-        </calcite-tab-nav>
+export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html`
+  <calcite-tabs scale="l">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title disabled icon-start="arrow-left">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title disabled icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+    </calcite-tab-nav>
 
-        <calcite-tab selected><p>Tab 1 Content</p></calcite-tab>
-        <calcite-tab><p>Tab 2 Content</p></calcite-tab>
-        <calcite-tab><p>Tab 3 Content</p></calcite-tab>
-      </calcite-tabs>
-    `;
-};
+    <calcite-tab><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
 
 export const TabChilrenWithPercentageHeights = (): string => html`
   <calcite-tabs style="height: 250px;">
@@ -194,13 +174,3 @@ export const TabChilrenWithPercentageHeights = (): string => html`
     </calcite-tab>
   </calcite-tabs>
 `;
-
-export const mediumIconForLargeTabTitle_TestOnly = (): string => html`
-  <calcite-tabs scale="l">
-    <calcite-tab-nav slot="title-group">
-      <calcite-tab-title>Tab 1 Title</calcite-tab-title>
-      <calcite-tab-title icon-start="arrow-left" selected>Tab 2 Title</calcite-tab-title>
-      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
-    </calcite-tab-nav>
-  </calcite-tabs>
-`;

From be187ca62a56df28c14ec09c2b53c790e9fc03c5 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 16:52:49 -0800
Subject: [PATCH 07/11] WIP: adjust padding

---
 src/components/input/input.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 2dbc725ea88..350db793e8b 100755
--- 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

From c3a136caf51d8e2804cb5c9dd4bfc149602744b6 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 16:55:12 -0800
Subject: [PATCH 08/11] WIP: revert changes to input-message

---
 src/components/input-message/input-message.tsx | 2 +-
 src/components/input/input.stories.ts          | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/input-message/input-message.tsx b/src/components/input-message/input-message.tsx
index c94b8c9e649..414308e997e 100644
--- a/src/components/input-message/input-message.tsx
+++ b/src/components/input-message/input-message.tsx
@@ -87,7 +87,7 @@ export class InputMessage {
           class="calcite-input-message-icon"
           flipRtl={this.iconFlipRtl}
           icon={iconName}
-          scale={this.scale === "l" ? "m" : "s"}
+          scale="s"
         />
       );
     }
diff --git a/src/components/input/input.stories.ts b/src/components/input/input.stories.ts
index 92de144f02f..176ae6a7d5f 100644
--- a/src/components/input/input.stories.ts
+++ b/src/components/input/input.stories.ts
@@ -155,10 +155,8 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const hebrewNumberingSystemWithInputMessageMediumIconForLargeScale_TestOnly = (): string => html`
-  <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456" scale="l"></calcite-input>
-  <calcite-input-message status="idle" scale="l" icon> Info message </calcite-input-message>
-`;
+export const hebrewNumberingSystem_TestOnly = (): string =>
+  html` <calcite-input type="number" lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input>`;
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;

From a59e966de9b1895345864460177810f67ee07c6d Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 12 Jan 2023 22:54:02 -0800
Subject: [PATCH 09/11] WIP: tab-title padding adjustment to match for no icon,
 icon with border, and icon without

---
 src/components/tab-title/resources.ts   |  8 ++++++++
 src/components/tab-title/tab-title.scss |  8 +++++---
 src/components/tab-title/tab-title.tsx  | 10 ++++++----
 src/components/tab/tab.scss             |  3 ++-
 4 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 src/components/tab-title/resources.ts

diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts
new file mode 100644
index 00000000000..056e5a843af
--- /dev/null
+++ b/src/components/tab-title/resources.ts
@@ -0,0 +1,8 @@
+export const CSS = {
+  container: "container",
+  containerHasText: "container--has-text",
+  iconEnd: "iconEnd",
+  iconStart: "iconStart",
+  iconPresent: "iconPresent",
+  titleIcon: "calcite-tab-title--icon"
+};
diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
index edc4990f1d1..54f59d095f1 100644
--- 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;
   }
+  .iconPresent {
+    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
index eec9ab05018..c6eae590509 100644
--- 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 "../tab-title/resources";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -148,7 +149,7 @@ export class TabTitle implements InteractiveComponent {
 
     const iconStartEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-start"
+        class={(CSS.titleIcon, CSS.iconStart)}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
         scale={this.scale === "l" ? "m" : "s"}
@@ -157,7 +158,7 @@ export class TabTitle implements InteractiveComponent {
 
     const iconEndEl = (
       <calcite-icon
-        class="calcite-tab-title--icon icon-end"
+        class={(CSS.titleIcon, CSS.iconStart)}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale={this.scale === "l" ? "m" : "s"}
@@ -174,8 +175,9 @@ export class TabTitle implements InteractiveComponent {
       >
         <div
           class={{
-            container: true,
-            "container--has-text": this.hasText
+            [CSS.container]: true,
+            [CSS.iconPresent]: this.iconStart || this.iconEnd ? iconStartEl : 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
index 4087e80de22..fd3b3980f51 100644
--- 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;
 }

From 9931e0ab96e7b551f8a33cf377f5e1efe20f23c4 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Fri, 13 Jan 2023 11:43:47 -0800
Subject: [PATCH 10/11] WIP: cleanup

---
 src/components/tab-title/resources.ts     |  6 +++---
 src/components/tab-title/tab-title.e2e.ts | 15 +++++++++------
 src/components/tab-title/tab-title.scss   |  2 +-
 src/components/tab-title/tab-title.tsx    | 10 +++++-----
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/tab-title/resources.ts b/src/components/tab-title/resources.ts
index 056e5a843af..7f77684e88e 100644
--- a/src/components/tab-title/resources.ts
+++ b/src/components/tab-title/resources.ts
@@ -1,8 +1,8 @@
 export const CSS = {
   container: "container",
   containerHasText: "container--has-text",
-  iconEnd: "iconEnd",
-  iconStart: "iconStart",
-  iconPresent: "iconPresent",
+  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
index 8642cf84f9f..0fcccd1f224 100644
--- 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
index 54f59d095f1..9c6c6b6c62b 100644
--- a/src/components/tab-title/tab-title.scss
+++ b/src/components/tab-title/tab-title.scss
@@ -168,7 +168,7 @@
   .container {
     @apply px-4;
   }
-  .iconPresent {
+  .icon-present {
     padding-block: 11px;
   }
 }
diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index c6eae590509..b3c76dbfb47 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -19,7 +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 "../tab-title/resources";
+import { CSS } from "./resources";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 
 /**
@@ -149,7 +149,7 @@ export class TabTitle implements InteractiveComponent {
 
     const iconStartEl = (
       <calcite-icon
-        class={(CSS.titleIcon, CSS.iconStart)}
+        class={{ [CSS.titleIcon]: true, [CSS.iconStart]: true }}
         flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
         icon={this.iconStart}
         scale={this.scale === "l" ? "m" : "s"}
@@ -158,7 +158,7 @@ export class TabTitle implements InteractiveComponent {
 
     const iconEndEl = (
       <calcite-icon
-        class={(CSS.titleIcon, CSS.iconStart)}
+        class={{ [CSS.titleIcon]: true, [CSS.iconEnd]: true }}
         flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale={this.scale === "l" ? "m" : "s"}
@@ -175,8 +175,8 @@ export class TabTitle implements InteractiveComponent {
       >
         <div
           class={{
-            [CSS.container]: true,
-            [CSS.iconPresent]: this.iconStart || this.iconEnd ? iconStartEl : null,
+            container: true,
+            [CSS.iconPresent]: this.iconStart || this.iconEnd ? true : null,
             [CSS.containerHasText]: this.hasText
           }}
           ref={(el) => this.resizeObserver?.observe(el)}

From c01c9f08865f4ba9f80dde9c5d826f2a642830e1 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Fri, 13 Jan 2023 14:50:17 -0800
Subject: [PATCH 11/11] WIP: input-number and input-text padding adjustment for
 with and without icon presence

---
 src/components/input-number/input-number.scss |  2 +-
 .../input-number/input-number.stories.ts      | 35 +++++++++++++++++--
 src/components/input-text/input-text.scss     |  2 +-
 .../input-text/input-text.stories.ts          |  4 +--
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/input-number/input-number.scss b/src/components/input-number/input-number.scss
index ef29307c4b9..35418a3532e 100755
--- 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
index 3715588e3b6..09f368f0e99 100644
--- 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 hebrewNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string =>
-  html`<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456" scale="l"></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-text/input-text.scss b/src/components/input-text/input-text.scss
index b5d213a6584..0d0d2f4a13d 100755
--- 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
index 3bad5dfb587..6c86a41429b 100644
--- a/src/components/input-text/input-text.stories.ts
+++ b/src/components/input-text/input-text.stories.ts
@@ -96,14 +96,14 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const mediumIconForLargeScale_TestOnly = (): string => html`
+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"
-      icon
       clearable
       value="sample input to show x"
     ></calcite-input-text>