WIP FORM ELEMENTS

hashicorp · Nov 12, 2024 · 6458d28 · 6458d28
1 parent e5f76d4
commit 6458d28
Show file tree

Hide file tree

Showing 48 changed files with 2,053 additions and 499 deletions.
diff --git a/packages/components/src/styles/@hashicorp/design-system-power-select-overrides.scss b/packages/components/src/styles/@hashicorp/design-system-power-select-overrides.scss
@@ -39,7 +39,7 @@
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-action-internal);
-      outline: 3px solid var(--token-color-focus-action-external);
+      outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
       outline-offset: 0;
     }
 
@@ -120,7 +120,7 @@
       &:focus,
       &.mock-focus {
         border-color: var(--token-color-focus-action-internal);
-        outline: 3px solid var(--token-color-focus-action-external);
+        outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
         outline-offset: 0;
       }
 

diff --git a/packages/components/src/styles/components/form/checkbox.scss b/packages/components/src/styles/components/form/checkbox.scss
@@ -30,7 +30,7 @@
   &:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--token-elevation-inset-box-shadow);
+    box-shadow: var(--token-form-control-base-box-shadow-default);
   }
 
   &:checked {
@@ -65,7 +65,7 @@
 
   &:focus,
   &.mock-focus {
-    outline: 3px solid var(--token-color-focus-action-external);
+    outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
     outline-offset: 1px;
   }
 

diff --git a/packages/components/src/styles/components/form/error.scss b/packages/components/src/styles/components/form/error.scss
@@ -9,7 +9,7 @@
 
 .hds-form-error {
   display: flex;
-  gap: 8px;
+  gap: var(--token-form-error-gap);
   align-items: flex-start;
   color: var(--token-form-error-color);
 }
@@ -18,7 +18,7 @@
   flex: none;
   width: var(--token-form-error-icon-size);
   height: var(--token-form-error-icon-size);
-  margin: 2px 0 2px 0;
+  margin: var(--token-form-error-icon-margin-vertical) var(--token-form-error-icon-margin-horizontal);
 }
 
 .hds-form-error__content {

diff --git a/packages/components/src/styles/components/form/file-input.scss b/packages/components/src/styles/components/form/file-input.scss
@@ -24,11 +24,14 @@
 // https://caniuse.com/?search=file-selector-button
 
 // Button
+
+// TODO see https://hashicorp.slack.com/archives/C025N5V4PFZ/p1731428407845729?thread_ts=1731427958.678679&cid=C025N5V4PFZ
 .hds-form-file-input::file-selector-button {
-  min-height: 36px;
-  margin-right: 16px;
+  min-height: var(--token-form-file-input-min-height);
+  margin-right: var(--token-form-file-input-margin-right);
   padding: 7px 16px 7px 37px; // padding in code altered to match Figma visual design
   color: var(--token-color-foreground-primary);
+  // the font family is declared at the parent container level, via CSS helper class
   font: inherit;
   background-color: var(--token-color-surface-faint);
   // upload icon
@@ -55,7 +58,7 @@
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border-color: var(--token-color-focus-action-internal);
-  outline: 3px solid var(--token-color-focus-action-external);
+  outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
 }
 
 // Fix issue with button focus style which was displaying after button was activated

diff --git a/packages/components/src/styles/components/form/group.scss b/packages/components/src/styles/components/form/group.scss
@@ -21,10 +21,8 @@
 
 .hds-form-group__control-fields-wrapper {
   // when the group contains a "legend", we reduce the visual weight of the "label"
-  .hds-form-group__legend ~ & {
-    .hds-form-label {
-      font-weight: var(--token-typography-font-weight-regular);
-    }
+  .hds-form-group__legend ~ .hds-form-label {
+    font-weight: var(--token-typography-font-weight-regular);
   }
 }
 

diff --git a/packages/components/src/styles/components/form/masked-input.scss b/packages/components/src/styles/components/form/masked-input.scss
@@ -7,8 +7,6 @@
 // MASKED-INPUT
 //
 
-$hds-form-masked-input-button-size: 24px;
-
 .hds-form-masked-input {
   position: relative;
   display: grid;
@@ -18,7 +16,7 @@ $hds-form-masked-input-button-size: 24px;
 
   .hds-form-masked-input__control {
     grid-area: input;
-    padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
+    padding-right: calc(var(--token-form-control-padding) + var(--token-form-masked-input-toggle-button-size));
     scrollbar-width: thin;
   }
 }
@@ -45,5 +43,5 @@ $hds-form-masked-input-button-size: 24px;
 .hds-form-masked-input__copy-button {
   grid-area: copy-button;
   align-self: flex-start;
-  margin-left: 8px;
+  margin-left: var(--token-form-masked-input-copy-button-margin-right);
 }
diff --git a/packages/components/src/styles/components/form/radio.scss b/packages/components/src/styles/components/form/radio.scss
@@ -30,7 +30,7 @@
   &:not(:checked) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
-    box-shadow: var(--token-elevation-inset-box-shadow);
+    box-shadow: var(--token-form-control-base-box-shadow-default);
   }
 
   &:checked {
@@ -57,8 +57,8 @@
 
   &:focus,
   &.mock-focus {
-    outline: 3px solid var(--token-color-focus-action-external);
-    outline-offset: 1px;
+    outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
+    outline-offset: var(--token-form-radio-outline-offset);
   }
 
   // DISABLED

diff --git a/packages/components/src/styles/components/form/select.scss b/packages/components/src/styles/components/form/select.scss
@@ -13,7 +13,7 @@
 .hds-form-select {
   max-width: 100%;
   padding: var(--token-form-control-padding);
-  padding-right: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
+  padding-right: var(--token-form-control-padding-with-icon);
   color: var(--token-form-control-base-foreground-value-color);
   background-color: var(--token-form-control-base-surface-color-default);
   background-image: var(--token-form-select-background-image-data-url);
@@ -37,9 +37,10 @@
 
   &:focus,
   &.mock-focus {
+    // TODO! What should we do here???
     border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-    outline-offset: 0;
+    outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
+    outline-offset: var(--token-form-select-outline-offset);
   }
 
   // DISABLED
@@ -65,14 +66,16 @@
 
     &:focus,
     &.mock-focus {
+      // TODO! What should we do here???
       border-color: var(--token-color-focus-critical-internal);
-      outline-color: var(--token-color-focus-critical-external);
+      outline-color: var(--token-form-control-invalid-outline-color);
     }
   }
 }
 
 // MULTIPLE/SIZE
 
+// TODO! has this ever been fully implemented? (see added showcase example)
 .hds-form-select {
   &[multiple],
   &[size] {

diff --git a/packages/components/src/styles/components/form/super-select.scss b/packages/components/src/styles/components/form/super-select.scss
@@ -49,7 +49,7 @@ $hds-super-select-item-height: 36px;
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-action-internal);
-      outline: 3px solid var(--token-color-focus-action-external);
+      outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
       outline-offset: 0;
     }
 
@@ -72,7 +72,7 @@ $hds-super-select-item-height: 36px;
       margin-left: 0;
     }
 
