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.

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

Jump to bottom

fix(Bootstrap): remove deprecated classes #1815

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(Bootstrap): remove deprecated classes #1815

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6d9fbe
fix(Bootstrap): remove deprecated classes
Mar 15, 2024
eebfa51
fix breaking changes for titleSrOnly property
Mar 16, 2024
d631172
fix(Bootstrap)
Mar 23, 2024
e5751a6
fix: removed unuseful comments
Apr 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 0 additions & 8 deletions apps/docs/.vitepress/theme/Layout.vue
View file
Open in desktop
Expand Up @@ -314,14 +314,6 @@ watch(
color: var(--white);
}

@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
@content;
}
}

.doc-content > div > {
h2,
h3,
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/data/components/modal.data.ts
View file
Open in desktop
Expand Up @@ -349,10 +349,10 @@ export default {
description: 'CSS class (or classes) to apply to the title',
},
{
prop: 'titleSrOnly',
prop: 'titleVisibilityHiddenOnly',
anrolmar marked this conversation as resolved.
Show resolved Hide resolved
type: 'boolean',
default: false,
description: "Wraps the title in an '.sr-only' wrapper",
description: "Wraps the title in an '.visually-hidden' wrapper",
},
{
prop: 'titleTag',
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/docs/components/form-input.md
View file
Open in desktop
Expand Up @@ -123,7 +123,7 @@ If the `type` prop is set to an input type that is not supported (see above), a

### Range type input

Inputs with type `range` render using Bootstrap v5's `.custom-range` class. The track (the
Inputs with type `range` render using Bootstrap v5's `.form-range` class. The track (the
background) and thumb (the value) are both styled to appear the same across browsers.

Range inputs have implicit values for `min` and `max` of `0` and `100` respectively. You may specify
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/docs/components/form.md
View file
Open in desktop
Expand Up @@ -280,7 +280,7 @@ Custom form controls and selects are also supported.
### Alternatives to hidden labels

Assistive technologies such as screen readers will have trouble with your forms if you do not include
a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.
a label for every input. For these inline forms, you can hide the labels using the `.visibility-hidden` class.
There are further alternative methods of providing a label for assistive technologies, such as the
`aria-label`, `aria-labelledby` or `title` attributes. If none of these are present, assistive
technologies may resort to using the `placeholder` attribute, if present, but note that use of
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/docs/components/input-group.md
View file
Open in desktop
Expand Up @@ -67,7 +67,7 @@ Easily extend form controls by adding text, buttons, or button groups on either

You can attach addons using either props, named slots and/or sub-components.

**Note** Bootstrap 5 dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. The sub-components are added for compatibility reasons.
anrolmar marked this conversation as resolved.
Show resolved Hide resolved
**Note** Bootstrap 5 dropped `.input-group-text` and `.input-group-text`. You can now just add buttons and `.input-group-text` as direct children of the input groups. The sub-components are added for compatibility reasons.
anrolmar marked this conversation as resolved.
Show resolved Hide resolved

### Using `prepend` and `append` props

Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/docs/components/navbar.md
View file
Open in desktop
Expand Up @@ -397,7 +397,7 @@ Note that the expanded scope property only works when supplying the target prop
</template>
</BNavbarToggle>
<BCollapse id="navbar-toggle-collapse" is-nav>
<BNavbarNav class="ml-auto">
<BNavbarNav class="ms-auto">
<BNavItem href="#">Link 1</BNavItem>
<BNavItem href="#">Link 2</BNavItem>
<BNavItem href="#" disabled>Disabled</BNavItem>
Expand All @@ -418,7 +418,7 @@ Note that the expanded scope property only works when supplying the target prop
</BNavbarToggle>

<BCollapse id="navbar-toggle-collapse" is-nav>
<BNavbarNav class="ml-auto">
<BNavbarNav class="ms-auto">
<BNavItem href="#">Link 1</BNavItem>
<BNavItem href="#">Link 2</BNavItem>
<BNavItem href="#" disabled>Disabled</BNavItem>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/docs/reference/accessibility.md
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@ Content which should be visually hidden, but remain accessible to assistive tech

</BCard>

For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.
For visually hidden interactive controls, such as traditional “skip” links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, compared to the equivalent `.visibility-hidden` and `.visibility-hidden-focusable` classes in past versions, Bootstrap 5’s `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.

<BCard class="bg-body-tertiary">

Expand Down
2 changes: 1 addition & 1 deletion apps/playground/src/components/Comps/TTable.vue
View file
Open in desktop
Expand Up @@ -314,7 +314,7 @@
</template>

<template #cell(actions)="row">
<BButton size="sm" class="mr-1" @click="info(row.item, row.index)">
<BButton size="sm" class="me-1" @click="info(row.item, row.index)">
Info modal
</BButton>
<BButton size="sm" @click="row.toggleDetails">
Expand Down
40 changes: 14 additions & 26 deletions packages/bootstrap-vue-next/src/components/BInputGroup/_input-group.scss
View file
Open in desktop
Expand Up @@ -20,18 +20,18 @@ $bv-input-group-dropdown-patched: false !default;
// Workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/2114 */
// Based on: `~bootstrap/scss/_input-group.scss`
.input-group {
> .input-group-prepend > .btn-group,
> .input-group-append:not(:last-child) > .btn-group,
> .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
> .input-group-text > .btn-group,
> .input-group-text:not(:last-child) > .btn-group,
> .input-group-text:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
> .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

> .input-group-append > .btn-group,
> .input-group-prepend:not(:first-child) > .btn-group,
> .input-group-prepend:first-child > .btn-group:not(:first-child) {
> .input-group-text > .btn-group,
> .input-group-text:not(:first-child) > .btn-group,
> .input-group-text:first-child > .btn-group:not(:first-child) {
> .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Expand All @@ -40,27 +40,19 @@ $bv-input-group-dropdown-patched: false !default;
}
}

.input-group-lg .input-group-append > .form-control,
.input-group-lg .input-group-append > .form-select,
.input-group-lg .input-group-append > .input-group-text,
.input-group-lg .input-group-append > .btn,
.input-group-lg .input-group-prepend > .form-control,
.input-group-lg .input-group-prepend > .form-select,
.input-group-lg .input-group-prepend > .input-group-text,
.input-group-lg .input-group-prepend > .btn {
.input-group-lg .input-group-text > .form-control,
.input-group-lg .input-group-text > .form-select,
.input-group-lg .input-group-text > .input-group-text,
.input-group-lg .input-group-text > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
border-radius: $border-radius-lg;
}

.input-group-sm .input-group-append > .form-control,
.input-group-sm .input-group-append > .form-select,
.input-group-sm .input-group-append > .input-group-text,
.input-group-sm .input-group-append > .btn,
.input-group-sm .input-group-prepend > .form-control,
.input-group-sm .input-group-prepend > .form-select,
.input-group-sm .input-group-prepend > .input-group-text,
.input-group-sm .input-group-prepend > .btn {
.input-group-sm .input-group-text > .form-control,
.input-group-sm .input-group-text > .form-select,
.input-group-sm .input-group-text > .input-group-text,
.input-group-sm .input-group-text > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
border-radius: $border-radius-sm;
Expand All @@ -71,10 +63,6 @@ $bv-input-group-dropdown-patched: false !default;
border-start-end-radius: 0px;
border-end-end-radius: 0px;
}
.btn-group:not(:last-child) > :not(:last-child) {
border-start-start-radius: 0px;
border-end-start-radius: 0px;
}
.btn-group:not(:last-child) > :not(:last-child) {
border-start-end-radius: 0px;
border-end-end-radius: 0px;
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap-vue-next/src/components/BModal/BModal.vue
View file
Open in desktop
Expand Up @@ -184,7 +184,7 @@ const props = withDefaults(defineProps<BModalProps>(), {
teleportTo: 'body',
title: undefined,
titleClass: undefined,
titleSrOnly: false,
titleVisibilityHiddenOnly: false,
titleTag: 'h5',
transProps: undefined,
})
Expand Down Expand Up @@ -342,7 +342,7 @@ const footerClasses = computed(() => [
const titleClasses = computed(() => [
props.titleClass,
{
['visually-hidden']: props.titleSrOnly,
['visually-hidden']: props.titleVisibilityHiddenOnly,
},
])
const disableCancel = toRef(() => props.cancelDisabled || props.busy)
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap-vue-next/src/types/ComponentProps.ts
View file
Open in desktop
Expand Up @@ -337,7 +337,7 @@ export interface BModalProps {
teleportTo?: string | Readonly<RendererElement> | null | undefined
title?: string
titleClass?: ClassValue
titleSrOnly?: boolean
titleVisibilityHiddenOnly?: boolean
titleTag?: string
transProps?: Readonly<BTransitionProps>
}