fix: apply busy cursor to disabled buttons too

nl-design-system · Oct 21, 2021 · 12a5504 · 12a5504
1 parent 2565386
commit 12a5504
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/components/button/html.scss b/components/button/html.scss
@@ -18,7 +18,10 @@
   @extend .utrecht-button--submit;
 }
 
-.utrecht-html button[aria-busy="true"] {
+.utrecht-html button[aria-busy="true"],
+.utrecht-html button[aria-disabled="true"][aria-busy="true"],
+.utrecht-html button:disabled[aria-busy="true"] {
+  // Busy cursor has precedence over the disabled cursor.
   @extend .utrecht-button--busy;
 }
 

diff --git a/components/button/html.stories.mdx b/components/button/html.stories.mdx
@@ -94,6 +94,27 @@ Button with `aria-busy` state:
   </Story>
 </Canvas>
 
+### Busy and disabled
+
+Button that is both busy and disabled. The busy cursor should have precedence over the disabled cursor.
+
+<Canvas>
+  <Story
+    name="Busy and disabled button"
+    args={{
+      busy: true,
+      disabled: true,
+      textContent: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+    parameters={{
+      // `cursor` cannot be tested using visual regression testing, ignore this story
+      percy: { skip: true },
+    }}
+  >
+    {Button.bind({})}
+  </Story>
+</Canvas>
+
 ## Types
 
 ### Submit