10000 feat(b-form-group): add `content-cols` props and scoped `default` slot (closes #6095, #6118) by jacobmllr95 · Pull Request #6178 · bootstrap-vue/bootstrap-vue · GitHub
[go: up one dir, main page]
Skip to content

feat(b-form-group): add content-cols props and scoped default slot (closes #6095, #6118) #6178

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.

Sign up for GitHub

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

Merged
merged 17 commits into from
Dec 14, 2020
Merged

feat(b-form-group): add content-cols props and scoped default slot (closes #6095, #6118) #6178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
10ee0f8
fix(b-form-group): content markup
jacobmllr95 Dec 9, 2020
11e7ac6
Merge remote-tracking branch 'origin/dev' into fix-form-group-markup
jacobmllr95 Dec 10, 2020
e2a44b7
Update package.json
jacobmllr95 Dec 10, 2020
c66a59f
Update README.md
jacobmllr95 Dec 10, 2020
e5b3fee
Update README.md
jacobmllr95 Dec 10, 2020
d8ea442
Merge remote-tracking branch 'origin/dev' into fix-form-group-markup
jacobmllr95 Dec 10, 2020
23f7ca2
Update array.js
jacobmllr95 Dec 11, 2020
05a6ed2
Update form-group.js
jacobmllr95 Dec 11, 2020
51dc3c1
Update form-group.spec.js
jacobmllr95 Dec 11, 2020
15e23a7
Update package.json
jacobmllr95 Dec 11, 2020
cabb899
Update README.md
jacobmllr95 Dec 11, 2020
1ff43ec
Update form-radio-check-group.js
jacobmllr95 Dec 11, 2020
e69b7a4
chore(docs): optimize all `<b-form-groups>` for A11Y
jacobmllr95 Dec 11, 2020
887c04b
Merge branch 'dev' into fix-form-group-markup
jacobmllr95 Dec 11, 2020
c643735
Merge branch 'dev' into fix-form-group-markup
jacobmllr95 Dec 11, 2020
5011d4c
Merge branch 'dev' into fix-form-group-markup
jacobmllr95 Dec 11, 2020
9825e80
Merge branch 'dev' into fix-form-group-markup
jacobmllr95 Dec 12, 2020
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
15 changes: 12 additions & 3 deletions src/components/calendar/README.md
View file
Open in desktop
10000
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,23 @@ For disabling specific dates or setting minimum and maximum date limits, refer t
```html
<template>
<div>
<b-form-group label="Select calendar interactive state">
<b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
<b-form-group label="Select calendar interactive state" v-slot="{ ariaDescribedby }">
<b-form-radio-group
v-model="state"
:aria-describedby="ariaDescribedby"
aria-controls="ex-disabled-readonly"
>
<b-form-radio value="disabled">Disabled</b-form-radio>
<b-form-radio value="readonly">Readonly</b-form-radio>
<b-form-radio value="normal">Normal</b-form-radio>
</b-form-radio-group>
</b-form-group>
<b-calendar id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-calendar>

<b-calendar
id="ex-disabled-readonly"
:disabled="disabled"
:readonly="readonly"
></b-calendar>
</div>
</template>

Expand Down
107 changes: 77 additions & 30 deletions src/components/form-checkbox/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,23 @@
```html
<template>
<div>
<b-form-group label="Using options array:">
<b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
id="checkbox-group-1"
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
name="flavour-1"
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Using sub-components:">
<b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
<b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
id="checkbox-group-2"
v-model="selected"
:aria-describedby="ariaDescribedby"
name="flavour-2"
>
<b-form-checkbox value="orange">Orange</b-form-checkbox>
<b-form-checkbox value="apple">Apple</b-form-checkbox>
<b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
Expand Down Expand Up @@ -220,41 +226,57 @@ or if using individual checkboxes not inside a `<b-form-checkbox-group>`, set th
```html
<template>
<div>
<b-form-group label="Form-checkbox-group inline checkboxes (default)">
<b-form-group
label="Form-checkbox-group inline checkboxes (default)"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
name="flavour-1a"
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Form-checkbox-group stacked checkboxes">
<b-form-group
label="Form-checkbox-group stacked checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
name="flavour-2a"
stacked
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Individual stacked checkboxes (default)">
<b-form-group
label="Individual stacked checkboxes (default)"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox
v-for="option in options"
v-model="selected"
:key="option.value"
:value="option.value"
:aria-describedby="ariaDescribedby"
name="flavour-3a"
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>

<b-form-group label="Individual inline checkboxes">
<b-form-group
label="Individual inline checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox
v-for="option in options"
v-model="selected"
:key="option.value"
:value="option.value"
:aria-describedby="ariaDescribedby"
name="flavour-4a"
inline
>
Expand Down Expand Up @@ -395,30 +417,42 @@ variants). The default `button-variant` is `secondary`.
```html
<template>
<div>
<b-form-group label="Button-group style checkboxes">
<b-form-group
label="Button-group style checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
name="buttons-1"
buttons
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Button-group style checkboxes with variant primary and large buttons">
<b-form-group
label="Button-group style checkboxes with variant primary and large buttons"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
buttons
button-variant="primary"
size="lg"
name="buttons-2"
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Stacked (vertical) button-group style checkboxes">
<b-form-group
label="Stacked (vertical) button-group style checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
stacked
buttons
></b-form-checkbox-group>
Expand Down Expand Up @@ -486,18 +520,26 @@ Render groups of checkboxes with the look of a switches by setting the prop `swi
```html
<template>
<div>
<b-form-group label="Inline switch style checkboxes">
<b-form-group
label="Inline switch style checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
switches
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Stacked (vertical) switch style checkboxes">
<b-form-group
label="Stacked (vertical) switch style checkboxes"
v-slot="{ ariaDescribedby }"
>
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
switches
stacked
></b-form-checkbox-group>
Expand Down Expand Up @@ -553,18 +595,20 @@ by setting the `plain` prop.
```html
<template>
<div>
<b-form-group label="Plain inline checkboxes">
<b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
plain
></b-form-checkbox-group>
</b-form-group>

<b-form-group label="Plain stacked checkboxes">
<b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="selected"
:options="options"
:aria-describedby="ariaDescribedby"
plain
stacked
></b-form-checkbox-group>
Expand Down Expand Up @@ -747,22 +791,25 @@ modifier.
</b-form-checkbox>
</template>

<b-form-checkbox-group
id="flavors"
v-model="selected"
:options="flavours"
name="flavors"
class="ml-4"
aria-label="Individual flavours"
stacked
></b-form-checkbox-group>
</b-form-group>

<div>
Selected: <strong>{{ selected }}</strong><br>
All Selected: <strong>{{ allSelected }}</strong><br>
Indeterminate: <strong>{{ indeterminate }}</strong>
</div>
<template v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
id="flavors"
v-model="selected"
:options="flavours"
:aria-describedby="ariaDescribedby"
name="flavors"
class="ml-4"
aria-label="Individual flavours"
stacked
></b-form-checkbox-group>
</b-form-group>

<div>
Selected: <strong>{{ selected }}</strong><br>
All Selected: <strong>{{ allSelected }}</strong><br>
Indeterminate: <strong>{{ indeterminate }}</strong>
</div>
</template>
</div>
</template>

Expand Down
18 changes: 15 additions & 3 deletions src/components/form-datepicker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,26 @@ For disabling specific dates or setting minimum and maximum date limits, refer t
```html
<template>
<div>
<b-form-group label="Select date picker interactive state">
<b-form-radio-group v-model="state" aria-controls="ex-disabled-readonly">
<b-form-group
label="Select date picker interactive state"
v-slot="{ ariaDescribedby }"
>
<b-form-radio-group
v-model="state"
:aria-describedby="ariaDescribedby"
aria-controls="ex-disabled-readonly"
>
<b-form-radio value="disabled">Disabled</b-form-radio>
<b-form-radio value="readonly">Readonly</b-form-radio>
<b-form-radio value="normal">Normal</b-form-radio>
</b-form-radio-group>
</b-form-group>
<b-form-datepicker id="ex-disabled-readonly" :disabled="disabled" :readonly="readonly"></b-form-datepicker>

<b-form-datepicker
id="ex-disabled-readonly"
:disabled="disabled"
:readonly="readonly"
></b-form-datepicker>
</div>
</template>

Expand Down
Loading
0