-    .ember-power-select-placeholder {  
+    .ember-power-select-placeholder {
       color: var(--token-form-control-base-foreground-placeholder-color);
       font-size: var(--token-typography-body-200-font-size);
       font-family: var(--token-typography-body-200-font-family);
@@ -250,7 +250,7 @@ $hds-super-select-item-height: 36px;
     &:focus,
     &.mock-focus {
       border-color: var(--token-color-focus-action-internal);
-      outline: 3px solid var(--token-color-focus-action-external);
+      outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
       outline-offset: 0;
     }
 
@@ -361,7 +361,7 @@ $hds-super-select-item-height: 36px;
     background-repeat: no-repeat;
     background-position: 15px 10px;
     background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
-    
+
     // checked
     &[aria-selected="true"]:not([aria-disabled="true"]) {
 

diff --git a/packages/components/src/styles/components/form/text-input.scss b/packages/components/src/styles/components/form/text-input.scss
@@ -18,7 +18,7 @@
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--token-elevation-inset-box-shadow);
+  box-shadow: var(--token-form-control-base-box-shadow-default);
 
   // PLACEHOLDER
 
@@ -37,9 +37,10 @@
 
   &:focus,
   &.mock-focus {
+    // TODO! What should we do here???
     border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-    outline-offset: 0;
+    outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
+    outline-offset: var(--token-form-text-input-outline-offset);
   }
 
   // READONLY
@@ -73,8 +74,9 @@
 
     &:focus,
     &.mock-focus {
+      // TODO! What should we do here???
       border-color: var(--token-color-focus-critical-internal);
-      outline-color: var(--token-color-focus-critical-external);
+      outline-color: var(--token-form-control-focus-outline-color);
     }
   }
 }
@@ -90,7 +92,7 @@
 // PASSWORD
 
 .hds-form-text-input--has-visibility-toggle {
-  padding-right: calc(var(--token-form-control-padding) + 24px);
+  padding-right: var(--token-form-control-padding-with-icon);
 }
 
 .hds-form-text-input__visibility-toggle {

diff --git a/packages/components/src/styles/components/form/textarea.scss b/packages/components/src/styles/components/form/textarea.scss
@@ -13,13 +13,13 @@
 .hds-form-textarea {
   width: 100%;
   max-width: 100%;
-  min-height: 36px;
+  min-height: var(--token-form-text-area-min-height);
   padding: var(--token-form-control-padding);
   color: var(--token-form-control-base-foreground-value-color);
   background-color: var(--token-form-control-base-surface-color-default);
   border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
   border-radius: var(--token-form-control-border-radius);
-  box-shadow: var(--token-elevation-inset-box-shadow);
+  box-shadow: var(--token-form-control-base-box-shadow-default);
   resize: vertical;
 
   // PLACEHOLDER
@@ -39,9 +39,10 @@
 
   &:focus,
   &.mock-focus {
+    // TODO! What should we do here???
     border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-    outline-offset: 0;
+    outline: var(--token-form-control-focus-outline-width) solid var(--token-form-control-focus-outline-color);
+    outline-offset: var(--token-form-text-area-outline-offset);
   }
 
   // READONLY
@@ -75,8 +76,9 @@
 
     &:focus,
     &.mock-focus {
+      // TODO! What should we do here???
       border-color: var(--token-color-focus-critical-internal);
-      outline-color: var(--token-color-focus-critical-external);
+      outline-color: var(--token-form-control-invalid-outline-color);
     }
   }
 }
