fix(input-date-picker): fix date-picker wrapper displaying beyond its…

… bounds (#8172) **Related Issue:** #6678 ## Summary This removes unnecessary sizing applied to the date-picker's wrapper which displayed an artifact when configuring the `input-date-picker` with `scale=l` and `range`. <img width="439" alt="MicrosoftTeams-image (2)" src="https://github.com/Esri/calcite-design-system/assets/197440/45d9e894-efa6-480e-902b-10990428a8ef">
Esri · Nov 15, 2023 · c06aa42 · c06aa42
1 parent 11690cc
commit c06aa42
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 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
@@ -24,9 +24,7 @@
 @include disabled();
 
 .calendar-picker-wrapper {
-  @apply static
-    w-full
-    shadow-none;
+  @apply shadow-none;
   transform: translate3d(0, 0, 0);
 }
 
@@ -89,24 +87,6 @@
   }
 }
 
-:host([scale="s"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 216px;
-  }
-}
-
-:host([scale="m"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 286px;
-  }
-}
-
-:host([scale="l"][range]:not([layout="vertical"])) {
-  .calendar-picker-wrapper {
-    inline-size: 398px;
-  }
-}
-
 .menu-container {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floatingUIContainer();

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
@@ -96,9 +96,56 @@ export const invalidStatus_TestOnly = (): string => html`
 
 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>
+    <style>
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 1400px;
+        height: 1200px;
+        gap: 400px;
+      }
+
+      .use-case {
+        display: flex;
+        gap: 100px;
+      }
+    </style>
+    <div class="container">
+      <div class="use-case">
+        <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
+        <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
+        <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
+      </div>
+      <div class="use-case">
+        <calcite-input-date-picker
+          scale="s"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+        <calcite-input-date-picker
+          scale="m"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+        <calcite-input-date-picker
+          scale="l"
+          open
+          start="2020-12-12"
+          end="2020-12-16"
+          range
+          layout="horizontal"
+          value="2020-12-12"
+        ></calcite-input-date-picker>
+      </div>
+    </div>
   `;
 
 export const darkModeRTL_TestOnly = (): string => html`