mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
v5 alpha 2 migration guide updates
This commit is contained in:
parent
b060c9e3d2
commit
d4ea73fef1
@ -11,17 +11,23 @@ toc: true
|
||||
|
||||
### Sass
|
||||
|
||||
- "Screen reader" classes are now "visually hidden" classes.
|
||||
- Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
|
||||
- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
|
||||
- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
|
||||
- Add border width utility, see [31484](https://github.com/twbs/bootstrap/pull/31484)
|
||||
- Added default parameters to each `border-radius` mixin. See #31571.
|
||||
- Updated next breakpoint when targeting only the `xs` breakpoint. See #31500.
|
||||
- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. See #30394.
|
||||
|
||||
### Docs
|
||||
|
||||
- Renamed "Screen readers" helper page to "Visually hidden", and filename to `visually-hidden`
|
||||
- Renamed "Checks" page to "Checks & radios", and filename to `checks-radios`
|
||||
- Improved documentation of check/radio powered button groups
|
||||
- Improved skip links in our docs.
|
||||
- Redesigned docs navigation for larger tap targets on mobile and a streamlined subnav.
|
||||
- #3114: Improved form documentation with regards to accessibility.
|
||||
|
||||
### Layout
|
||||
|
||||
- Container horizontal padding updated to match the gutter size of `.row`s.
|
||||
- #31439: Removed `flex: 1 0 100%` from rows due to regressions in grid behavior.
|
||||
|
||||
### Reboot
|
||||
|
||||
@ -36,17 +42,23 @@ toc: true
|
||||
|
||||
### Forms
|
||||
|
||||
- Resized checks and radios to be `1em` instead of `1.25em` in an effort to make them scale better with custom `$font-size-base` values and more.
|
||||
- #31383: Resized checks and radios to be `1em` instead of `1.25em` in an effort to make them scale better with custom `$font-size-base` values and more.
|
||||
|
||||
### Components
|
||||
|
||||
### Badges
|
||||
#### Badges
|
||||
|
||||
- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
|
||||
- #31132: Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
|
||||
|
||||
#### Buttons
|
||||
|
||||
- Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639)
|
||||
- [#30639](https://github.com/twbs/bootstrap/pull/30639): Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin.
|
||||
- #30989: Updated buttons to ensure increased contrast on hover and active states.
|
||||
|
||||
#### Carousel
|
||||
|
||||
- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons](http://icons.getbootstrap.com).
|
||||
- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel/#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
|
||||
|
||||
#### Close button
|
||||
|
||||
@ -55,9 +67,23 @@ toc: true
|
||||
- Added new variables to better control the customization.
|
||||
- Added new `.btn-close-white` variant that uses `backdrop-filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
|
||||
|
||||
#### Collapse
|
||||
|
||||
- #31346: Removed scroll anchoring for accordions.
|
||||
|
||||
#### Dropdowns
|
||||
|
||||
- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
|
||||
- Added new variable for `$dropdown-padding-x`.
|
||||
- Darkened the dropdown divider for improved contrast.
|
||||
|
||||
#### Navs
|
||||
|
||||
- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
|
||||
- #31035: Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
|
||||
|
||||
#### Pagination
|
||||
|
||||
- Added `transition`s to pagination links. See #31396.
|
||||
|
||||
#### Popovers
|
||||
|
||||
@ -65,8 +91,10 @@ toc: true
|
||||
|
||||
#### Toasts
|
||||
|
||||
- Made default toast duration 5 seconds.
|
||||
- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
|
||||
- #31155: Clear `timeout` before showing toasts.
|
||||
- #31109: Made default toast duration 5 seconds.
|
||||
- #31381: Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
|
||||
- Updated docs to include additional examples for how to customize and theme toasts.
|
||||
|
||||
#### Tooltips
|
||||
|
||||
@ -79,6 +107,18 @@ toc: true
|
||||
- We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class needed, and the ratio helper now works with any HTML element.
|
||||
- The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
|
||||
- CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
|
||||
- "Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden/" >}}).
|
||||
- Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
|
||||
- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
|
||||
- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
|
||||
|
||||
### Utilities
|
||||
|
||||
- #31280: Added new [position utilities]({{< docsref "/utilities/position/#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
|
||||
- We also added new `translate` utilities to accompany those position utilities for centering elements when they're being positioned.
|
||||
- Some great examples have been added to the docs to show these off.
|
||||
- [#31484](https://github.com/twbs/bootstrap/pull/31484): Added new [`border-width` utility]({{< docsref "/utilities/borders/#border-width" >}}).
|
||||
- #31473: The `.d-none` utility was moved in our CSS to give it more weight over other display utilities.
|
||||
|
||||
---
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user