@hashicorp/design-system-components 1.0.4 → 1.2.0

package/app/styles/components/dropdown.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 // >>>>>>>>>> WARNING <<<<<<<<<<<
 //
 // Notice: in this component we're using directly the `Hds::Button` component
@@ -18,7 +19,7 @@
 //
 //
 
-@use '../mixins/focus-ring' as *;
+@use "../mixins/focus-ring" as *;
 
 $hds-dropdown-toggle-base-height: 36px;
 $hds-dropdown-toggle-border-radius: 5px;
@@ -27,17 +28,17 @@ $hds-dropdown-toggle-border-radius: 5px;
 // TOGGLE/ICON
 
 .hds-dropdown-toggle-icon {
+  display: flex;
   align-items: center;
+  justify-content: center;
+  min-width: $hds-dropdown-toggle-base-height;
+  height: $hds-dropdown-toggle-base-height;
+  padding: 1px;
   background-color: transparent;
   border: 1px solid transparent; // We need this to be transparent for a11y
   border-radius: $hds-dropdown-toggle-border-radius;
-  display: flex;
-  height: $hds-dropdown-toggle-base-height;
-  justify-content: center;
-  min-width: $hds-dropdown-toggle-base-height;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
-  padding: 1px;
 
   &:hover,
   &.mock-hover {
@@ -56,19 +57,19 @@ $hds-dropdown-toggle-border-radius: 5px;
 }
 
 .hds-dropdown-toggle-icon__wrapper {
-  align-items: center;
-  border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
   display: flex;
+  align-items: center;
   justify-content: center;
+  width: 32px;
   height: 32px;
   padding: 1px;
-  width: 32px;
+  border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
 
   img {
-    border-radius: inherit;
+    width: 100%;
     height: 100%;
     object-fit: cover; // this will make sure it's correct even if the item isn't square
-    width: 100%;
+    border-radius: inherit;
   }
 }
 
@@ -76,7 +77,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   margin-left: 4px;
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform .3s;
+    transition: transform 0.3s;
   }
 
   .hds-dropdown-toggle-icon--is-open & {
@@ -90,11 +91,11 @@ $hds-dropdown-toggle-border-radius: 5px;
   box-shadow: none; // we override this to remove the elevation style
 
   .hds-button__icon {
-    margin-left: 8px; // this overrides the rule `.hds-button__text + .hds-button__icon`
     margin-right: -6px; // we apply a negative margin to counter the padding-right of the button and reduce the visual space between the icon and the right border
+    margin-left: 8px; // this overrides the rule `.hds-button__text + .hds-button__icon`
 
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
   }
 }
