💄 [#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.
open-formulieren · Oct 30, 2023 · ad125cb · ad125cb
1 parent ec9ac4a
commit ad125cb
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 21 deletions.
diff --git 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
diff --git 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 → src/components/Button/OFButton.mdx b/src/components/Button/Button.mdx → src/components/Button/OFButton.mdx
diff --git 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
@@ -15,7 +15,7 @@
               </li>
               {% if (ctx.component.removeRow) { %}
                   <li class="{{ctx.ofPrefix}}toolbar__list-item">
-              <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              <button class="utrecht-button utrecht-button--primary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
                   </li>
               {% } %}
               </ul>

diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
@@ -12,7 +12,7 @@
                 <button class="utrecht-button utrecht-button--secondary-action editRow"><i class="{{ ctx.iconClass('edit') }}"></i></button>
             </li>
             <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="utrecht-button utrecht-button--secondary-action utrecht-button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
+                <button class="utrecht-button utrecht-button--primary-action utrecht-button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
             </li>
         </ul>
     </div>

diff --git 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;
+      }
+    }
   }
 }
+2 −2		package-lock.json
+1 −1		package.json
+10 −1		src/community/utrecht/button.tokens.json