From ad125cbcac2016521412f188df090a47949b3886 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 30 Oct 2023 18:33:31 +0100 Subject: [PATCH] :lipstick: [#462] Final button tweaks, hopefully * Updated to design tokens for tab-focus styles * Updated CSS override to be minimally invasive * Updated changelog with extra migration actions * Renamed MDX documentation to get proper 'Docs' label in storybook * Updated stories to give `href` attribute to anchor tags, which makes them tabbable. Styles are wonky, but so are they in main. --- CHANGELOG.rst | 31 +++++++++++-------- design-tokens | 2 +- package.json | 2 +- .../Button/{Button.mdx => OFButton.mdx} | 0 src/components/Button/OFButton.stories.js | 4 +++ src/formio/templates/editGrid.ejs | 2 +- src/formio/templates/editGridRow.ejs | 2 +- src/scss/components/_button.scss | 15 ++++++--- 8 files changed, 37 insertions(+), 21 deletions(-) rename src/components/Button/{Button.mdx => OFButton.mdx} (100%) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 4213442c9..9fdab16ad 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -14,22 +14,27 @@ In this version, the button component has been refactored to use the Utrecht but In order to maintain the same style as in previous versions, the following Utrecht design tokens should be set: -* `--utrecht-button-secondary-action-danger-background-color` takes the value of the old `--of-button-danger-bg` -* `--utrecht-button-secondary-action-danger-color` takes the value of the old `--of-button-danger-fg` -* `--utrecht-button-subtle-danger-background-color` takes the value of `--of-color-danger` -* `--utrecht-button-subtle-danger-hover-background-color` takes the value `--of-color-bg` -* `--utrecht-button-subtle-danger-active-background-color` takes the value of the old `--of-button-danger-active-bg` -* `--utrecht-button-disabled-color`. This does not take the value of an old token. For the - Open Forms theme this is now `#ffffff`. -* `--utrecht-button-disabled-background-color`. This does not take the value of an old token, +* ``--utrecht-button-primary-action-focus-border-color`` has ``#000000`` (black) in the Open Forms + theme. +* ``--utrecht-button-primary-action-danger-focus-border-color`` has ``#000000`` (black) in the + Open Forms theme. +* ``--utrecht-button-secondary-action-danger-background-color`` takes the value of the old ``--of-button-danger-bg`` +* ``--utrecht-button-secondary-action-danger-color`` takes the value of the old ``--of-button-danger-fg`` +* ``--utrecht-button-secondary-action-focus-border-color`` takes the value of the old ``--of-color-focus-border`` +* ``--utrecht-button-subtle-danger-background-color`` takes the value of ``--of-color-danger`` +* ``--utrecht-button-subtle-danger-hover-background-color`` takes the value ``--of-color-bg`` +* ``--utrecht-button-subtle-danger-active-background-color`` takes the value of the old ``--of-button-danger-active-bg`` +* ``--utrecht-button-disabled-color``. This does not take the value of an old token. For the + Open Forms theme this is now ``#ffffff``. +* ``--utrecht-button-disabled-background-color``. This does not take the value of an old token, the colour was previously obtained by graying out the primary button. For the Open Forms theme, - this is now `#a02017`. -* `--utrecht-action-disabled-cursor`. This does not take the value of an old token. It controls + this is now ``#a02017``. +* ``--utrecht-action-disabled-cursor``. This does not take the value of an old token. It controls the looks of the cursor when hovering a disabled button. For the Open Forms theme, this is now - `not-allowed`. -* `--utrecht-action-submit-cursor`. This does not take the value of an old token. It controls the + ``not-allowed``. +* ``--utrecht-action-submit-cursor``. This does not take the value of an old token. It controls the looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now - `pointer`. + ``pointer``. 1.6.0-alpha.0 (2023-10-02) diff --git a/design-tokens b/design-tokens index 22353ac0e..1fc3a5667 160000 --- a/design-tokens +++ b/design-tokens @@ -1 +1 @@ -Subproject commit 22353ac0e07bebbf4cd149bee2ec507e9e3401ca +Subproject commit 1fc3a5667ed656c554624aefaaca3650fd0bf94a diff --git a/package.json b/package.json index 5ef7ee078..264d89e64 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@floating-ui/react": "^0.24.2", "@formio/protected-eval": "^1.2.1", "@fortawesome/fontawesome-free": "^6.1.1", - "@open-formulieren/design-tokens": "^0.44.0", + "@open-formulieren/design-tokens": "^0.44.1", "@sentry/react": "^6.13.2", "@sentry/tracing": "^6.13.2", "@trivago/prettier-plugin-sort-imports": "^4.0.0", diff --git a/src/components/Button/Button.mdx b/src/components/Button/OFButton.mdx similarity index 100% rename from src/components/Button/Button.mdx rename to src/components/Button/OFButton.mdx diff --git a/src/components/Button/OFButton.stories.js b/src/components/Button/OFButton.stories.js index b7b9da694..c242ccd26 100644 --- a/src/components/Button/OFButton.stories.js +++ b/src/components/Button/OFButton.stories.js @@ -64,6 +64,7 @@ export const UtrechtLinkLooksLikeDefaultButton = { args: { label: 'Default', component: UtrechtButtonLink, + href: '#', }, }; @@ -72,6 +73,7 @@ export const UtrechtLinkLooksLikePrimaryButton = { args: { label: 'Primary', component: UtrechtButtonLink, + href: '#', appearance: 'primary-action-button', }, }; @@ -81,6 +83,7 @@ export const UtrechtLinkLooksLikeSecondaryButton = { args: { label: 'Secondary', component: UtrechtButtonLink, + href: '#', appearance: 'secondary-action-button', }, }; @@ -90,6 +93,7 @@ export const UtrechtLinkLooksLikeDangerButton = { args: { label: 'Danger', component: UtrechtButtonLink, + href: '#', appearance: 'primary-action-button', hint: 'danger', }, diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs index 1a9903848..f8ab8125d 100644 --- a/src/formio/templates/editGrid.ejs +++ b/src/formio/templates/editGrid.ejs @@ -15,7 +15,7 @@ {% if (ctx.component.removeRow) { %}
  • - +
    • {% } %} diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs index f60e3e359..c3c5b0c74 100644 --- a/src/formio/templates/editGridRow.ejs +++ b/src/formio/templates/editGridRow.ejs @@ -12,7 +12,7 @@
  • - +
    • diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 4b9e3a00f..90c0e05d1 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,12 +1,19 @@ -@use 'microscope-sass/lib/bem'; - @import '@utrecht/components/dist/button/css/index.css'; @import '@utrecht/components/dist/button-link/css/index.css'; .openforms-theme { .utrecht-button, .utrecht-button-link { - border-block-start-color: transparent !important; - border-inline-start-color: transparent !important; + // For buttons without any state or buttons being hovered over, apply a 3d effect + // by making the top and left border transparent. + &, + &:hover { + // However, if the button has visible focus, apply the border color to all borders + // otherwise it looks a bit broken. + &:not(:focus-visible) { + border-block-start-color: transparent; + border-inline-start-color: transparent; + } + } } }