Skip to content

Commit 70c4efe

Browse files
bjarnefiOvergaard
bjarnef
and
iOvergaard
authored
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 <[email protected]>
1 parent 74a6121 commit 70c4efe

File tree

8 files changed

+53
-47
lines changed

8 files changed

+53
-47
lines changed

‎packages/uui-boolean-input/lib/uui-boolean-input.element.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
224224
}
225225
226226
:host([readonly]) label {
227-
cursor: text;
228-
user-select: auto;
227+
cursor: default;
229228
}
230229
231230
input {
@@ -249,7 +248,8 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
249248
flex-direction: column;
250249
}
251250
252-
:host([disabled]) .label {
251+
:host([disabled]) label {
252+
cursor: not-allowed;
253253
opacity: 0.5;
254254
}
255255
`,

‎packages/uui-checkbox/lib/uui-checkbox.story.ts

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '.';
22

3-
import { Story } from '@storybook/web-components';
3+
import { StoryFn } from '@storybook/web-components';
44
import { html } from 'lit';
55
import readme from '../README.md?raw';
66

@@ -34,7 +34,7 @@ export default {
3434
},
3535
};
3636

37-
export const AAAOverview: Story = props => html`
37+
export const AAAOverview: StoryFn = props => html`
3838
<uui-checkbox
3939
style="--uui-checkbox-size: ${props['--uui-checkbox-size']}"
4040
.value=${props.value}
@@ -60,24 +60,25 @@ AAAOverview.argTypes = {
6060
'--uui-checkbox-size': { control: { type: 'text' } },
6161
};
6262

63-
export const Error: Story = props => html`
64-
<uui-checkbox .label=${'Checkbox label'} ?error=${props.error}></uui-checkbox>
65-
<uui-checkbox
66-
?error=${props.error}
67-
.label=${'Checkbox label'}
68-
style="margin-left: 20px;"
69-
checked></uui-checkbox>
70-
<uui-checkbox
71-
disabled
72-
.label=${'Checkbox label'}
73-
?error=${props.error}></uui-checkbox>
74-
<uui-checkbox
75-
?error=${props.error}
76-
disabled
77-
.label=${'Checkbox label'}
78-
style="margin-left: 20px;"
79-
checked></uui-checkbox>
80-
`;
63+
export const Error: StoryFn = props =>
64+
html`<div style="display: flex; gap: 20px;">
65+
<uui-checkbox
66+
.label=${'Checkbox label'}
67+
?error=${props.error}></uui-checkbox>
68+
<uui-checkbox
69+
?error=${props.error}
70+
.label=${'Checkbox label'}
71+
checked></uui-checkbox>
72+
<uui-checkbox
73+
disabled
74+
.label=${'Checkbox label'}
75+
?error=${props.error}></uui-checkbox>
76+
<uui-checkbox
77+
?error=${props.error}
78+
disabled
79+
.label=${'Checkbox label'}
80+
checked></uui-checkbox>
81+
</div> `;
8182
Error.args = { error: true };
8283
Error.parameters = {
8384
controls: { include: ['error'] },
@@ -88,7 +89,7 @@ Error.parameters = {
8889
},
8990
};
9091

91-
export const WithSlottedLabel: Story = props => html`
92+
export const WithSlottedLabel: StoryFn = props => html`
9293
<uui-checkbox
9394
.label=${'Checkbox label'}
9495
?checked=${props.checked}
@@ -105,7 +106,7 @@ WithSlottedLabel.parameters = {
105106
},
106107
};
107108

108-
export const LabelPosition: Story = props => html`
109+
export const LabelPosition: StoryFn = props => html`
109110
<div
110111
style="display: grid; grid-template-columns: repeat(4, 128px); align-items: center; justify-items: center">
111112
<uui-checkbox
@@ -140,7 +141,7 @@ LabelPosition.parameters = {
140141
},
141142
};
142143

143-
export const Disabled: Story = props => html`
144+
export const Disabled: StoryFn = props => html`
144145
<uui-checkbox
145146
?disabled=${props.disabled}
146147
.label=${'Checkbox label'}></uui-checkbox>
@@ -160,7 +161,7 @@ Disabled.parameters = {
160161
},
161162
};
162163

163-
export const Readonly: Story = props => html`
164+
export const Readonly: StoryFn = props => html`
164165
<uui-checkbox
165166
?readonly=${props.readonly}
166167
.label=${'Readonly'}

‎packages/uui-checkbox/lib/uui-checkbox.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { UUICheckboxElement } from './uui-checkbox.element';
99
import './index';
1010

11-
describe('UuiToggle', () => {
11+
describe('UUICheckbox', () => {
1212
let element: UUICheckboxElement;
1313
let input: HTMLInputElement;
1414
let iconCheck: HTMLElement;

‎packages/uui-radio/lib/uui-radio-group.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const preventSubmit = (e: SubmitEvent) => {
1414
e.preventDefault();
1515
};
1616

17-
describe('UuiRadio', () => {
17+
describe('UUIRadio', () => {
1818
let element: UUIRadioGroupElement;
1919
let radios: UUIRadioElement[];
2020
beforeEach(async () => {

‎packages/uui-radio/lib/uui-radio.element.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,14 +193,19 @@ export class UUIRadioElement extends LitElement {
193193
}
194194
195195
label {
196-
display: block;
196+
position: relative;
197197
box-sizing: border-box;
198+
user-select: none;
198199
display: flex;
199200
align-items: center;
200201
cursor: pointer;
201202
line-height: 18px;
202203
}
203204
205+
:host([readonly]) label {
206+
cursor: default;
207+
}
208+
204209
#input {
205210
width: 0;
206211
height: 0;
@@ -267,7 +272,7 @@ export class UUIRadioElement extends LitElement {
267272
}
268273
269274
:host([disabled]) label {
270-
cursor: default;
275+
cursor: not-allowed;
271276
opacity: 0.5;
272277
}
273278
:host([disabled]) .label {

‎packages/uui-radio/lib/uui-radio.story.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '.';
22

3-
import { Story } from '@storybook/web-components';
3+
import { StoryFn } from '@storybook/web-components';
44
import { html } from 'lit';
55
import readme from '../README.md?raw';
66

@@ -22,7 +22,7 @@ export default {
2222
},
2323
};
2424

25-
export const AAAOverview: Story = props =>
25+
export const AAAOverview: StoryFn = props =>
2626
html`<uui-radio
2727
.value=${props.value}
2828
.label=${props.label}
@@ -34,7 +34,7 @@ export const AAAOverview: Story = props =>
3434
>`;
3535
AAAOverview.storyName = 'Overview';
3636

37-
export const Disabled: Story = props =>
37+
export const Disabled: StoryFn = props =>
3838
html` <uui-radio value="1" ?disabled=${props.disabled}>Disabled</uui-radio>`;
3939

4040
Disabled.args = {
@@ -52,7 +52,7 @@ Disabled.parameters = {
5252
},
5353
};
5454

55-
export const Readonly: Story = props =>
55+
export const Readonly: StoryFn = props =>
5656
html` <uui-radio value="1" ?readonly=${props.readonly}>Readonly</uui-radio>`;
5757

5858
Readonly.args = {
@@ -70,7 +70,7 @@ Readonly.parameters = {
7070
},
7171
};
7272

73-
export const Checked: Story = props =>
73+
export const Checked: StoryFn = props =>
7474
html` <uui-radio value="1" ?checked=${props.checked}>Checked</uui-radio>`;
7575

7676
Checked.args = {
@@ -88,7 +88,7 @@ Checked.parameters = {
8888
},
8989
};
9090

91-
export const RadioGroup: Story = () => html`
91+
export const RadioGroup: StoryFn = () => html`
9292
<h5>Group 1</h5>
9393
<uui-radio-group name="radioGroup">
9494
<uui-radio value="1">Option 1</uui-radio>
@@ -191,7 +191,7 @@ RadioGroup.parameters = {
191191
},
192192
};
193193

194-
export const DisabledGroup: Story = props => html`
194+
export const DisabledGroup: StoryFn = props => html`
195195
<uui-radio-group .disabled=${props.disabled}>
196196
<uui-radio value="1">one</uui-radio>
197197
<uui-radio value="2" .checked=${props.checked}>two</uui-radio>
@@ -203,7 +203,7 @@ DisabledGroup.args = {
203203
disabled: true,
204204
};
205205

206-
export const GroupWithStartValue: Story = props => html`
206+
export const GroupWithStartValue: StoryFn = props => html`
207207
<uui-radio-group value=${props.value}>
208208
<uui-radio value="1">one</uui-radio>
209209
<uui-radio value="2">two</uui-radio>

‎packages/uui-toggle/lib/uui-toggle.story.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '.';
22

3-
import { Story } from '@storybook/web-components';
3+
import { StoryFn } from '@storybook/web-components';
44
import { html } from 'lit';
55
import readme from '../README.md?raw';
66

@@ -28,7 +28,7 @@ export default {
2828
},
2929
};
3030

31-
export const AAAOverview: Story = props => html`
31+
export const AAAOverview: StoryFn = props => html`
3232
<uui-toggle
3333
style="--uui-toggle-size: ${props[
3434
'--uui-toggle-size'
@@ -61,7 +61,7 @@ AAAOverview.parameters = {
6161
},
6262
};
6363

64-
export const Error: Story = props => html`
64+
export const Error: StoryFn = props => html`
6565
<uui-toggle ?error=${props.error} label="Error"></uui-toggle><br />
6666
<uui-toggle ?error=${props.error} label="Error checked" checked></uui-toggle
6767
><br /><uui-toggle
@@ -88,7 +88,7 @@ Error.parameters = {
8888
},
8989
};
9090

91-
export const WithSlottedLabel: Story = props => html`
91+
export const WithSlottedLabel: StoryFn = props => html`
9292
<uui-toggle label="Toggle label" ?checked=${props.checked} value="toggle"
9393
>Using <b>Slot</b> for displayed label</uui-toggle
9494
>
@@ -102,7 +102,7 @@ WithSlottedLabel.parameters = {
102102
},
103103
};
104104

105-
export const LabelPosition: Story = props => html`
105+
export const LabelPosition: StoryFn = props => html`
106106
<div
107107
style="display: grid; grid-template-columns: repeat(4, 128px); align-items: center; justify-items: center">
108108
<uui-toggle
@@ -135,7 +135,7 @@ LabelPosition.parameters = {
135135
},
136136
};
137137

138-
export const Disabled: Story = props => html`
138+
export const Disabled: StoryFn = props => html`
139139
<uui-toggle ?disabled=${props.disabled} label="Disabled"></uui-toggle>
140140
<uui-toggle
141141
?disabled=${props.disabled}
@@ -153,7 +153,7 @@ Disabled.parameters = {
153153
},
154154
};
155155

156-
export const Readonly: Story = props => html`
156+
export const Readonly: StoryFn = props => html`
157157
<uui-toggle ?readonly=${props.readonly} label="Readonly" checked></uui-toggle>
158158
`;
159159
Readonly.args = { readonly: true };

‎packages/uui-toggle/lib/uui-toggle.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
99

1010
import { UUIToggleElement } from './uui-toggle.element';
1111

12-
describe('UuiToggle', () => {
12+
describe('UUIToggle', () => {
1313
let element: UUIToggleElement;
1414
let input: HTMLInputElement;
1515
beforeEach(async () => {

0 commit comments

Comments
 (0)