From fb12b852960312a25b681349a93a674a08cbddea Mon Sep 17 00:00:00 2001 From: George Payne Date: Mon, 9 Sep 2024 14:57:31 +0200 Subject: [PATCH] Use spacing in buttons - fix some icon colors in es-components --- .changeset/chilly-bees-study.md | 5 ++ .../src/components/buttons/button.css | 39 ++++------ .../components/buttons/demos/buttons-demo.css | 8 ++ .../components/buttons/demos/buttons.demo.tsx | 78 +++++++++++++++++++ .../src/icons/components/Critical.tsx | 5 +- .../src/icons/components/Degraded.tsx | 2 +- .../components/src/icons/components/Okay.tsx | 4 +- 7 files changed, 115 insertions(+), 26 deletions(-) create mode 100644 .changeset/chilly-bees-study.md create mode 100644 packages/components/src/components/buttons/demos/buttons-demo.css create mode 100644 packages/components/src/components/buttons/demos/buttons.demo.tsx diff --git a/.changeset/chilly-bees-study.md b/.changeset/chilly-bees-study.md new file mode 100644 index 00000000..be451464 --- /dev/null +++ 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 index 0825ca7e..75b2d91c 100644 --- 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,16 +244,6 @@ 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); @@ -261,7 +251,12 @@ span { } ::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 new file mode 100644 index 00000000..fe1f0748 --- /dev/null +++ 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 new file mode 100644 index 00000000..ab22d3b0 --- /dev/null +++ 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 ( + + {this.variants.map((variant) => ( + <> + + + {`${variant} variant`} + + + + + + + {`${variant} (disabled)`} + + + ))} + + ); + } + + 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 index 5b737635..a5efe836 100644 --- 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" /> - + ); diff --git a/packages/components/src/icons/components/Degraded.tsx b/packages/components/src/icons/components/Degraded.tsx index 08114af9..e29d4311 100644 --- 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) => ( diff --git a/packages/components/src/icons/components/Okay.tsx b/packages/components/src/icons/components/Okay.tsx index a4d91a24..6a995027 100644 --- 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) => ( );