Merge pull request #37 from etchteam/feature/etch-400-match-button-he…

…ight-with-input-height feat: make button and input heights match
etchteam · Feb 26, 2024 · 18cfb29 · 18cfb29
2 parents 5578b7b + 1f47ff6
commit 18cfb29
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
@@ -11,6 +11,8 @@ diamond-button {
   --_size: 1rem;
   --_padding-block: var(--diamond-button-padding-block);
   --_padding-inline: var(--diamond-button-padding-inline);
+  --_line-height: var(--diamond-button-line-height);
+  display: inline-block;
 
   button,
   a,
@@ -31,7 +33,9 @@ diamond-button {
     gap: var(--diamond-button-gap);
     justify-content: center;
     letter-spacing: inherit;
-    line-height: var(--diamond-font-line-height);
+    line-height: var(--_line-height);
+    min-height: var(--diamond-spacing-thumb);
+    min-width: var(--diamond-spacing-thumb);
     padding-block: var(--_padding-block);
     padding-inline: var(--_padding-inline);
     -webkit-tap-highlight-color: transparent;
@@ -100,6 +104,7 @@ diamond-button {
   }
 
   &[width='square'] {
+    --_line-height: 1;
     --_padding-inline: var(--diamond-button-padding-block);
   }
 

diff --git a/components/control/Button/Button.stories.ts b/components/control/Button/Button.stories.ts
@@ -106,7 +106,7 @@ export const TextButton: StoryObj = {
 
 export const IconOnlyButton: StoryObj = {
   render: () => html`
-    <diamond-grid wrap="wrap">
+    <diamond-grid wrap="wrap" align-items="center">
       <diamond-grid-item>
         <diamond-button width="square">
           <button type="button">

diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css
@@ -62,11 +62,10 @@ diamond-input {
   select {
     cursor: pointer;
     margin-right: calc(
-      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-horizontal) *
-        0.5
+      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-inline) * 0.5
     );
     padding-right: calc(
-      var(--diamond-icon-size) + var(--diamond-input-padding-horizontal) * 1.5
+      var(--diamond-icon-size) + var(--diamond-input-padding-inline) * 1.5
     );
   }
 
@@ -84,13 +83,13 @@ diamond-input {
 
   /* Prefix */
   &:has(* + :is(input, textarea, select)) > :first-child {
-    margin-right: calc(var(--diamond-input-padding-horizontal) / 2 * -1);
-    padding: 0 0 0 var(--diamond-input-padding-horizontal);
+    margin-right: calc(var(--diamond-input-padding-inline) / 2 * -1);
+    padding: 0 0 0 var(--diamond-input-padding-inline);
   }
 
   /* Suffix */
   :is(input, textarea, select) + * {
-    margin-left: calc(var(--diamond-input-padding-horizontal) / 2 * -1);
-    padding: 0 var(--diamond-input-padding-horizontal) 0 0;
+    margin-left: calc(var(--diamond-input-padding-inline) / 2 * -1);
+    padding: 0 var(--diamond-input-padding-inline) 0 0;
   }
 }
diff --git a/styles/tokens/button.css b/styles/tokens/button.css
@@ -7,6 +7,7 @@
   --diamond-button-gap: 0.75ch;
   --diamond-button-outline-offset: 5px;
   --diamond-button-font-weight: var(--diamond-font-size-base);
+  --diamond-button-line-height: var(--diamond-font-line-height);
 
   /* Default variant */
   --diamond-button-background: var(--diamond-theme-background);

diff --git a/styles/tokens/input.css b/styles/tokens/input.css
@@ -15,10 +15,10 @@
   --diamond-input-checkbox-border-radius: var(--diamond-border-radius-sm);
   --diamond-input-radio-checkbox-padding: 0.1875rem;
 
-  --diamond-input-padding-vertical: var(--diamond-spacing-sm);
-  --diamond-input-padding-horizontal: var(--diamond-spacing);
-  --diamond-input-padding: var(--diamond-input-padding-vertical)
-    var(--diamond-input-padding-horizontal);
+  --diamond-input-padding-block: var(--diamond-spacing-sm);
+  --diamond-input-padding-inline: var(--diamond-spacing);
+  --diamond-input-padding: var(--diamond-input-padding-block)
+    var(--diamond-input-padding-inline);
 
   --diamond-input-line-height: var(--diamond-font-line-height);
 }