chore: cleanup

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss

@@ -115,6 +115,14 @@
   @apply mt-0;
 }
 
+.message-container {
+  padding-block-start: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
 :host([range][layout="vertical"][scale="m"]) .vertical-arrow-container {
   inset-block-start: theme("spacing.6");
   padding-inline-start: theme("spacing.3");

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -632,8 +632,6 @@ export class InputDatePicker
                   }}
                   disabled={disabled}
                   icon="calendar"
-                  messageIcon={this.messageIcon}
-                  messageText={this.messageText}
                   onCalciteInputTextInput={this.calciteInternalInputInputHandler}
                   onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
                   onCalciteInternalInputTextFocus={this.endInputFocus}
@@ -652,6 +650,13 @@ export class InputDatePicker
           </div>
         )}
         <HiddenFormInputSlot component={this} />
+        {this.messageText ? (
+          <div class={CSS.messageContainer}>
+            <calcite-input-message icon={this.messageIcon} scale={this.scale} status={this.status}>
+              {this.messageText}
+            </calcite-input-message>
+          </div>
+        ) : null}
       </Host>
     );
   }

packages/calcite-components/src/components/input-number/input-number.stories.ts

@@ -84,11 +84,9 @@ export const darkModeRTL_TestOnly = (): string => html`
         ${boolean("disabled", false)}
         value="${text("value", "")}"
         placeholder="${text("placeholder", "Placeholder text")}"
+        message-text="My great input message"
       >
       </calcite-input-number>
-      <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-        >${text("input message text", "My great input message")}</calcite-input-message
-      >
     </calcite-label>
   </div>
 `;

packages/calcite-components/src/components/input-text/input-text.stories.ts

@@ -66,11 +66,9 @@ export const darkModeRTL_TestOnly = (): string => html`
       ${boolean("disabled", false)}
       value="${text("value", "")}"
       placeholder="${text("placeholder", "Placeholder text")}"
+      message-text="My great input message"
     >
     </calcite-input-text>
-    <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

packages/calcite-components/src/components/input-time-picker/input-time-picker.scss

@@ -29,6 +29,14 @@
   @apply relative;
 }
 
+.message-container {
+  padding-block-start: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
 .toggle-icon {
   @apply absolute flex cursor-pointer items-center;
   inset-inline-end: 0;

packages/calcite-components/src/components/input/input.stories.ts

@@ -72,27 +72,6 @@ export const withSlottedAction = (): string => html`
   </div>
 `;
 
-export const textarea = (): string => html`
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input
-      id="input-with-text-area"
-      type="textarea"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      value="${text("value", "")}"
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-      message-text="${text("message-text", "My great input message")}"
-      message-icon="${select("message-icon", ["", ...iconNames], "")}"
-    >
-    </calcite-input>
-  </div>
-`;
-
 export const disabled_TestOnly = (): string => html`<calcite-input disabled value="disabled"></calcite-input>`;
 
 export const darkModeRTL_TestOnly = (): string => html`
@@ -123,11 +102,9 @@ export const darkModeRTL_TestOnly = (): string => html`
         ${boolean("disabled", false)}
         value="${text("value", "")}"
         placeholder="${text("placeholder", "Placeholder text")}"
+        message-text="My great input message"
       >
       </calcite-input>
-      <calcite-input-message status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-        >${text("input message text", "My great input message")}</calcite-input-message
-      >
     </calcite-label>
   </div>
 `;

packages/calcite-components/src/components/text-area/text-area.stories.ts

@@ -96,8 +96,8 @@ export const validationMessageAllScales_TestOnly = (): string =>
         display: flex;
         flex-direction: column;
         width: 420px;
-        height: 240px;
-        gap: 69px;
+        height: 200px;
+        gap: 50px;
       }
     </style>
     <div class="container">
@@ -112,14 +112,14 @@ export const validationMessageAllScales_TestOnly = (): string =>
         status="invalid"
         message-text="Less than the minimum length of 6 characters"
         message-icon
-        value="HI"
+        value="Hi"
       ></calcite-text-area>
       <calcite-text-area
         scale="l"
         status="invalid"
         message-text="Exceeds the maximum length of 9 characters"
         message-icon
-        value="LOREM IPSUM"
+        value="Lorem ipsum"
       ></calcite-text-area>
     </div>
   `;