@utahdts/utah-design-system 1.5.1 → 1.6.1

package/css/6-components/_components-index.scss

@@ -13,7 +13,9 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/footer/footer-agency-information";
 @use "base-components/footer/footer-social-media-bar";
 @use "base-components/forms/input-wrapper";
+@use "base-components/forms/text-area";
 @use "base-components/forms/text-input";
+@use "base-components/forms/character-count";
 @use "base-components/forms/checkbox";
 @use "base-components/forms/select-input";
 @use "base-components/forms/info-box";

package/css/6-components/base-components/buttons/_button.scss

@@ -88,6 +88,7 @@
       [class*='utds-icon-after-']::after,
       [class*='utds-icon-before-']::before {
         font-size: .9em;
+        line-height: 0;
       }
     }
     &--icon-left {

package/css/6-components/base-components/forms/_character-count.scss

@@ -0,0 +1,8 @@
+.character-count {
+  text-align: right;
+  font-size: var(--font-size-s);
+  margin: var(--spacing-2xs) 0 0 0;
+  &--over-limit {
+    color: var(--danger-color);
+  }
+}

package/css/6-components/base-components/forms/_input-wrapper.scss

@@ -13,9 +13,16 @@
       margin: var(--spacing) 0 var(--spacing-2xs) 0;
     }
 
+    &--mb-zero {
+      margin: 0;
+    }
+
     &__error-message {
       color: var(--danger-color);
     }
+    input, textarea {
+      display: block;
+    }
   }
   .required-star {
     color: var(--danger-color);

package/css/6-components/base-components/forms/_text-area.scss

@@ -0,0 +1,55 @@
+@use "../../../2-tools/tools-index";
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  textarea {
+    color: var(--gray-color);
+    min-height: var(--form-ele-medium);
+    border-radius: var(--radius-small);
+    box-sizing: border-box;
+    border: 1px solid var(--gray-color);
+    width: 100%;
+    padding: var(--spacing-xs);
+
+    @include tools-index.form-ele-hover-medium;
+    @include tools-index.form-ele-focus;
+
+    &:disabled {
+      background-color: var(--disabled-gray);
+      cursor: not-allowed;
+    }
+
+    &[aria-invalid="true"] {
+      border: 2px solid var(--danger-color)
+    }
+
+    &.text-area {
+      &--clear-icon-visible {
+        padding: var(--spacing-xs) var(--spacing-xl) var(--spacing-xs) var(--spacing-xs);
+      }
+    }
+  }
+  .text-area {
+    &__inner-wrapper {
+      position: relative;
+      width: 100%;
+    }
+    &__clear-button {
+      position: absolute;
+      top: var(--spacing);
+      transform: translateY(-50%);
+      right: var(--spacing-xs);
+      font-weight: var(--font-weight-normal);
+      transition: transform;
+      [class*=utds-icon-before-]::before {
+        font-size: .7rem;
+      }
+      &[disabled]:active {
+        transform: translateY(-50%);
+      }
+    }
+    &__label {
+      display: block;
+    }
+  }
+}

package/css/6-components/base-components/forms/_text-input.scss

@@ -3,8 +3,7 @@
 @use "../../../1-settings/class-vars";
 
 #{class-vars.$base-class} {
-  input[type="text"],
-  textarea {
+  input[type="text"] {
     color: var(--gray-color);
     min-height: var(--form-ele-medium);
     border-radius: var(--radius-small);
@@ -50,8 +49,4 @@
       }
     }
   }
-
-  textarea {
-    padding: var(--spacing-xs);
-  }
 }

package/css/6-components/base-components/tablesAndLists/_table.scss

@@ -119,6 +119,7 @@
         }
       }
     }
+
     .table-header {
       position: relative;
 
@@ -138,7 +139,7 @@
             color: var(--primary-color);
           }
           &:focus-visible {
-            outline-offset: -2PX;
+            outline-offset: -2px;
           }
         }
       }
@@ -228,4 +229,18 @@
       }
     }
   }
+
+  // Other table class elements
+  .table {
+    &__no-results-td {
+      text-align: center;
+    }
+    &__no-results-text {
+      display: block;
+      background: var(--gray-light-color);
+      padding: var(--spacing);
+      margin: var(--spacing);
+      border-radius: var(--radius-small);
+    }
+  }
 }

package/dist/style.css

@@ -2038,6 +2038,7 @@ scss mixins and functions
 .utah-design-system .button--icon [class*=utds-icon-after-]::after,
 .utah-design-system .button--icon [class*=utds-icon-before-]::before {
   font-size: 0.9em;
+  line-height: 0;
 }
 
 .utah-design-system .button--icon-left {
@@ -2634,10 +2635,18 @@ base color swatches for the design system
   margin: var(--spacing) 0 var(--spacing-2xs) 0;
 }
 