@@ -112,33 +113,33 @@ $hds-dropdown-toggle-border-radius: 5px;
 // GOES INSIDE HDS::DISCLOSURE's :content block
 
 .hds-dropdown-list {
+  width: max-content; // notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width)
+  min-width: 200px;
+  max-width: 400px;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
   background-color: var(--token-color-surface-primary);
   border-radius: 6px;
   box-shadow: var(--token-surface-high-box-shadow);
-  list-style: none;
-  margin: 0;
-  max-width: 400px;
-  min-width: 200px;
-  padding: 4px 0;
-  width: max-content; // notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width)
 }
 
 .hds-dropdown-list--fixed-width {
-  max-width: initial;
   min-width: initial;
+  max-width: initial;
 }
 
 .hds-dropdown-list--position-right {
   position: absolute;
-  right: 0;
   top: calc(100% + 4px);
+  right: 0;
   z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
 .hds-dropdown-list--position-left {
-  left: 0;
   position: absolute;
   top: calc(100% + 4px);
+  left: 0;
   z-index: 2; // https://github.com/hashicorp/design-system/issues/114
 }
 
@@ -147,23 +148,23 @@ $hds-dropdown-toggle-border-radius: 5px;
 // HDS::DROPDOWN::LIST-ITEM
 
 .hds-dropdown-list-item__copy-item-title {
-  color: var(--token-color-foreground-faint);
   padding: 2px 0 4px;
+  color: var(--token-color-foreground-faint);
 }
 
 .hds-dropdown-list-item--copy-item {
-  padding: 10px 16px 12px;
   width: 100%;
+  padding: 10px 16px 12px;
 
   button {
-    background-color: transparent;
-    border-radius: 5px;
-    border: 1px solid var(--token-color-border-primary);
-    color: var(--token-color-foreground-primary);
     display: flex;
     justify-content: space-between;
-    padding: 12px 8px;
     width: 100%;
+    padding: 12px 8px;
+    color: var(--token-color-foreground-primary);
+    background-color: transparent;
+    border: 1px solid var(--token-color-border-primary);
+    border-radius: 5px;
 
     &:hover,
     &.mock-hover {
@@ -175,8 +176,8 @@ $hds-dropdown-toggle-border-radius: 5px;
 
     &:focus,
     &.mock-focus {
-      //TODO this focus is just way too complex
-      background-color:  var(--token-color-surface-action);
+      // TODO this focus is just way too complex
+      background-color: var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
 
@@ -198,77 +199,77 @@ $hds-dropdown-toggle-border-radius: 5px;
 
 .hds-dropdown-list-item__copy-item-text {
   overflow: hidden;
+  white-space: nowrap;
   text-align: left;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .hds-dropdown-list-item__copy-item-icon {
-  color: var(--token-color-foreground-action);
   flex: none;
   margin-left: 8px;
+  color: var(--token-color-foreground-action);
 }
 
 .hds-dropdown-list-item--description {
-  color: var(--token-color-foreground-faint);
   padding: 2px 16px 4px;
+  color: var(--token-color-foreground-faint);
 }
 
 .hds-dropdown-list-item--generic {
-  padding-left: 16px;
   padding-right: 16px;
+  padding-left: 16px;
 }
 
 
 .hds-dropdown-list-item--interactive {
-  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
-  min-height: 36px;
   position: relative;
+  min-height: 36px;
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
 
   // need to reset a few extra things to make the button visually appear the same as the link
   button {
-    background-color: transparent;
     width: 100%;
+    background-color: transparent;
 
     &:hover {
       cursor: pointer;
     }
-
   }
 
   // shared styles for links and buttons
-  a, button {
+  a,
+  button {
+    display: flex;
     align-items: center;
+    padding: 7px 9px 7px 15px; // notice: we're subtracting 1px because of the transparent border
+    text-decoration: none;
     border: 1px solid transparent; // because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height
-    display: flex;
     outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
     outline-color: transparent;
-    padding: 7px 9px 7px 15px; // notice: we're subtracting 1px because of the transparent border
-    text-decoration: none;
 
     // this is used for the left "hover" indicator
     &::before {
-      border-radius: 1px;
-      bottom: 6px;
-      content: '';
-      left: 4px;
       position: absolute;
       top: 6px;
-      width: 2px;
+      bottom: 6px;
+      left: 4px;
       z-index: -1;
+      width: 2px;
+      border-radius: 1px;
+      content: "";
     }
 
     // Notice: this is used for the active/focus states which have very specific positions
     // and also has a background color, so we can't use the existing focus-ring mixins
     &::after {
-      border-radius: 5px;
-      bottom: 0px;
-      content: '';
-      left: 10px;
       position: absolute;
-      right: 4px;
       top: 0;
+      right: 4px;
+      bottom: 0;
+      left: 10px;
       z-index: -1;
+      border-radius: 5px;
+      content: "";
     }
 
     // Notice: to avoid too much duplication we define two local CSS variables
@@ -277,6 +278,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     &:hover,
     &.mock-hover {
       color: var(--current-color-hover);
+
       &::before {
         background-color: currentColor;
       }
@@ -286,10 +288,11 @@ $hds-dropdown-toggle-border-radius: 5px;
     &:focus,
     &.mock-focus {
       color: var(--current-color-focus);
+
       &::after {
+        left: 4px;
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 4px;
       }
     }
     // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -302,10 +305,11 @@ $hds-dropdown-toggle-border-radius: 5px;
     // set focus for browsers that support ":focus-visible"
     &:focus-visible {
       color: var(--current-color-focus);
+
       &::after {
+        left: 4px;
         background-color: var(--current-background-color);
         box-shadow: var(--current-focus-ring-box-shadow);
-        left: 4px;
       }
     }
 
@@ -314,18 +318,20 @@ $hds-dropdown-toggle-border-radius: 5px;
     &:focus-visible:active,
     &.mock-focus.mock-active {
       &::after {
+        left: 10px;
         background-color: var(--current-background-color);
         box-shadow: none;
-        left: 10px;
       }
     }
 
     &:active,
     &.mock-active {
       color: var(--current-color-active);
+
       &::before {
         background-color: currentColor;
       }
+
       &::after {
         background-color: var(--current-background-color);
       }
@@ -342,13 +348,15 @@ $hds-dropdown-toggle-border-radius: 5px;
 }
 
 .hds-dropdown-list-item--color-action {
-  a, button {
+  a,
+  button {
     color: var(--token-color-foreground-primary);
 
     // assign the values to the local CSS variables used above
     --current-color-hover: var(--token-color-foreground-action-hover);
     --current-color-focus: var(--token-color-foreground-action-active);
     --current-color-active: var(--token-color-foreground-action-active);
+
     &::after {
       --current-background-color: var(--token-color-surface-action);
       --current-focus-ring-box-shadow: var(--token-focus-ring-action-box-shadow);
@@ -357,13 +365,15 @@ $hds-dropdown-toggle-border-radius: 5px;
 }
 
 .hds-dropdown-list-item--color-critical {
-  a, button {
+  a,
+  button {
     color: var(--token-color-foreground-critical);
 
     // assign the values to the local CSS variables used above
     --current-color-hover: var(--token-color-palette-red-300);
     --current-color-focus: var(--token-color-palette-red-400);
     --current-color-active: var(--token-color-palette-red-400);
+
     &::after {
       --current-background-color: var(--token-color-surface-critical);
       --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
@@ -372,8 +382,8 @@ $hds-dropdown-toggle-border-radius: 5px;
 }
 
 .hds-dropdown-list-item__interactive-loading-wrapper {
-  align-items: center;
   display: flex;
+  align-items: center;
   padding: 8px 10px 8px 16px;
 
   .hds-dropdown-list-item__interactive-text {
@@ -386,22 +396,22 @@ $hds-dropdown-toggle-border-radius: 5px;
 }
 
 .hds-dropdown-list-item--separator {
-  height: 4px;
   position: relative;
   width: 100%;
+  height: 4px;
 
   &::before {
-    border-bottom: 1px solid var(--token-color-border-primary);
-    bottom: 0;
-    content: '';
-    left: 6px;
     position: absolute;
     right: 6px;
+    bottom: 0;
+    left: 6px;
+    border-bottom: 1px solid var(--token-color-border-primary);
+    content: "";
   }
 }
 
 .hds-dropdown-list-item--title {
-  color: var(--token-color-foreground-strong);
   padding: 10px 16px 4px;
+  color: var(--token-color-foreground-strong);
 }
 

package/app/styles/components/empty-state.scss

@@ -1,25 +1,28 @@
 .hds-empty-state {
-  color: var(--token-color-foreground-faint);
   display: block;
-  margin: 0 auto;
   max-width: 40ch;
+  margin: 0 auto;
   padding: 0;
-  
+  color: var(--token-color-foreground-faint);
+
   > * {
     margin: 0;
     padding: 0;
   }
 }
+
 .hds-empty-state__body {
-  font-size: 1rem;
   font-weight: 400;
+  font-size: 1rem;
   line-height: 1.5;
+
   + * {
     margin-block-start: 1rem;
   }
 }
+
 .hds-empty-state__header {
-  font-size: 1.25rem;
   font-weight: 700;
+  font-size: 1.25rem;
   line-height: 1.2;
 }

package/app/styles/components/form/checkbox.scss

@@ -8,17 +8,17 @@
 // "BASE" CONTROL
 
 .hds-form-checkbox {
-  appearance: none;
+  width: var(--token-form-checkbox-size);
+  height: var(--token-form-checkbox-size);
+  margin: 0;
+  padding: 0;
   background-position: center center;
   background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size);
-  border-width: var(--token-form-checkbox-border-width);
   border-style: solid;
+  border-width: var(--token-form-checkbox-border-width);
   border-radius: var(--token-form-checkbox-border-radius);
   cursor: pointer;
-  height: var(--token-form-checkbox-size);
-  margin: 0;
-  padding: 0;
-  width: var(--token-form-checkbox-size);
+  appearance: none;
 
   // STATUS
 
@@ -29,10 +29,11 @@
     border-color: var(--token-form-control-base-border-color-default);
     box-shadow: var(--hds-elevation-inset-box-shadow);
   }
+
   &:checked {
     background-color: var(--token-form-control-checked-surface-color-default);
-    border-color: var(--token-form-control-checked-border-color-default);
     background-image: var(--token-form-checkbox-background-image-data-url);
+    border-color: var(--token-form-control-checked-border-color-default);
   }
 
   // hover
@@ -42,6 +43,7 @@
     background-color: var(--token-form-control-base-surface-color-hover);
     border-color: var(--token-form-control-base-border-color-hover);
   }
+
   &:hover:checked,
   &.mock-hover:checked {
     background-color: var(--token-form-control-checked-border-color-default);
@@ -64,11 +66,12 @@
     box-shadow: none;
     cursor: not-allowed;
   }
+
   &:disabled:checked {
     background-color: var(--token-form-control-disabled-surface-color);
+    background-image: var(--token-form-checkbox-background-image-data-url-disabled);
     border-color: var(--token-form-control-disabled-border-color);
     box-shadow: none;
-    background-image: var(--token-form-checkbox-background-image-data-url-disabled);
     cursor: not-allowed;
   }
 }

package/app/styles/components/form/error.scss

@@ -5,16 +5,16 @@
 //
 
 .hds-form-error {
+  display: flex;
   align-items: flex-start;
   color: var(--token-form-error-color);
-  display: flex;
 }
 
 .hds-form-error__icon {
   flex: none;
+  width: var(--token-form-error-icon-size);
   height: var(--token-form-error-icon-size);
   margin: 2px 8px 2px 0;
-  width: var(--token-form-error-icon-size);
 }
 
 .hds-form-error__content {
@@ -23,4 +23,4 @@
 
 .hds-form-error__message {
   margin: 0;
-}
+}

package/app/styles/components/form/field.scss

@@ -32,6 +32,7 @@
     &:not(:first-child) {
       margin-top: 8px;
     }
+
     &:not(:last-child) {
       margin-bottom: 8px;
     }
@@ -45,13 +46,14 @@
 
 .hds-form-field--layout-flag {
   display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto auto;
   grid-auto-flow: row;
+  // stylelint-disable-next-line declaration-colon-space-after
   grid-template-areas:
     "control label"
     "control helper-text"
     "control error";
+  grid-template-rows: auto auto auto;
+  grid-template-columns: auto 1fr;
   justify-items: start;
 
   .hds-form-field__label {
@@ -74,13 +76,12 @@
   }
 
   .hds-form-field__error {
-    margin-top: 4px;
     grid-area: error;
+    margin-top: 4px;
   }
 }
 
 
-
 // Debug (please don't remove)
 //
 // .hds-form-field--layout-vertical,

package/app/styles/components/form/group.scss

@@ -5,10 +5,10 @@
 //
 
 .hds-form-group { // notice: this is a <fieldset> element
-  border: none;
   display: block;
   margin: 0;
   padding: 0;
+  border: none;
 }
 
 .hds-form-group__legend { // notice: this is a <legend> element
@@ -37,6 +37,7 @@
     flex-wrap: wrap;
     margin-bottom: -4px;
   }
+
   .hds-form-group__control-field {
     margin-right: 16px;
     margin-bottom: 4px;
@@ -49,4 +50,4 @@
 
 .hds-form-group__error {
   margin-top: 8px;
-}
+}

package/app/styles/components/form/helper-text.scss

@@ -5,6 +5,6 @@
 //
 
 .hds-form-helper-text {
-  color: var(--token-form-helper-text-color);
   display: block;
+  color: var(--token-form-helper-text-color);
 }

package/app/styles/components/form/index.scss

@@ -9,9 +9,9 @@
 @use "./legend";
 @use "./group";
 @use "./indicator";
-
 @use "./checkbox";
 @use "./radio";
+@use "./radio-card";
 @use "./select";
 @use "./text-input";
 @use "./textarea";

package/app/styles/components/form/label.scss

@@ -5,10 +5,10 @@
 //
 
 .hds-form-label {
-  color: var(--token-form-label-color);
   display: block;
-  max-width: 100%;
   width: max-content; // to avoid it extends the full width of the parent container, leading to invisible interactive area
+  max-width: 100%;
+  color: var(--token-form-label-color);
 
   // if a "badge" element (included the 'required' indicator) is child of the label
   // we need to make sure that it correctly aligns with the label text because the

package/app/styles/components/form/legend.scss

@@ -5,8 +5,8 @@
 //
 
 .hds-form-legend {
-  color: var(--token-form-legend-color);
   display: block;
+  color: var(--token-form-legend-color);
 
   // if a "badge" element (included the 'required' indicator) is child of the legend
   // we need to make sure that it correctly aligns with the legend text because the