Use spacing in buttons

- fix some icon colors in es-components
EventStore · Sep 9, 2024 · fb12b85 · fb12b85
1 parent 1841285
commit fb12b85
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 26 deletions.
diff --git a/.changeset/chilly-bees-study.md b/.changeset/chilly-bees-study.md
@@ -0,0 +1,5 @@
+---
+'@eventstore-ui/components': patch
+---
+
+Improve button styles
diff --git a/packages/components/src/components/buttons/button.css b/packages/components/src/components/buttons/button.css
@@ -26,7 +26,7 @@
     --border-width: 2px;
     --text-decoration: none;
     --transition-duration: 500ms;
-    --spacing: 14px;
+    --spacing: var(--spacing-2, 16px);
     --align-inner: center;
     --focus: var(--focus-color, var(--color-focus));
 
@@ -36,13 +36,6 @@
     border-radius: var(--border-radius);
 }
 
-:host(:not([disabled]):focus),
-:host(:not([disabled]):focus-within) {
-    outline-offset: 2px;
-    outline-color: var(--focus);
-    outline-style: solid;
-}
-
 /* variants */
 :host([variant='default']) {
     ---primary: var(--primary-color, var(--color-background));
@@ -218,10 +211,11 @@ a {
     font: inherit;
     overflow: hidden;
 
+    gap: calc(var(--spacing) * 0.75);
     padding-top: 0;
     padding-bottom: 0;
-    padding-left: var(--spacing);
-    padding-right: var(--spacing);
+    padding-left: calc(var(--spacing) - var(--border-width));
+    padding-right: calc(var(--spacing) - var(--border-width));
     border-radius: var(--border-radius);
     border-width: var(--border-width);
     border-style: var(--border-style);
@@ -235,6 +229,12 @@ a {
     &[disabled] {
         cursor: not-allowed;
     }
+
+    &:not(:disabled):not([disabled]):focus-visible {
+        outline-offset: 2px;
+        outline-color: var(--focus);
+        outline-style: solid;
+    }
 }
 
 :host(.hydrated) button,
@@ -244,24 +244,19 @@ a {
     transition-timing-function: ease;
 }
 
-::slotted([slot='before']) {
-    margin-left: 0;
-    margin-right: var(--spacing);
-}
-
-::slotted([slot='after']) {
-    margin-left: var(--spacing);
-    margin-right: 0;
-}
-
 span {
     display: flex;
     justify-content: var(--align-inner);
     flex: 1 1 100%;
 }
 
 ::slotted(:where(es-icon, es-badge):not([slot]):only-child) {
-    margin-left: calc(0px - var(--spacing));
-    margin-right: calc(0px - var(--spacing));
+    margin-left: calc(0px - calc(var(--spacing) - var(--border-width)));
+    margin-right: calc(0px - calc(var(--spacing) - var(--border-width)));
     width: calc(var(--height) - calc(var(--border-width) * 2));
 }
+
+:host([variant='link'])
+    ::slotted(:where(es-icon, es-badge):not([slot]):only-child) {
+    margin: 0;
+}
diff --git a/packages/components/src/components/buttons/demos/buttons-demo.css b/packages/components/src/components/buttons/demos/buttons-demo.css
@@ -0,0 +1,8 @@
+:host {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    gap: 20px;
+    align-items: center;
+    justify-items: center;
+    padding: 20px;
+}
diff --git a/packages/components/src/components/buttons/demos/buttons.demo.tsx b/packages/components/src/components/buttons/demos/buttons.demo.tsx
@@ -0,0 +1,78 @@
+import { Component, h, Host, Fragment } from '@stencil/core';
+import type { ButtonVariant } from '../types';
+import { ES_COMPONENTS_ICON_NAMESPACE, type IconDescription } from '../../..';
+
+/** Basic button demon. */
+@Component({
+    tag: 'es-buttons-demo',
+    styleUrl: './buttons-demo.css',
+    shadow: true,
+})
+export class LoadingTextDemo {
+    private variants: ButtonVariant[] = [
+        'default',
+        'filled',
+        'outline',
+        'delete',
+        'cancel',
+        'minimal',
+        'link',
+    ];
+
+    render() {
+        return (
+            <Host>
+                {this.variants.map((variant) => (
+                    <>
+                        <es-button variant={variant} onClick={this.handleClick}>
+                            <es-icon icon={this.randomIcon()} slot={'after'} />
+                            {`${variant} variant`}
+                        </es-button>
+                        <es-button variant={variant} onClick={this.handleClick}>
+                            <es-icon icon={this.randomIcon()} size={22} />
+                        </es-button>
+                        <es-button
+                            variant={variant}
+                            onClick={this.handleClick}
+                            disabled
+                        >
+                            <es-icon icon={this.randomIcon()} slot={'after'} />
+                            {`${variant} (disabled)`}
+                        </es-button>
+                    </>
+                ))}
+            </Host>
+        );
+    }
+
+    private handleClick = (...args: unknown[]) => {
+        // eslint-disable-next-line no-console
+        console.log(...args);
+    };
+
+    private icons = [
+        'check',
+        'chevron',
+        'chevron-double',
+        'circle',
+        'close',
+        'copy',
+        'critical',
+        'degraded',
+        'dot',
+        'exclamation-mark',
+        'info',
+        'lightbulb',
+        'more',
+        'okay',
+        'sort',
+        'sorted',
+        'spinner',
+        'trash',
+    ];
+
+    private randomIcon = (): IconDescription => [
+        ES_COMPONENTS_ICON_NAMESPACE,
+        this.icons[Math.floor(Math.random() * (this.icons.length - 2))],
+    ];
+}
diff --git a/packages/components/src/icons/components/Critical.tsx b/packages/components/src/icons/components/Critical.tsx
@@ -8,6 +8,9 @@ export const Critical = (h: typeof JSXFactory) => (props: any) => (
             stroke="currentColor"
             d="M12 22c2.7 0 5.2-1 7.1-2.9S22 14.7 22 12s-1-5.2-2.9-7.1S14.7 2 12 2 6.8 3 4.9 4.9 2 9.3 2 12s1 5.2 2.9 7.1C6.8 21 9.3 22 12 22z"
         />
-        <path d="M10.4 5.3h3.1l-.3 9.2h-2.6l-.2-9.2zm.2 10.6h2.7v2.8h-2.7v-2.8z" />
+        <path
+            fill="currentColor"
+            d="M10.4 5.3h3.1l-.3 9.2h-2.6l-.2-9.2zm.2 10.6h2.7v2.8h-2.7v-2.8z"
+        />
     </svg>
 );
diff --git a/packages/components/src/icons/components/Degraded.tsx b/packages/components/src/icons/components/Degraded.tsx
@@ -5,7 +5,7 @@ export const Degraded = (h: typeof JSXFactory) => (props: any) => (
     <svg {...props} viewBox="0 0 24 24" aria-hidden="true">
         <path
             fill="none"
-            stroke="#000000"
+            stroke="currentColor"
             d="M19.1 19.1C23 15.2 23 8.9 19.1 5S8.8 1.1 4.9 4.9 1 15.2 4.9 19.1s10.3 3.8 14.2 0zM5.7 12h12.7"
         />
     </svg>

diff --git a/packages/components/src/icons/components/Okay.tsx b/packages/components/src/icons/components/Okay.tsx
@@ -5,9 +5,9 @@ export const Okay = (h: typeof JSXFactory) => (props: any) => (
     <svg {...props} viewBox="0 0 24 24" aria-hidden="true">
         <path
             fill="none"
-            stroke="#000000"
+            stroke="currentColor"
             d="M12 22c2.7 0 5.2-1.1 7.1-2.9C21 17.2 22 14.7 22 12c0-2.7-1.1-5.2-2.9-7.1C17.2 3.1 14.7 2 12 2 9.3 2 6.8 3.1 4.9 4.9 3.1 6.8 2 9.3 2 12c0 2.7 1.1 5.2 2.9 7.1C6.8 20.9 9.3 22 12 22z"
         />
-        <path fill="none" stroke="#000000" d="m8 12 3 3 6-6" />
+        <path fill="none" stroke="currentColor" d="m8 12 3 3 6-6" />
     </svg>
 );