+.utah-design-system .input-wrapper--mb-zero {
+  margin: 0;
+}
+
 .utah-design-system .input-wrapper__error-message {
   color: var(--danger-color);
 }
 
+.utah-design-system .input-wrapper input, .utah-design-system .input-wrapper textarea {
+  display: block;
+}
+
 .utah-design-system .required-star {
   color: var(--danger-color);
   margin-left: var(--spacing-3xs);
@@ -2647,7 +2656,6 @@ base color swatches for the design system
   line-height: 0.5;
 }
 
-.utah-design-system input[type=text],
 .utah-design-system textarea {
   color: var(--gray-color);
   min-height: var(--form-ele-medium);
@@ -2655,37 +2663,94 @@ base color swatches for the design system
   box-sizing: border-box;
   border: 1px solid var(--gray-color);
   width: 100%;
-  padding: 0 var(--spacing-xs);
+  padding: var(--spacing-xs);
   box-shadow: var(--hover-gray-color) 0 0 0 0;
   transition: box-shadow var(--timing-xquick) ease-in-out;
 }
 
-.utah-design-system input[type=text]:hover,
 .utah-design-system textarea:hover {
   box-shadow: var(--hover-gray-color) 0 0 0 5px;
   border-color: black;
 }
 
-.utah-design-system input[type=text]:focus-visible,
 .utah-design-system textarea:focus-visible {
   outline: 2px solid var(--form-ele-color);
   outline-offset: 2px;
   transition: none;
 }
 
-.utah-design-system input[type=text]:disabled,
 .utah-design-system textarea:disabled {
   background-color: var(--disabled-gray);
   cursor: not-allowed;
 }
 
-.utah-design-system input[type=text][aria-invalid=true],
 .utah-design-system textarea[aria-invalid=true] {
   border: 2px solid var(--danger-color);
 }
 
-.utah-design-system input[type=text].text-input--clear-icon-visible,
-.utah-design-system textarea.text-input--clear-icon-visible {
+.utah-design-system textarea.text-area--clear-icon-visible {
+  padding: var(--spacing-xs) var(--spacing-xl) var(--spacing-xs) var(--spacing-xs);
+}
+
+.utah-design-system .text-area__inner-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.utah-design-system .text-area__clear-button {
+  position: absolute;
+  top: var(--spacing);
+  transform: translateY(-50%);
+  right: var(--spacing-xs);
+  font-weight: var(--font-weight-normal);
+  transition: transform;
+}
+
+.utah-design-system .text-area__clear-button [class*=utds-icon-before-]::before {
+  font-size: 0.7rem;
+}
+
+.utah-design-system .text-area__clear-button[disabled]:active {
+  transform: translateY(-50%);
+}
+
+.utah-design-system .text-area__label {
+  display: block;
+}
+
+.utah-design-system input[type=text] {
+  color: var(--gray-color);
+  min-height: var(--form-ele-medium);
+  border-radius: var(--radius-small);
+  box-sizing: border-box;
+  border: 1px solid var(--gray-color);
+  width: 100%;
+  padding: 0 var(--spacing-xs);
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+.utah-design-system input[type=text]:hover {
+  box-shadow: var(--hover-gray-color) 0 0 0 5px;
+  border-color: black;
+}
+
+.utah-design-system input[type=text]:focus-visible {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.utah-design-system input[type=text]:disabled {
+  background-color: var(--disabled-gray);
+  cursor: not-allowed;
+}
+
+.utah-design-system input[type=text][aria-invalid=true] {
+  border: 2px solid var(--danger-color);
+}
+
+.utah-design-system input[type=text].text-input--clear-icon-visible {
   padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
 }
 
@@ -2710,8 +2775,14 @@ base color swatches for the design system
   transform: translateY(-50%);
 }
 
-.utah-design-system textarea {
-  padding: var(--spacing-xs);
+.character-count {
+  text-align: right;
+  font-size: var(--font-size-s);
+  margin: var(--spacing-2xs) 0 0 0;
+}
+
+.character-count--over-limit {
+  color: var(--danger-color);
 }
 
 .utah-design-system input[type=checkbox] {
@@ -5068,7 +5139,7 @@ BEM standard: Block, Element, Modifier
 }
 
 .utah-design-system table .table-header--sortable button:focus-visible {
-  outline-offset: -2PX;
+  outline-offset: -2px;
 }
 
 .utah-design-system table .table-header__cell {
@@ -5158,6 +5229,18 @@ BEM standard: Block, Element, Modifier
   padding: 0 var(--spacing-l) 0 var(--spacing-xs);
 }
 
+.utah-design-system .table__no-results-td {
+  text-align: center;
+}
+
+.utah-design-system .table__no-results-text {
+  display: block;
+  background: var(--gray-light-color);
+  padding: var(--spacing);
+  margin: var(--spacing);
+  border-radius: var(--radius-small);
+}
+
 .utah-design-system .on-this-page {
   font-size: var(--font-size-xs);
 }