diff options
Diffstat (limited to 'site/content/docs/5.0/migration.md')
| -rw-r--r-- | site/content/docs/5.0/migration.md | 67 |
1 files changed, 63 insertions, 4 deletions
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 0cf0618e4..3ee604d44 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -7,6 +7,50 @@ aliases: "/migration/" toc: true --- +## v5.0.0 + +### JavaScript + +- Dropdowns now have one more option (`autoClose`) to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive. + +## v5.0.0-beta3 + +### Components + +- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups. + +### JavaScript + +- All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: + + ```js + var modal = new bootstrap.Modal('#myModal') + var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') + ``` + +- Dropped `flip` option for dropdown plugin in favor of native popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. + +### Utilities + +- Dropped the `0` entry in `$border-widths` map to remove the duplicated `.border-0` class. + +## v5.0.0-beta2 + +### Utilities + +- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties. +- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`. +- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore. +- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757). + +### JavaScript + +- Restored `offset` option for Dropdown, Popover and Tooltip plugins. +- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. +- All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. +- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. +- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. + ## v5.0.0-beta1 ### RTL @@ -19,7 +63,7 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with ##### Components -- Renamed `.dropleft` and `.dropright` to `.dropstart` and `dropend`. +- Renamed `.dropleft` and `.dropright` to `.dropstart` and `.dropend`. - Renamed `.dropdown-menu-*-left` and `.dropdown-menu-*-right` to `.dropdown-menu-*-start` and `.dropdown-menu-*-end`. - Renamed `.bs-popover-left` and `.bs-popover-right` to `.bs-popover-start` and `.bs-popover-end`. - Renamed `.bs-tooltip-left` and `.bs-tooltip-right` to `.bs-tooltip-start` and `.bs-tooltip-end`. @@ -35,7 +79,9 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`. -Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` replaces `.text-md-left`). +Breakpoints specific variants are consequently renamed too (e.g. `.text-md-start` replaces `.text-md-left`). + +**Note**: if you used v4 to make RTL pages, ensure to reverse changes mentioned above: e.g. use `.*-start` where you used `.*-right`. ##### Mixins @@ -52,15 +98,21 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Renamed `$form-check-inline-margin-right` to `$form-check-inline-margin-end`. - Renamed `$form-select-feedback-icon-padding-right` to `$form-select-feedback-icon-padding-end`. - ### JavaScript - Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. +- Updated Popper to v2.x: + - Removed `offset` option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the `popperConfig` parameter. + - The `fallbackPlacement` option has become `fallbackPlacements`. ### Sass - Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. +### Utilities + +- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements. + ### Components #### Breadcrumbs @@ -68,6 +120,10 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`. - Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS. +#### Toasts + +- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}). + ## v5.0.0-alpha3 ### Browser support @@ -102,6 +158,7 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` - Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency. - Added `.d-grid` to display utilities - Added new `gap` utilities (`.gap`) for CSS Grid layouts +- Removed `.rounded-sm` and `rounded-lg`, and introduced `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). ## v5.0.0-alpha2 @@ -288,7 +345,7 @@ We've updated the color system that powers Bootstrap to improve color contrast a Changes to any layout tools and our grid system. -- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265). +- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). - Remove `position: relative` from grid columns. - The horizontal padding is added to the direct children in a row instead of the columns themselves. - This simplifies our codebase. @@ -296,6 +353,7 @@ Changes to any layout tools and our grid system. - The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions. - The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px). - `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` is not applied to each element. +- Removed `.no-gutters` in favor of new gutter spacing classes. Use `.g-0` instead. [Read the gutter docs for more details.]({{< docsref "/layout/gutters" >}}) ### Content, Reboot, etc @@ -346,6 +404,7 @@ Changes to Reboot, typography, tables, and more. - Dropped support for `.form-control-plaintext` inside `.input-group`s. - 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. - Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476) +- `.form-text` no longer sets `display`, but does set `color` and `font-size`. So instead of `<small class="form-text text-muted">` you should now use `<div class="form-text">`. ### Components |