Merge pull request #69 from etchteam/feature/etch-539-full-template-r…

…ecipe Feature/etch 539 full template recipe
etchteam · Jun 17, 2024 · e21927a · e21927a
2 parents f8b6b0b + 8f9451d
commit e21927a
Show file tree

Hide file tree

Showing 10 changed files with 1,204 additions and 7 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -17,10 +17,12 @@ const preview: Preview = {
       storySort: {
         order: [
           'Docs',
+          'Showroom',
           'Composition',
           'Canvas',
           'Content',
           'Controls',
+          'Recipes',
         ],
       },
     },

diff --git a/components/composition/FormGroup/FormGroup.css b/components/composition/FormGroup/FormGroup.css
@@ -1,8 +1,9 @@
 diamond-form-group {
+  align-items: baseline;
   display: grid;
   gap: var(--diamond-spacing-sm);
 
-  label {
+  label:not(diamond-radio-checkbox label) {
     /* Negate the extra label height to account for the form group gap */
     margin-block: calc(
       (var(--diamond-label-height) / var(--diamond-font-line-height) / 4) * -1

diff --git a/components/content/List/List.css b/components/content/List/List.css
@@ -1,5 +1,6 @@
 diamond-list {
   --diamond-list-spacing: 0;
+  display: block;
 
   li,
   dl > div {

diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
@@ -12,6 +12,7 @@ diamond-button {
   --_padding-block: var(--diamond-button-padding-block);
   --_padding-inline: var(--diamond-button-padding-inline);
   --_line-height: var(--diamond-button-line-height);
+  --diamond-icon-baseline-adjust: 0.1em;
   display: inline-block;
 
   /* Structural button styles */

diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css
@@ -1,7 +1,9 @@
 diamond-input {
   --_background: var(--diamond-input-background);
   --_border-color: var(--diamond-input-border-color);
+  --diamond-icon-baseline-adjust: 0.1em;
 
+  align-items: center;
   background: var(--_background);
   border: var(--diamond-input-border-width) solid var(--_border-color);
   border-radius: var(--diamond-input-border-radius);

diff --git a/components/control/RadioCheckbox/RadioCheckbox.css b/components/control/RadioCheckbox/RadioCheckbox.css
@@ -3,17 +3,19 @@ diamond-radio-checkbox {
   --_border-color: var(--diamond-input-border-color);
   --_border-radius: var(--diamond-input-checkbox-border-radius);
   --_inner-border-radius: 0;
-  --_indicator-padding: 0;
+  --_indicator-padding: var(--diamond-input-radio-checkbox-padding);
   --_indicator-width: calc(var(--diamond-font-line-height) * 1em);
   --_indicator-inner-width: 100%;
 
+  align-items: center;
   color: inherit;
   cursor: pointer;
   display: flex;
   font-size: inherit;
   font-weight: inherit;
   gap: var(--diamond-spacing-sm);
   line-height: inherit;
+  min-height: var(--diamond-spacing-thumb);
 
   &:hover,
   &:focus-within {
@@ -60,9 +62,10 @@ diamond-radio-checkbox {
   &::part(fallback-icon) {
     display: block;
     height: auto;
+    margin: calc(var(--_indicator-padding) * -1);
     opacity: 0;
     position: relative;
-    transform: scale(0.9);
+    transform: scale(1.45);
     transition:
       transform var(--diamond-transition),
       opacity var(--diamond-transition);
@@ -108,11 +111,10 @@ diamond-radio-checkbox {
   &:has(input[type='radio']) {
     --_border-radius: 50%;
     --_inner-border-radius: 50%;
-    --_indicator-padding: var(--diamond-input-radio-checkbox-padding);
     --_indicator-inner-width: calc(100% - (var(--_indicator-padding) * 2));
 
     &::part(fallback-icon) {
-      display: none;
+      visibility: hidden; /* Display none messes up alignment in horizontal forms */
     }
   }
 
@@ -128,7 +130,7 @@ diamond-radio-checkbox {
     img,
     &::part(fallback-icon) {
       opacity: 1;
-      transform: scale(1);
+      transform: scale(1.6);
       transition-delay: calc(var(--diamond-transition-duration) / 2);
     }
   }