refactor: add mixin, replace input-message with the new props in demos

Esri · Dec 1, 2023 · 1419681 · 1419681
1 parent f7e48f1
commit 1419681
Showing 13 changed files with 330 additions and 131 deletions.
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -37,6 +37,17 @@
   }
 }
 
+// mixin for the container of validation messages displayed below form-associated components
+@mixin form-validation-message() {
+  .message-container {
+    padding-block-start: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+}
+
 // mixin to provide base disabled styles for interactive components
 // additional styling can be passed via @content
 @mixin disabled() {

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -206,14 +206,6 @@
   @apply sr-only;
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 .list-container {
   @apply bg-foreground-1
     max-h-menu
@@ -250,6 +242,7 @@ calcite-chip {
   @apply block;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
 

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
@@ -115,14 +115,6 @@
   @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");
@@ -145,6 +137,7 @@
   }
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 
 .assistive-text {

diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -122,14 +122,6 @@ input:focus {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // ICONS
 
 // position icons
@@ -421,5 +413,6 @@ input:focus {
   padding-inline-start: 0;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -112,14 +112,6 @@ input {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // states
 input {
   @apply text-color-1
@@ -345,5 +337,6 @@ input[type="text"]::-ms-reveal {
   padding-inline-start: 0;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
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
@@ -29,19 +29,12 @@
   @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;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
 }
 
+@include form-validation-message();
 @include base-component();
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
@@ -174,14 +174,6 @@ input:focus {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 // ICONS
 
 // position icons
@@ -582,5 +574,6 @@ input {
   }
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
@@ -16,14 +16,6 @@
   inline-size: var(--select-width);
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 @include disabled();
 
 :host([scale="s"]) {
@@ -134,5 +126,6 @@ select:disabled {
   @apply border-color-transparent;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -149,14 +149,6 @@ textarea {
   }
 }
 
-.message-container {
-  padding-block-start: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
 .readonly {
   @apply bg-background font-medium;
 }
@@ -198,6 +190,7 @@ textarea.block-size--full {
   @apply sr-only;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include disabled();
 @include base-component();
diff --git a/packages/calcite-components/src/demos/input-text.html b/packages/calcite-components/src/demos/input-text.html
@@ -182,22 +182,40 @@
         <div class="child-flex font right-aligned-text">Message Info</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="s" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="m" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="idle" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="idle" scale="l" icon> Info message </calcite-input-message>
+            <calcite-input-text
+              status="idle"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Info message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -207,22 +225,40 @@
         <div class="child-flex font right-aligned-text">Message Success</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="s" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="m" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="valid" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="valid" scale="l" icon> Success message </calcite-input-message>
+            <calcite-input-text
+              status="valid"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Success message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -231,23 +267,27 @@
       <div class="parent-flex">
         <div class="child-flex font right-aligned-text">Message Warning</div>
         <div class="child-flex">
-          <calcite-label scale="s">
-            <calcite-input-text placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message scale="s" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+          <calcite-label scale="s"
+            ><calcite-input-text
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Warning message"
+              message-icon
+            ></calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message scale="m" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input-text placeholder="Placeholder" scale="m" message-text="Warning message" message-icon>
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message scale="l" icon="exclamation-mark-triangle"> Warning message </calcite-input-message>
+            <calcite-input-text placeholder="Placeholder" scale="l" message-text="Warning message" message-icon>
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>
@@ -257,22 +297,40 @@
         <div class="child-flex font right-aligned-text">Message Error</div>
         <div class="child-flex">
           <calcite-label scale="s">
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="s"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="s" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="s"
+              message-text="Error message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label>
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="m"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="m" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="m"
+              message-text="Warning message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
 
         <div class="child-flex">
           <calcite-label scale="l">
-            <calcite-input-text status="invalid" placeholder="Placeholder" scale="l"> </calcite-input-text>
-            <calcite-input-message status="invalid" scale="l" icon> Error message </calcite-input-message>
+            <calcite-input-text
+              status="invalid"
+              placeholder="Placeholder"
+              scale="l"
+              message-text="Warning message"
+              message-icon
+            >
+            </calcite-input-text>
           </calcite-label>
         </div>
       </div>