Skip to content

Commit 11a5942

Browse files
RobinMalfaitRobinMalfait
authored
use passive instead of clickable for Switch label (#332)
1 parent 0a39cf6 commit 11a5942

File tree

6 files changed

+22
-22
lines changed

6 files changed

+22
-22
lines changed

‎packages/@headlessui-react/src/components/label/label.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ type LabelPropsWeControl = 'id'
8282

8383
export function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
8484
props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl> & {
85-
clickable?: boolean
85+
passive?: boolean
8686
}
8787
) {
88-
let { clickable = false, ...passThroughProps } = props
88+
let { passive = false, ...passThroughProps } = props
8989
let context = useLabelContext()
9090
let id = `headlessui-label-${useId()}`
9191

@@ -96,7 +96,7 @@ export function Label<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
9696
let allProps = { ...passThroughProps, ...propsWeControl }
9797
// @ts-expect-error props are dynamic via context, some components will
9898
// provide an onClick then we can delete it.
99-
if (!clickable) delete allProps['onClick']
99+
if (passive) delete allProps['onClick']
100100

101101
return render({
102102
props: allProps,

‎packages/@headlessui-react/src/components/switch/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,10 @@ function NotificationsToggle() {
121121

122122
##### Props
123123

124-
| Prop | Type | Default | Description |
125-
| :---------- | :------------------ | :------ | :---------------------------------------------------------------- |
126-
| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
127-
| `clickable` | Boolean | `false` | Wether or not to toggle the `Switch` when you click on the label. |
124+
| Prop | Type | Default | Description |
125+
| :-------- | :------------------ | :------ | :----------------------------------------------------------------------------------- |
126+
| `as` | String \| Component | `label` | The element or component the `Switch.Label` should render as. |
127+
| `passive` | Boolean | `false` | When `passive` is `false`, clicking the `Switch.Label` will not toggle the `Switch`. |
128128

129129
#### Switch.Description
130130

‎packages/@headlessui-react/src/components/switch/switch.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ describe('Mouse interactions', () => {
263263
assertSwitch({ state: SwitchState.Off })
264264
})
265265

266-
it('should be possible to toggle the Switch with a click on the Label (clickable passed)', async () => {
266+
it('should be possible to toggle the Switch with a click on the Label', async () => {
267267
let handleChange = jest.fn()
268268
function Example() {
269269
let [state, setState] = useState(false)
@@ -276,7 +276,7 @@ describe('Mouse interactions', () => {
276276
handleChange(value)
277277
}}
278278
/>
279-
<Switch.Label clickable>The label</Switch.Label>
279+
<Switch.Label>The label</Switch.Label>
280280
</Switch.Group>
281281
)
282282
}
@@ -305,7 +305,7 @@ describe('Mouse interactions', () => {
305305
assertSwitch({ state: SwitchState.Off })
306306
})
307307

308-
it('should not be possible to toggle the Switch with a click on the Label', async () => {
308+
it('should not be possible to toggle the Switch with a click on the Label (passive)', async () => {
309309
let handleChange = jest.fn()
310310
function Example() {
311311
let [state, setState] = useState(false)
@@ -318,7 +318,7 @@ describe('Mouse interactions', () => {
318318
handleChange(value)
319319
}}
320320
/>
321-
<Switch.Label>The label</Switch.Label>
321+
<Switch.Label passive>The label</Switch.Label>
322322
</Switch.Group>
323323
)
324324
}

‎packages/@headlessui-vue/src/components/label/label.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ export let Label = defineComponent({
6767
name: 'Label',
6868
props: {
6969
as: { type: [Object, String], default: 'label' },
70-
clickable: { type: [Boolean], default: false },
70+
passive: { type: [Boolean], default: false },
7171
},
7272
render() {
7373
let { name = 'Label', slot = {}, props = {} } = this.context
74-
let { clickable, ...passThroughProps } = this.$props
74+
let { passive, ...passThroughProps } = this.$props
7575
let propsWeControl = {
7676
...Object.entries(props).reduce(
7777
(acc, [key, value]) => Object.assign(acc, { [key]: unref(value) }),
@@ -83,7 +83,7 @@ export let Label = defineComponent({
8383

8484
// @ts-expect-error props are dynamic via context, some components will
8585
// provide an onClick then we can delete it.
86-
if (!clickable) delete allProps['onClick']
86+
if (passive) delete allProps['onClick']
8787

8888
return render({
8989
props: allProps,

‎packages/@headlessui-vue/src/components/switch/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,10 @@ export default {
147147

148148
##### Props
149149

150-
| Prop | Type | Default | Description |
151-
| :---------- | :------------------ | :------ | :---------------------------------------------------------------- |
152-
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
153-
| `clickable` | Boolean | `false` | Wether or not to toggle the `Switch` when you click on the label. |
150+
| Prop | Type | Default | Description |
151+
| :-------- | :------------------ | :------ | :---------------------------------------------------------------------------------- |
152+
| `as` | String \| Component | `label` | The element or component the `SwitchLabel` should render as. |
153+
| `passive` | Boolean | `false` | When `passive` is `false`, clicking the `SwitchLabel` will not toggle the `Switch`. |
154154

155155
#### SwitchDescription
156156

‎packages/@headlessui-vue/src/components/switch/switch.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -399,13 +399,13 @@ describe('Mouse interactions', () => {
399399
assertSwitch({ state: SwitchState.Off })
400400
})
401401

402-
it('should be possible to toggle the Switch with a click on the Label (clickable passed)', async () => {
402+
it('should be possible to toggle the Switch with a click on the Label', async () => {
403403
let handleChange = jest.fn()
404404
renderTemplate({
405405
template: html`
406406
<SwitchGroup>
407407
<Switch v-model="checked" />
408-
<SwitchLabel clickable>The label</SwitchLabel>
408+
<SwitchLabel>The label</SwitchLabel>
409409
</SwitchGroup>
410410
`,
411411
setup() {
@@ -437,13 +437,13 @@ describe('Mouse interactions', () => {
437437
assertSwitch({ state: SwitchState.Off })
438438
})
439439

440-
it('should not be possible to toggle the Switch with a click on the Label', async () => {
440+
it('should not be possible to toggle the Switch with a click on the Label (passive)', async () => {
441441
let handleChange = jest.fn()
442442
renderTemplate({
443443
template: html`
444444
<SwitchGroup>
445445
<Switch v-model="checked" />
446-
<SwitchLabel>The label</SwitchLabel>
446+
<SwitchLabel passive>The label</SwitchLabel>
447447
</SwitchGroup>
448448
`,
449449
setup() {

0 commit comments

Comments
 (0)