diff --git a/packages/components/src/styles/components/form/toggle.scss b/packages/components/src/styles/components/form/toggle.scss
@@ -54,7 +54,7 @@
   background-position: var(--token-form-toggle-background-image-position-x) 50%;
   background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size);
   // notice: we want to share the border color between the "thumb" and the "track" so we use a local CSS prop for this
-  border: var(--token-form-radio-border-width) solid var(--border-color);
+  border: var(--token-form-toggle-border-width) solid var(--border-color);
   border-radius: calc(var(--token-form-toggle-height) / 2);
 
   @media (prefers-reduced-motion: no-preference) {
@@ -67,12 +67,12 @@
 
   &::after {
     position: absolute;
-    top: calc(var(--token-form-radio-border-width) * -1);
-    left: calc(var(--token-form-radio-border-width) * -1);
+    top: calc(var(--token-form-toggle-border-width) * -1);
+    left: calc(var(--token-form-toggle-border-width) * -1);
     width: var(--token-form-toggle-thumb-size);
     height: var(--token-form-toggle-thumb-size);
     background-color: var(--token-form-control-base-surface-color-default);
-    border: var(--token-form-radio-border-width) solid var(--border-color);
+    border: var(--token-form-toggle-border-width) solid var(--border-color);
     border-radius: 50%;
     transform: translate3d(0, 0, 0);
     content: "";
@@ -87,18 +87,15 @@
   // used for the focus
 
   &::before {
-    // notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
-    $hds-outline-width: 3px;
-    $hds-outline-offset: 1px;
-    $hds-shift: $hds-outline-width + $hds-outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
+    --shift: calc(-1 * (var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset) + var(--token-form-toggle-border-width)));
     position: absolute;
-    top: -$hds-shift;
-    right: -$hds-shift;
-    bottom: -$hds-shift;
-    left: -$hds-shift;
+    top: var(--shift);
+    right: var(--shift);
+    bottom: var(--shift);
+    left: var(--shift);
     margin: auto;
-    border-width: $hds-outline-width;
-    border-radius: calc(var(--token-form-toggle-height) / 2 + $hds-outline-width + $hds-outline-offset);
+    border-width: var(--token-form-toggle-outline-width);
+    border-radius: calc(var(--token-form-toggle-height) / 2 + var(--token-form-toggle-outline-width) + var(--token-form-toggle-outline-offset));
     content: "";
   }
 
@@ -139,7 +136,8 @@
   :focus + &,
   .mock-focus + & {
     &::before {
-      border-color: var(--token-color-focus-action-external);
+      // the outline is emulatd using a pseudo-element
+      border-color: var(--token-form-control-focus-outline-color);
       border-style: solid;
     }
   }

diff --git a/packages/components/src/styles/components/form/visibility-toggle.scss b/packages/components/src/styles/components/form/visibility-toggle.scss
@@ -10,14 +10,12 @@
 // notice: by design, for this button we don't apply a custom style for the focused state
 // but we rely on the standard outlined styling provided by the browser
 
-$hds-form-visibility-toggle-button-size: 24px;
-
 .hds-form-visibility-toggle {
-  width: $hds-form-visibility-toggle-button-size;
-  height: $hds-form-visibility-toggle-button-size;
-  padding: 2px;
-  color: var(--token-color-foreground-primary);
-  background-color: transparent;
-  border-color: transparent;
+  width: var(--token-form-visibility-toggle-size);
+  height: var(--token-form-visibility-toggle-size);
+  padding: var(--token-form-visibility-toggle-padding);
+  color: var(--token-form-visibility-toggle-color);
+  background-color: var(--token-form-visibility-toggle-background-color);
+  border: var(--token-form-visibility-toggle-border-width) solid var(--token-form-visibility-toggle-border-color);
   cursor: pointer;
-}
+}
diff --git a/packages/tokens/dist/cloud-email/helpers/color.css b/packages/tokens/dist/cloud-email/helpers/color.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Nov 2024 15:30:12 GMT
+ * Generated on Tue, 12 Nov 2024 15:50:31 GMT
  */
 
 .hds-border-primary { border: 1px solid #656a7633; }

diff --git a/packages/tokens/dist/cloud-email/helpers/elevation.css b/packages/tokens/dist/cloud-email/helpers/elevation.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Nov 2024 15:30:12 GMT
+ * Generated on Tue, 12 Nov 2024 15:50:31 GMT
  */
 
 .hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }