Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(NcCheckboxRadioSwitch): Pass attrs to input if available #5507

Merged
merged 1 commit into from
Apr 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
This is a simple input checkbox, radio and switch design.
Please have a look at proper usage and recommendations: https://material.io/components/checkboxes

Note: All attributes on the element are passed to the inner input element - except for the button type.

### Standard checkbox
```vue
<template>
Expand Down Expand Up @@ -274,6 +276,7 @@ export default {
class="checkbox-radio-switch"
:style="cssVars"
:type="isButtonType ? 'button' : null"
v-bind="isButtonType ? $attrs : {}"
v-on="isButtonType ? listeners : null">
<input v-if="!isButtonType"
:id="id"
Expand All @@ -287,6 +290,7 @@ export default {
:indeterminate.prop="hasIndeterminate ? indeterminate : null"
:required="required"
:name="name"
v-bind="$attrs"
v-on="listeners">
<NcCheckboxContent :id="id"
class="checkbox-radio-switch__content"
Expand Down Expand Up @@ -322,6 +326,9 @@ export default {
NcCheckboxContent,
},

// We need to pass attributes to the input element
inheritAttrs: false,
Comment on lines +329 to +330
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are as in this case it is the root element.

But it is disabled via inheritAttrs: false here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For vue2 class and style are passed to the root as they are not attrs but somewhat special

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't pass to the button as well?

Here I meant the attrs, not only class/style.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently there is a new possibility to pass attrs to input, but the possibility to pass attrs to the button has been disabled.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So class & style are always set to the wrapper.
attrs are passed to the wrapper (the button) for button type and to the input for other types.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, sorry, missed this line.


props: {
/**
* Unique id attribute of the input
Expand Down
52 changes: 52 additions & 0 deletions tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
*
* @author Ferdinand Thiessen <[email protected]>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

import { shallowMount } from '@vue/test-utils'
import NcCheckboxRadioSwitch from '../../../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'

describe('NcCheckboxRadioSwitch', () => {
it('sets text content', () => {
const wrapper = shallowMount(NcCheckboxRadioSwitch, {
slots: {
default: 'Test',
},
})

expect(wrapper.text()).toContain('Test')
})

it('forwards aria-invalid and aria-errormessage to input', () => {
const wrapper = shallowMount(NcCheckboxRadioSwitch, {
slots: {
default: 'Test',
},
attrs: {
'aria-invalid': 'true',
'aria-errormessage': 'id-test',
},
})

const input = wrapper.find('input')
expect(input.attributes('aria-invalid')).toBe('true')
expect(input.attributes('aria-errormessage')).toBe('id-test')
})
})
Loading