feat: Consistent cursor style for checkbox and radiobutton (#857)

* Consistent cursor style for checkbox and radiobutton * Simplify checkbox story using gap instead * Replace deprecated Story with StoryFn * Update decribe name and StoryFn * chore: run prettier --------- Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
umbraco · Jul 25, 2024 · e2e1011 · e2e1011
1 parent 0692937
commit e2e1011
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 47 deletions.
diff --git a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts
@@ -224,8 +224,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
       }
 
       :host([readonly]) label {
-        cursor: text;
-        user-select: auto;
+        cursor: default;
       }
 
       input {
@@ -249,7 +248,8 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
         flex-direction: column;
       }
 
-      :host([disabled]) .label {
+      :host([disabled]) label {
+        cursor: not-allowed;
         opacity: 0.5;
       }
     `,

diff --git a/packages/uui-checkbox/lib/uui-checkbox.story.ts b/packages/uui-checkbox/lib/uui-checkbox.story.ts
@@ -1,6 +1,6 @@
 import '.';
 
-import { Story } from '@storybook/web-components';
+import { StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 import readme from '../README.md?raw';
 
@@ -34,7 +34,7 @@ export default {
   },
 };
 
-export const AAAOverview: Story = props => html`
+export const AAAOverview: StoryFn = props => html`
   <uui-checkbox
     style="--uui-checkbox-size: ${props['--uui-checkbox-size']}"
     .value=${props.value}
@@ -60,24 +60,25 @@ AAAOverview.argTypes = {
   '--uui-checkbox-size': { control: { type: 'text' } },
 };
 
-export const Error: Story = props => html`
-  <uui-checkbox .label=${'Checkbox label'} ?error=${props.error}></uui-checkbox>
-  <uui-checkbox
-    ?error=${props.error}
-    .label=${'Checkbox label'}
-    style="margin-left: 20px;"
-    checked></uui-checkbox>
-  <uui-checkbox
-    disabled
-    .label=${'Checkbox label'}
-    ?error=${props.error}></uui-checkbox>
-  <uui-checkbox
-    ?error=${props.error}
-    disabled
-    .label=${'Checkbox label'}
-    style="margin-left: 20px;"
-    checked></uui-checkbox>
-`;
+export const Error: StoryFn = props =>
+  html`<div style="display: flex; gap: 20px;">
+    <uui-checkbox
+      .label=${'Checkbox label'}
+      ?error=${props.error}></uui-checkbox>
+    <uui-checkbox
+      ?error=${props.error}
+      .label=${'Checkbox label'}
+      checked></uui-checkbox>
+    <uui-checkbox
+      disabled
+      .label=${'Checkbox label'}
+      ?error=${props.error}></uui-checkbox>
+    <uui-checkbox
+      ?error=${props.error}
+      disabled
+      .label=${'Checkbox label'}
+      checked></uui-checkbox>
+  </div> `;
 Error.args = { error: true };
 Error.parameters = {
   controls: { include: ['error'] },
@@ -88,7 +89,7 @@ Error.parameters = {
   },
 };
 
-export const WithSlottedLabel: Story = props => html`
+export const WithSlottedLabel: StoryFn = props => html`
   <uui-checkbox
     .label=${'Checkbox label'}
     ?checked=${props.checked}
@@ -105,7 +106,7 @@ WithSlottedLabel.parameters = {
   },
 };
 
-export const LabelPosition: Story = props => html`
+export const LabelPosition: StoryFn = props => html`
   <div
     style="display: grid; grid-template-columns: repeat(4, 128px); align-items: center; justify-items: center">
     <uui-checkbox
@@ -140,7 +141,7 @@ LabelPosition.parameters = {
   },
 };
 
-export const Disabled: Story = props => html`
+export const Disabled: StoryFn = props => html`
   <uui-checkbox
     ?disabled=${props.disabled}
     .label=${'Checkbox label'}></uui-checkbox>
@@ -160,7 +161,7 @@ Disabled.parameters = {
   },
 };
 
-export const Readonly: Story = props => html`
+export const Readonly: StoryFn = props => html`
   <uui-checkbox
     ?readonly=${props.readonly}
     .label=${'Readonly'}

diff --git a/packages/uui-checkbox/lib/uui-checkbox.test.ts b/packages/uui-checkbox/lib/uui-checkbox.test.ts
@@ -8,7 +8,7 @@ import {
 import { UUICheckboxElement } from './uui-checkbox.element';
 import './index';
 
-describe('UuiToggle', () => {
+describe('UUICheckbox', () => {
   let element: UUICheckboxElement;
   let input: HTMLInputElement;
   let iconCheck: HTMLElement;

diff --git a/packages/uui-radio/lib/uui-radio-group.test.ts b/packages/uui-radio/lib/uui-radio-group.test.ts
@@ -14,7 +14,7 @@ const preventSubmit = (e: SubmitEvent) => {
   e.preventDefault();
 };
 
-describe('UuiRadio', () => {
+describe('UUIRadio', () => {
   let element: UUIRadioGroupElement;
   let radios: UUIRadioElement[];
   beforeEach(async () => {

diff --git a/packages/uui-radio/lib/uui-radio.element.ts b/packages/uui-radio/lib/uui-radio.element.ts
@@ -193,14 +193,19 @@ export class UUIRadioElement extends LitElement {
       }
 
       label {
-        display: block;
+        position: relative;
         box-sizing: border-box;
+        user-select: none;
         display: flex;
         align-items: center;
         cursor: pointer;
         line-height: 18px;
       }
 
+      :host([readonly]) label {
+        cursor: default;
+      }
+
       #input {
         width: 0;
         height: 0;
@@ -267,7 +272,7 @@ export class UUIRadioElement extends LitElement {
       }
 
       :host([disabled]) label {
-        cursor: default;
+        cursor: not-allowed;
         opacity: 0.5;
       }
       :host([disabled]) .label {

diff --git a/packages/uui-radio/lib/uui-radio.story.ts b/packages/uui-radio/lib/uui-radio.story.ts
@@ -1,6 +1,6 @@
 import '.';
 
-import { Story } from '@storybook/web-components';
+import { StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 import readme from '../README.md?raw';
 
@@ -22,7 +22,7 @@ export default {
   },
 };
 
-export const AAAOverview: Story = props =>
+export const AAAOverview: StoryFn = props =>
   html`<uui-radio
     .value=${props.value}
     .label=${props.label}
@@ -34,7 +34,7 @@ export const AAAOverview: Story = props =>
   >`;
 AAAOverview.storyName = 'Overview';
 
-export const Disabled: Story = props =>
+export const Disabled: StoryFn = props =>
   html` <uui-radio value="1" ?disabled=${props.disabled}>Disabled</uui-radio>`;
 
 Disabled.args = {
@@ -52,7 +52,7 @@ Disabled.parameters = {
   },
 };
 
-export const Readonly: Story = props =>
+export const Readonly: StoryFn = props =>
   html` <uui-radio value="1" ?readonly=${props.readonly}>Readonly</uui-radio>`;
 
 Readonly.args = {
@@ -70,7 +70,7 @@ Readonly.parameters = {
   },
 };
 
-export const Checked: Story = props =>
+export const Checked: StoryFn = props =>
   html` <uui-radio value="1" ?checked=${props.checked}>Checked</uui-radio>`;
 
 Checked.args = {
@@ -88,7 +88,7 @@ Checked.parameters = {
   },
 };
 
-export const RadioGroup: Story = () => html`
+export const RadioGroup: StoryFn = () => html`
   <h5>Group 1</h5>
   <uui-radio-group name="radioGroup">
     <uui-radio value="1">Option 1</uui-radio>
@@ -191,7 +191,7 @@ RadioGroup.parameters = {
   },
 };
 
-export const DisabledGroup: Story = props => html`
+export const DisabledGroup: StoryFn = props => html`
   <uui-radio-group .disabled=${props.disabled}>
     <uui-radio value="1">one</uui-radio>
     <uui-radio value="2" .checked=${props.checked}>two</uui-radio>
@@ -203,7 +203,7 @@ DisabledGroup.args = {
   disabled: true,
 };
 
-export const GroupWithStartValue: Story = props => html`
+export const GroupWithStartValue: StoryFn = props => html`
   <uui-radio-group value=${props.value}>
     <uui-radio value="1">one</uui-radio>
     <uui-radio value="2">two</uui-radio>

diff --git a/packages/uui-toggle/lib/uui-toggle.story.ts b/packages/uui-toggle/lib/uui-toggle.story.ts
@@ -1,6 +1,6 @@
 import '.';
 
-import { Story } from '@storybook/web-components';
+import { StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 import readme from '../README.md?raw';
 
@@ -28,7 +28,7 @@ export default {
   },
 };
 
-export const AAAOverview: Story = props => html`
+export const AAAOverview: StoryFn = props => html`
   <uui-toggle
     style="--uui-toggle-size: ${props[
       '--uui-toggle-size'
@@ -61,7 +61,7 @@ AAAOverview.parameters = {
   },
 };
 
-export const Error: Story = props => html`
+export const Error: StoryFn = props => html`
   <uui-toggle ?error=${props.error} label="Error"></uui-toggle><br />
   <uui-toggle ?error=${props.error} label="Error checked" checked></uui-toggle
   ><br /><uui-toggle
@@ -88,7 +88,7 @@ Error.parameters = {
   },
 };
 
-export const WithSlottedLabel: Story = props => html`
+export const WithSlottedLabel: StoryFn = props => html`
   <uui-toggle label="Toggle label" ?checked=${props.checked} value="toggle"
     >Using <b>Slot</b> for displayed label</uui-toggle
   >
@@ -102,7 +102,7 @@ WithSlottedLabel.parameters = {
   },
 };
 
-export const LabelPosition: Story = props => html`
+export const LabelPosition: StoryFn = props => html`
   <div
     style="display: grid; grid-template-columns: repeat(4, 128px); align-items: center; justify-items: center">
     <uui-toggle
@@ -135,7 +135,7 @@ LabelPosition.parameters = {
   },
 };
 
-export const Disabled: Story = props => html`
+export const Disabled: StoryFn = props => html`
   <uui-toggle ?disabled=${props.disabled} label="Disabled"></uui-toggle>
   <uui-toggle
     ?disabled=${props.disabled}
@@ -153,7 +153,7 @@ Disabled.parameters = {
   },
 };
 
-export const Readonly: Story = props => html`
+export const Readonly: StoryFn = props => html`
   <uui-toggle ?readonly=${props.readonly} label="Readonly" checked></uui-toggle>
 `;
 Readonly.args = { readonly: true };

diff --git a/packages/uui-toggle/lib/uui-toggle.test.ts b/packages/uui-toggle/lib/uui-toggle.test.ts
@@ -9,7 +9,7 @@ import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
 
 import { UUIToggleElement } from './uui-toggle.element';
 
-describe('UuiToggle', () => {
+describe('UUIToggle', () => {
   let element: UUIToggleElement;
   let input: HTMLInputElement;
   beforeEach(async () => {