This issue tracks all the remaining things to backport from Bootstrap v4.

For all actions done from this epic issue:

Don't forget to update the migration page
Ensure to add deprecation warnings in v4 when required (see #560 / #562 for examples).
[x] Gather and sort items from https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/383 then delete it as duplicate
[x] Check the content of https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/640 and define an action_
[x] Compare our v5 components with the design specifications and note the differences
[x] Merge this list with the ones in comments
[x] Study each item and create an issue for each one or delete it
[x] Document somewhere (Discrepancies between Boosted and Bootstrap?)Bootstrap parts dropped in Boosted (and the reasons as an history) and add in the DoDs to update this doc
- no .floating-label
- no .form-control-sm, .form-select-sm, .input-group-sm, .col-form-label-sm -> Should change with #1230
- no forms' .#{$state}-tooltip
- no table-row-variants(), .table-bordered, .table-borderless, .table-striped -> Should change with #859
- no .btn-outline
- no .pagination-sm nor .pagination-lg
- no active state for .list-group-item-action -> Should change with #1467
- no floating labels
- no carousel dark variant
- alerts sizes & icons
- Tabs light
- Responsive pagination with pagination-max-items()
- Progress sizes
- Spinners sizes
- Growing spinners -> Might have changed with #1041
- :focus-visible is still here
- Tools: bots Mattermost & Slack, Percy, Pa11y, Calibre App ;
- Form validation: success and errors do not share the same layout, and icons aren't shown as inputs' backgrounds
- Range input with filled thumb
- colorand background-color utilities have their counter-part to ensure contrasts
- Introduced target-size() mixin
- Carousels:
- Animated progress indicator, introducing --o-carousel-interval, .paused, .done and .static
- Disabled controls when at one end and data-bs-wrap="false"
- Introduced $boosted-variable-prefix to supplement Bootstrap's $variable-prefix
- Link with chevron
- Back-to-top component
- Introduced button-icon() mixin
- Social buttons
- Icon buttons (alongside .btn-icon modifier)
- .btn-no-outline modifier
- Toggle buttons with icon
- Others can be found in this issue...
- Sticker component
- Footer component
- Orange navbar component

Remaining tasks or bugs

[x] Homepage In v4 there were interesting sections. We need to evaluate if we use as well in v5. See #1160.
- "Only in Boosted!" section that redirects to /docs/4.6/about/boosted-history/
- "Orange Templates"
- "Using Angular?"
- "Migrating from Boosted 3?"
[x] Docs > Getting started > Introduction Add in the Feature DoD that we must not forget to update the list in Show components requiring JavaScript if a new custom Orange component requires JavaScript
[x] #984
[x] https://github.com/twbs/bootstrap/pull/35556
[x] Docs > Getting started > Accessibility Check if Color contrast explanation is enough compared to v4. We should try to make it more understandable (at first sight) to people. See #1297
[x] Docs > Customize > Overview Add in the DoD for Feature that we must not forget to update CSPs and embedded SVGs section
[x] #1225
[x] Docs > Customize > Components Check the content of both Modifiers examples. By the way, there are some missing line breaks after the comments compared to Bootstrap. -> Totally fine since the mixins changed (.bg-* to .list-group-*). Correcting the line breaks in #1439
[x] #985
[x] Docs > Layout > Containers Check that the table content is right. There was a difference between Boosted and Bootstrap in v4 and the table content is the same in Boosted and Bootstrap v5. Moreove $container-max-widths is different between Boosted and Boostrap v5. Also compare to https://boosted.orange.com/docs/5.1/layout/breakpoints/#available-breakpoints. See #987.
[x] Docs > Layout > Grid Check that the Grid options table is OK. There was more info in Boosted v4 (more rows) than in Bootstrap v4. We don't see it in Boosted v5 which has the same format than Bootstrap v5. See #1440.
[x] Docs > Layout > Grid Check if we don't need to reintroduce $grid-gutter-widths and $container-fluid-margin-widths that were only in Boosted v4 (and with different mixins). They are already in Boosted v5 ($container-fluid-margin-widths -> $container-fluid-margin) since #987.
[x] https://github.com/twbs/bootstrap/pull/35563
[x] Docs > Content > Reboot Table caption and content were different in Boosted v4 and Bootstrap v4. Caption seems OK in Boosted v5 but the headers and rows are different. -> v4 cheats by using .table on reboot. Do we need to change it ? -> No
[x] Docs > Content > Reboot Design work to do for User input? It was not done in v4 neither. -> Seen with design keep it as is since the update of the DSM for the greys.
[x] Docs > Content > Reboot Lists section is less well-explained in v5 than in v4 : Need to introduce a 3rd level of list to show what's going on here. Wait for the design to change the DSM for colors. -> See #1497.
[x] Docs > Content > Typography Display 5 and 6 are not in v4. Moreover, they are not in the first table explaining the sizes. Is that normal that .display-5/.h5 and .display-6/.h6 have the same rendering. -> Should be hidden but not removed. Then wait for design to have specs. -> See #1496. We maybe need to update migration guide.
Docs > Content > Typography Check that it's normal that we don't use in Boosted $display-font-sizes. -> Yes that's normal since we don't use responsive font-size and we still want a kind of responsiveness on certain breakpoints. We maybe need to update migration guide.
[x] Docs > Content > Typography Check the rendering in v4 with designers; we can't find the design specs anywhere. Seen with design : waiting for correspondence table and keep it as is for now.
[x] Docs > Content > Typography Links rendering in v5 and v4 seems not to match the design specs of WEB-NAV-LNK-003 and 004. Seen with design : don't need to update those before they rework it.
Docs > Content > Typography Missing Orange square list from v4? Linked to #1156. Seen : Feels right at the moment. We maybe need to update the migration guide.
[x] Docs > Content > Typography ~~Missing~~ Links from v4? -> Keep it as-is since we already redirect to other components.
[x] Docs > Content > Typography Missing With arrow from v4? -> It is with Chevron. We maybe need to update migration guide. See #1633.
[x] Docs > Content > Typography Missing With back arrow from v4? Needed. We maybe need to update migration guide. See #1633.
[x] Docs > Content > Typography Check if we need to reintroduce the difference between Responsive typography and Responsive font sizes. Seems to be ok for me
[x] Docs > Content > Images Image thumbnails doesn't exist anymore while it existed in Boosted v4. -> Need to re-introduce them with a 20px configurable white margin and an optional border -> See #1441.
[x] Docs > Content > Tables Dark variant table rows hover color is different in v5 and v4 → see #859
[x] Docs > Content > Tables Rich content tables is missing in version 5.
[x] Docs > Content > Tables Rich content tables > Sortable tables are missing in version 5 because there is no more jQuery; an alternative?. Moreover, the example in v4 doesn't work in the doc. No caret in v4 contrary to design specs. See #1163.
[x] Docs > Content > Tables In version 5, header line height is 20px instead of 18px (see design guidelines) -> Do we need to change it since tables seem to be correct ? -> No
[x] Docs > Content > Tables In version 5, table cells' padding-bottom is 15px instead of 10px, top is 14px instead of 5px, 7px or 10px (depending on the content) > table-sm seems way more brand friendly on this point, shall it become the Orange base? -> No, we need both of them.
[x] Docs > Content > Tables Do responsive tables need a sticky row? (no design guideline at the moment). See https://github.com/twbs/bootstrap/issues/31458. See #859.
[x] Docs > Content > Tables Missing expanding row in version 5. See #1162.
[x] Docs > Content > Tables Missing row selection in version 5
[x] Docs > Content > Tables Missing column filter in version 5. An example rather that an implementation? See #1161.
[x] Docs > Content > Tables Check with designers if we need to remove or not the dark line under the caption (here in v5 and not in v4) -> v5 needs to remove its line under the caption -> Not the case anymore since https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/9ec9150ad2962200457247764fccb19de295e01b
[x] Docs > Content > Figures .rounded is not applied. Just check if it is normal / by design. -> .rounded isn't in Boosted anymore. Moreover, design doesn't have any rounded border apart pill and circle. To summarize, this is fine to not have rounded border until design refactor borders.
[x] .rounded class does nothing while it worked in Bootstrap v4. -> Removed from Boosted since https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/a94291b258b640ee86f8c4a58185c10ba46abaef. Do we re-introduce it ? -> See #1551.
[x] Docs > Forms > Overview Not the same spacing between "Check me out" and "Submit" button in v5 and in v4. Will come with pages from design and backport from this point. See #1495.
[x] Docs > Forms > Overview Form text rendering is different from v4 (and from Bootstrap). Are there design guidelines somewhere? -> v5 is great so backport to v4, design will come later -> See #1442.
[x] Docs > Forms Missing tooltip example -> Will come with Pages from design. -> See #1444.
[x] Docs > Forms > Overview Form label margin bottom should be 6px instead of 8px (see design guidelines) -> See #1443.
Docs > Forms > Overview Padding inside input should be 9px 10px 13px instead of 7px 10px 9px (in version 5) -> Do we change it since it is well displayed this way ?
[x] Docs > Forms > Overview is-requiredshould have a margin-leftof 3px instead of 6px (in version 5). See #1144 and #1177.
[x] Docs > Forms > Form control Sizing: large form control hasn't the same padding than in v4. Specifications are coming
[x] Docs > Forms > Form control ~~File input Inform designers that there is no corresponding design specs.~~ Asked to design, specs should come with accessibility aswell. Fine as it is at the moment
[x] Docs > Forms > Select Sizing: inform designers that there is no corresponding specs for multiple select. -> Let's wait for specs from design
[x] #1073
[x] #1227
[x] #1229
[x] [Bootstrap] Docs > Forms > Checks & radios Radios. Probably "selected" rather than "checked" (source? https://www.w3schools.com/tags/att_input_type_radio.asp) Asked in https://github.com/twbs/bootstrap/pull/35563 Checked.
[x] Docs > Forms > Input group Some elements were not in the Basic example in Boosted v4 but were in Bootstrap. Check if we need to remove them from Boosted v5. -> Comes from #285. Should be asked to design IMO.
[x] Docs > Forms > Validation Custom styles: error messages should have a bit more spacing in v5. Should be 6px according to design guidelines instead of 4px atm. -> See #1445.
[x] Docs > Forms > Validation Check in Supported elements that all custom Orange components are displayed here. Add it in DoD for Feature to avoid forgetting it. What for rating star, components that aren't developed yet, range ? Need a question to design. Apart that, it's fine
[x] Docs > Components > Accordion Example Medium sized one isn't branded, 45px instead of 50. See #1091.
[x] Docs > Components > Accordion Sizes Line height for large one isn't good. See #1091.
[x] Docs > Components > Accordion Missing dark variant. See #1025.
[x] Docs > Components > Alerts Missing dark variant as in v4. See #1012.
[x] Docs > Components > Alerts Missing "Action" link in example as in v4
[x] [Bootstrap] Docs > Components > Alerts Missing Initialize in migration guide? Can't find the commit that brought it to Bootstrap, but between Bs v5.0.2 and Bs v5.1.0. I think if they didn't added it in migration guide, we shall not too.
[x] Docs > Components > Alerts Sizes: remove margin when stacked? ~~(no design specs)~~. The alerts are well displayed and have 15px between in small version. See #1165.
[x] Docs > Components > Alerts Missing specific Boosted message about the icons from v4. See #1165.
[x] Docs > Components > Alerts Why don't we use the same technics to display our alerts than explained in Icons? We have a better way to display those since we don't need to specify the svg to use.
[x] Docs > Components > Alerts Missing specific Boosted message about the div in "Additional content". See #1165.
[x] Docs > Components > Badge Check if it is normal to have a different rendering in Examples v4 and Examples v5 (size of the badges) (coming from https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/157/commits/859cc5e1ef1c54c97da986bdb14772f7af28db38 in v4 and from https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/362/commits/51263129763558519a86898a6d99745113506603 in v5). We keep as is in Boosted v5 need a backport to v4 ? -> Keep it as is and alert about the use of it -> See #1199.
[x] Docs > Components > Breadcrumb Missing Backgrounds (in v4). -> See #1430.
[x] Docs > Components > Breadcrumb Backgrounds Missing hover for the breadcrumb bg-dark in the v4.-> See #1446.
[x] Docs > Components > Breadcrumb Inconsistency between design specs and development regarding underlined links. -> Need to remove orange hover behavior and change it with something else -> Wait until a rework from design
[x] Docs > Components > Buttons Missing dark variant
[x] Docs > Components > Buttons Line height is 20px instead of 18px -> Don't need a change since it is well displayed IMO. + Helps simplify CSS with icon buttons
[x] Docs > Components > Buttons Sizes Letter spacing of large buttons is -0.1px instead of -0.2px -> See #1447.
[x] Docs > Components > Buttons With icon Why the buttons are called "Secondary" and are displayed as primary buttons. -> See #1494.
[x] Docs > Components > Buttons With icon. There is a difference between the sizes of the icons for the small and larger versions between v4 and v5. Pick one and apply in both versions.-> Specifications will come about it -> Made like in v4: See ~~#1448~~ #1611.
Docs > Components > Buttons Missing Toggle buttons with icon example? -> Replaced by toggle-buttons in Forms directly. Do we need to change/link to something here ? -> No
Docs > Components > Button group Why Nesting and Vertical variation use a split button while Boosted v4 and Bootstrap v4/v5 uses a simple dropdown? -> To show that it even works with split dropdowns #645. Do we need to reintroduce them ? -> No
[x] Docs > Components > Card Padding top for titles should be 15px according to design specs rather than 20px on v4 and v5. -> See #1449.
[x] Docs > Components > Card List groups footer looks weird + difference between v4 and v5. -> There isn't any issue since we can build branded cards with the actual implementation. Warning about it will come with #1199.
[x] Docs > Components > Card Missing space in Header and footer - Quote. -> See #1450.
[x] Docs > Components > Card Background and color should use supporting colors. -> See #1199.
Docs > Components > Card Text alignment was removed in Boosted v4. But it wasn't maybe a good idea given the fact that it is used after in Navigation. -> Was done on purpose in #575. Do we backport it on v5 ? -> No
[x] Docs > Components > Card .bg-dark is used in Bootstrap without changing the color. In Boosted 4 it is displayed in black, in Boosted 5 it is removed. But the color comes from the SVG. Check that there is not a problem here. -> See #1493.
[x] Docs > Components > Carousel Missing Slides only that was only in Boosted v4? -> Comes from #362 (and more exactly https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/7f320f69539ef1f2424e50d8eda41ffcd447bf38). It was done on purpose, do we reintroduce it ? -> Wait for #1199
[x] Docs > Components > Carousel Missing Add a link to a slider by using a html tag. in Boosted v4. -> See #1491.
[x] Docs > Components > Carousel "Crossfade", "Individual .carousel-item interval" and "Disable touch swiping" are not in the same order between Boosted v5 and Bootstrap v5 -> See #1491.
[x] Docs > Components > Carousel A Dark variant exists in Bootstrap v5 and not in Boosted v5. Normal? -> Dropped in (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/7f320f69539ef1f2424e50d8eda41ffcd447bf38 on #573). I can't see why it has been dropped, do we reintroduce it. Explain why its not here -> Controls are semi-transparent so we don't need on Boosted
[x] #1112
[x] [Bootstrap] Docs > Components > Collapse Could be replaced by <details>? (see https://developer.mozilla.org/fr/docs/Web/HTML/Element/details). See #1097.
[x] Docs > Components > Collapse Not in design specs. Should be added? -> No IMO, this is "just" an animation.
[x] Docs > Components > Dropdown Single button Dropdowns menu spacing between button and dropdown menu isn't the same in v4 and in v5. Menu should stick on button as in v4 (should be below the border) maybe with dropdown options? See #1164.
[x] Docs > Components > Dropdown Dark dropdowns is broken in v4 and v5. See #1021 and #658.
[x] Docs > Components > Dropdown Sizing: Less padding for large variant? Border color? See #1164.
[x] [Bootstrap] Docs > Components > Dropdown Dropright shouldn't be "Dropend" and Dropleft "Dropstart"? See https://github.com/twbs/bootstrap/pull/35563
[x] Docs > Components > Dropdown Headers: dropdown header's padding different from v4 See #1164. There will be a meeting for this specific point
[x] Docs > Components > Dropdown Dropdown item's height is 38px instead of 40px See #1164.
[x] Docs > Components > Dropdown Dropdend and dropstart should have the same size for the splitted button + adjust arrows depending on the direction. -> Seen with design, it should. See #1451.
[x] Docs > Components > Dropdown In both versions of Boosted, the vertical separation of the Split dropstart is not the same than for the right. See #1164.
[x] Docs > Components > Dropdown Dropdown divider has not the same color than in Boosted v4. See #1164. 2px dividers seems to be better for design
Docs > Components Jumbotron doesn't exist anymore as a component in Bootstrap 5 but in examples. Add it as well in Boosted v5 for projects. -> Do we need to add an example or a component ? -> No
[x] Docs > Components > List group Links and buttons needs a hover state as in v4? -> See #1452.
[x] Docs > Components > List group Contextual classes have different background colors compared as in v4. -> See #1452.
[x] Docs > Components > List group Custom content: muted content looks weird on click. Probably linked to a11y. -> See #1452.
[x] Docs > Components > List group Identify that it doesn't exist in design specs. -> See #1452.
[x] Docs > Components > List group Is it OK to have orange color for numbers in Numbered? See #1156.
[x] Docs > Components > List group The badges weren't rounded in Boosted v4 -> Keep it as is and alert about it -> See #1199.
[x] Docs > Components > List group Missing top border in JavaScript behavior (as well in Boosted v4) -> Nope, fine as is
[x] Docs > Components > Modal No need of Orange Popin in v4. Can we remove it? Otherwise, it should be mentioned in migration guide. -> No need to mention the disappear in migration guide since it was just an example.
[x] Docs > Components > Modal Text link left-aligned in mobile modals? -> See #857.
[x] Docs > Components > Navs & tabs First example of Base nav doesn't work? Orange branded? -> See #1199.
[x] Docs > Components > Navs & tabs Fill and justify Shouldn't the text be always centered? -> No since Orange brand don't want to have centered text, we'll warn about it. See #1199.
[x] Docs > Components > Navs & tabs Fill and justify and Working with flex utilities have a weird behavior in Boosted v4/v5. -> Warn about it. See #1199.
[x] Docs > Components > Navs & tabs JavaScript behavior Borders looks weird in the Pills example. -> See #1199.
[x] Docs > Components > Navs & tabs Pills not branded? -> See #1199.
[x] Docs > Components > Navs & tabs Not responsive. Need to transform in accordion at a medium breakpoint. Missing Responsive Tabs from Boosted v4. -> See #1455.
[x] Docs > Components > Navbar Will probably reintroduce all Bootstrap examples and add a global alert on this page to redirect to "Orange navbar" currently in development.
[x] #986
[x] Docs > Components > Pagination Use of :before in next button, shouldn't be a :after? -> Not important at all + simplify CSS
Docs > Components > Pagination Click on selected value doesn't show pressed state. -> v5 implementation seems to be slightly better since clicking on the button shouldn't have any effect. Need a backport to v4 -> No
Docs > Components > Pagination Why numbers are not in the examples in Boosted? -> As far as I can go, removed from the doc. Do we need to reintroduce them in Boosted -> No
[x] Docs > Components > Pagination No more .has-label class in Boosted v5. Is it in the migration guide? -> Needs to be in migration guide. See #1633.
[x] Docs > Components > Placeholders Missing design specifications. Hard to evaluate this ? -> lottie is under study so specs will be coming
[x] Docs > Components > Placeholders Accessibility check? Asked to accessibility expert.
[x] Docs > Components > Placeholders Need an example with working JS to replace content once loaded? -> Not needed and should be on Bootstrap side first anyway.
[x] Docs > Components > Placeholders More animations? Waiting for designers -> Will come with the study
[x] Docs > Components > Progress Size too big in v4 instead of 20px. Progress bars don't have the same height in Boosted v4 and Boosted v5 (it has an impact on the label too) but v5 seems to be correct compared to https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1. Need to backport the modification to v4? -> See #1456.
[x] Docs > Components > Back to top Scroll up in v4 needs to be in migration guide? Needs to be in migration guide. -> See #1633.
[x] Docs > Components > Spinners Buttons: spacing to fix. See #1041.
[x] Docs > Components > Spinners Reintroduce Grow spinners and mark them as "not Orange Design approved". See #1041.
[x] Docs > Components > Spinners There are normally 3 sizes for the spinners. Isn't that already the case (preview) ?
[x] Docs > Components > Stepped process 40px height in v4 and 30px in v5 and design guidelines. See #1039.
[x] Docs > Components > Toasts Toasts are behind Back to top component: is that normal? -> Better this way since a toast can be removed instead of the back to top component.
[x] Docs > Components > Toasts Missing Live example in v4 (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1013)
[x] Docs > Components > Toasts Missing design specs or forbidden by the Brand? -> Ongoing
[x] Docs > Components > Toasts Remaining "blue" toast in Boosted v4 (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1013)
[x] Docs > Components > Toasts Isn't the right margin too big? (right of the close button) -> See #1490.
[x] Docs > Components > Toasts Text not well centered in Custom content -> See #1490.
[x] Docs > Utilities > API Check if the values are correct in Enable responsive -> See #1488.
[x] Docs > Utilities > Borders Substractive are too thin in v4. -> See #1458.
[x] Docs > Utilities > Borders Missing colors in Border color compared to the one in v4. See https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/bcd4b623ed90475df9cd035da836d939deb62482 and https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/commit/5639866711040d7d6e37e5d3f14605c84f93618e in v4.4. Need to see with design. -> Fine as is in v5 so nothing to change -> Update the migration guide or add them and alert about it -> Waiting for design to have those.
[x] Docs > Utilities > Borders Missing Border-radius that was in v4. Fine as is in v5 so update the migration guide or add them and alert about it -> See #1633.
[x] Docs > Utilities > Borders Missing Sizes that was in v4. No need to add it in v5 -> Update the migration guide or add them and alert about it -> See #1633.
[x] Docs > Utilities > Colored links Do they need to be displayed like navigation links or like in design nav. Waiting for design to update the DSM and no need to change until that moment
[x] Docs > Utilities > Position Examples should respect the Orange Design for the badges -> See #1199.
[x] Docs > Utilities > Shadows Re-introduce them with an alert to ODS not compliant -> Wait an answer in #1551.
[x] Docs > Utilities > Text Do we need info in v4 for text-break rtl ? (v5) -> See #1459.
[x] Docs > Extend > Icons Shall we add link to Solaris icons? -> I don't think so while there's no search bar inside. What do you think about it. Ask to Phil if we need to update reference. -> Asked.-> Since there's a search bar, redirect on the DSM is way better.
Docs > Boosted migration This page doesn't exist in Boosted v5. Decide if things must be added into Bootstrap's one or by adding a new page, like it was done between v3 and v4. -> Use Bootstrap's one.
[x] Docs > Boosted migration Check if elements from #383 have been developed or not and evaluate if they must be developed or not
- Didn't implement in both carousels and nav-tabs > :last-child { margin-bottom: 0; } to prefer using utilities -> No
- Didn't implement .navbar-brand + .navbar-brand -> No
- Dropped $container-fluid-margin-widths -> See #1633.
- Badges stay in em, unlike in v4 -> No
- colors variables evolved to match UI Kit design tokens (refer to the doc): $orange-2 changed to $accessible-orange, etc. See #1633.
- new $alert-icons map (to document?) with icon handling -> No since it doesn't change any use case
- Simpler close button, closer to bootstrap v5 -> Already in
- $background-colors replaces $supporting-colors -> See #1633.
- Link with arrow (.o-link-arrow) is now link with chevron (.link-chevron) -> See #1633.
- .back has not been implemented since it's not part of the Web UI Kit. -> See #1633.
- Scroll-up (.o-scroll-up) is now Back to top (.back-to-top-wrapper and .back-to-top-link) and does not require any JavaScript anymore 🎉 -> See #1633.
- Social buttons now require .btn-icon modifier, -> See #1633.
- Toggle buttons with icon: the pattern changed Bootstrap-side but we still require .btn-icon modifier too. -> See #1633.
- Stepbar (.o-stepbar) is now Stepped process (.stepped-process) and all .stepbar-... classes are now .stepped-process-... -> See #1633.
- For Stepped process variables:
  - $o-stepbar-margin-r is renamed $step-item-margin-end -> See #1633.
  - $o-stepbar-arrow-width is renamed $step-item-arrow-width -> See #1633.
  - $o-stepbar-height is not used anymore -> See #1633.
  - Lots of new variables have been added aswell -> See #1633.
- Change .o-footer-* to some new .footer-* classes -> See #1633.
- Color levels migration If you were using theme-color-level() mixin or $theme-color-interval variable in your custom code in v4, those are gone in v5 and are replaced with new variables instead (as for grays in v4). Here's a compatibility table, using $color where it could be `$primary or any other theme color.. -> Already in

Color levels comparison table

| v4 | v5 | | --------------------------------------- | ----------------- | | `theme-color-level($color, -8)` | `$color-100` | | `theme-color-level($color, -6)` | `$color-200` | | `theme-color-level($color, -4)` | `$color-300` | | `theme-color-level($color, -2)` | `$color-400` | | `theme-color-level($color)` | `$color-500` | | `theme-color-level($color, 2)` | `$color-600` | | `theme-color-level($color, 4)` | `$color-700` | | `theme-color-level($color, 6)` | `$color-800` | | `theme-color-level($color, 8)` | `$color-900` |

[x] Docs > About > Brand Something's wrong in Clear space with the squares around orange logo, it overlaps on text. -> See #1460.
[x] Docs > About > Brand Move the content of "Design guidelines" here
[x] Documentation Footer "Pre-release on Netlify" link displays the v4 version
[x] Boostwatch There are examples with .form-group .row / .form-group .row .top / .form-group .row .right to move the invalid feedback message. Need to reintegrate it? -> Not in the DSM

Documentation

Getting started

Introduction

Download

⁉️ [Non-essential] Source code > version 5.0 ? (v5)

Browsers & devices

JavaScript

Theming (only in v4)

Build tools (only in v4)

Webpack

Parcel (only in v5)

Accessibility

⁉️ [Non-essential] Color contrast > Missing the color contrats table ? (v4 vs v5)

RFS (only in v5)

RTL

Contribute (only in v5)

Customize (only in v5)

Overview (only in v5)

Sass (only in v5)

Options (only in v5)

Color (only in v5)

Components (only in v5)

CSS Variables (only in v5)

Optimize (only in v5)

UnusedCSS > 2 dead links (v5)

Layout

Overview

Grid

Utilities for layout

Content

Reboot

⁉️ [Non-essential] CSS variables title dupe (Bootstrap)
⁉️ [Non-essential] Lists > No explanation for orange squares (v4)
⁉️ [Non-essential] Forms > Too much examples ? (v4 vs v5)

Typography

⁉️ [Non-essential] Display headings > Display 5 and 6 not here in v4 (v4 vs v5)
Lists > Orange square list, can't find design specifications about it (v4)
Issue with underlined links, same state for default, hover and pressed in design guidelines

Code

Images

Tables

Hoverable rows > Dark variant > not the same hover background color (see PR 859)
Rich content tables > No .has-checkbox class for tables (v4 and in design specifications)
Sortable tables > No sortable tables but not using jQuery anymore so idk (v4 but no design specification about it atm)
⁉️ [Non-essential] Table's header line height is 20px instead of 18px in design guidelines
⁉️ [Non-essential] Table cells' padding-bottom is 15px instead of 10px, top is 14px instead of 5px, 7px or 10px (depending on the content) > table-sm seems way more brand friedly on this point, shall it become the orange base ?
⁉️ [Non-essential] Responsive tables need a sticky row ? (no guideline for this case)
Missing expanding row
Missing row selection
Missing column filter (is that an example rather than an implementation ?)
⁉️ [Non-essential] Caption > Maybe remove dark line that comes with ?

Figures

Forms (only in v5)

Overview

⁉️ [Non-essential] not the same spacing between check me out and submit button in v4 and in v5
⁉️ [Non-essential] Form text > Need .text-muted ? in v5.
Missing tooltips
⁉️ [Non-essential] Form label margin bottom 6px instead of 8px in design guidelines
⁉️ [Non-essential] padding inside input should be 9px 10px 13px instead of 7px 10px 9px
⁉️ [Non-essential] is-required should have margin-left of 3px instead of 6px
Missing Quantity selector : See PR 860
Missing datepicker
Missing timepicker
Missing Country code selector
Missing star rating : See PR 887

Form Controls

⁉️ [Non-essential] Sizing : large form control not same padding in v4 and in v5
⁉️ [Non-essential] Readonly plain text > No placeholder in bootstrap, need a fix ?
We don't have design for file input

Select

Select's menus aren't Orange Branded in v5
No multiple selection at the moment

Checks and radios

Switches need a .right class to have the label before ? as in v4 or maybe already exist with inline ? (missing example anyway)
⁉️ [Non-essential] "Selected" rather than "checked" on Bootstrap ?

Range

Missing value example
Missing units example
Missing range slider

Input group

⁉️ [Non-essential] Missing accessibility part ? Same in bootstrap v5

Layout

Validation

⁉️ [Non-essential] Error messages should have a bit more spacing in v5 should be 6px according to design guidelines instead of 4px atm
Supported Elements : Need to see if every element is presented here in v5

Components

Global search

Accordion (only in v5)

⁉️ [Non-essential] Medium sized one isn't branded, 45px instead of 50
⁉️ [Non-essential] Line-height for large one isn't good
Dark version ?

Alerts

Dark background > No handling of dark bg in v5 (need an update of migration guide ?) (v4 and in design specifications)
⁉️ [Non-essential] Additional content > No example with action in the alert (v4 vs v5)
⁉️️ [Non-essential] Dismissing > No example with dark version in v5 (v4)
⁉️ [Non-essential] JavaScript behavior > Initialize to add to migration guide (v5)
⁉️ [Non-essential] Small size : remove margin when stacked ?

Badge

Can't find the specs for badges. Shall the page be removed from Boosted ? or replace it with tags ?
⁉️️ [Non-essential] Positioned > Bad example to remove ? (v5)
⁉️️ [Non-essential] Background colors > Remove dark badge (v4 vs v5)
⁉️️ [Non-essential] Pill badges > Remove pill badges (v5)
Links > Missing link's badges (v4)
Accessibility in examples to do.

Breadcrumb

Backgrounds > Add examples with backgrounds (v4 and in design specifications) + Do we need to define background-color in it ?
⁉️ [Non-essential] Accessibility in examples to do.
Not responsive
⁉️ [Non-essential] Shouldn't be underlined links according to design specs

Buttons

Dark backgrounds > Missing dark versions of every buttons in v5, should we add component by component dark versions or overall detection of dark bg ? (v4 and in design specifications)
Active state > Missing active state for buttons as in v4 but think it was disabled by Bootstrap (v4)
Checkbox and radio buttons > Moved to forms/Checks and radios, need to update migration guide ? (v4 to v5) (edit : already in Bootstrap's migration guide)
⁉️ [Non-essential] Line-height in normal buttons : 20px instead of 18px
⁉️ [Non-essential] Letter spacing in large buttons is -0.1px instead of -0.2px

Button group

⁉️️ [Non-essential] Toggle radios and checkboxes here, but toggle buttons with icons in Forms > Checks & radios, Shall we add them here too ?

Card

⁉️️ [Non-essential] Padding top for Title should be 15px according to design guidelines, rather than 20px on v4 and v5
⁉️️ [Non-essential] Card footer looks weird (not enough padding or margin top/bottom) + difference between v4 and v5
⁉️️ [Non-essential] Examples to rebuild, doesn't looks like the design guidelines ones.
Card styles aren't the same in v4 and v5
⁉️️ [Non-essential] Borderless cards have no padding in design specs, however, in v5, they have some.

Carousel

⁉️️ [Non-essential] Missing pause button in v5

Close button (only in v5)

⁉️️ [Non-essential] Missing outlined version (not in v4 as well)

Custom carousel

Collapse

Could be replaced with details tag ? (https://developer.mozilla.org/fr/docs/Web/HTML/Element/details)
Missing specs ?

Dropdowns

⁉️️ [Non-essential] dropdowns menu spacing between button and dropdown menu isn't the same in v4 and in v5. Menu should stick on button as in v4 (should be below the border) maybe with dropdown options ?
dark dropdowns menu are weird in v4 + in v5 + they do not stick to design guidelines on background and hover ...
⁉️️ [Non-essential] Less padding for Large variant on v5 ? + border color
Dropright / dropend in v5 problem in bootstrap, need a fix ?
⁉️️ [Non-essential] dropdown splitted pressed > Click on right part doesn't change border color
⁉️️ [Non-essential] dropdown header's padding different between v4 and v5
Need to see with details tag ? (https://developer.mozilla.org/fr/docs/Web/HTML/Element/details)
⁉️️ [Non-essential] Dropdown item's height is 38px instead of 40px
In this [example(https://boosted.orange.com/docs/5.1/components/dropdowns/#dropdown-options), there are two buttons with different brand.
Not well documented in design specs ?

Forms (only in v4)

Input group (only in v4)

Jumbotron (only in v4) Should it be in v5 ? Out of Bootstrap v5 and no design

List group

⁉️️ [Non-essential] Links and buttons > v5 needs a hover state ? as in v4
⁉️️ [Non-essential] Contextual classes have different backgrounds in v5 compared to v4
⁉️️ [Non-essential] Muted text looks weird on click in v5
Missing specs ?

Media object (only in v4 goes in > Utilities > Flex)

Modal

⁉️️ [Non-essential] Need orange Popin example as in v4 ?
⁉️️ [Non-essential] Text link left-aligned ? in mobile modals.

Navs

First example doesn't work. Active links in nav don't work + Orange branded ?
Fill and justify > Should the text be centered ? (v5) + text centered when text overlap
Borders look weird on javascript behavior pills example in v5
⁉️️ [Non-essential] Pills not branded ?
Not responsive, need to transform in accordion at a medium breakpoint

Navbar

⁉️️ [Non-essential] v4 missing spacing around text + logo
⁉️️ [Non-essential] v5 dupe navbar
Missing spacing for example with forms ? v5
Light skin for navbar ? Branded ? v5
Need spacing around logo in v5
⁉️️ [Non-essential] Maybe hide scrolling part in v5
Missing space around logos

Navbar Orange (only in v4) Maybe related to Navbar ? See work on it

Orange megamenu (only in v4) Should maybe be related to Navbar ? Do we stick to it ? Global menu

Local navigation (only in v4) Local headers ? None in v5 yet Maybe move to navs & tabs ?

Priority Nav (only in v4) Move it in Navbar > responsive ?

Orange footer (only in v4) See work on it

Offcanvas (only in v5)

Missing design specs ? Or related to side nav ?
"Bootstrap" in example ?

Pagination

⁉️️ [Non-essential] Use of :before in next button, shouldn't it be a :after ?
⁉️️ [Non-essential] Click on selected value doesn't show pressed state
⁉️️ [Non-essential] Non intuitive navigation (tab rather than arrows)

Placeholders

Missing specs, see work on it
Accessibility ?
Colors on placeholders ?
Need an example with working js ? (to replace content once loaded)
Are the sizing enough ?
More animations ?

Popovers

Accessibility ?
Missing implementation, with different design specs
Modal implementation for the complex one ?

Progress

Size too big in v4 30px instead of 20px

Scrollspy (See ticket) not in design specs

Scroll up = Back to top (need to update migration guide ?)

Positionning ?
Placing in the button (back to top at the right)
Variants ?
Responsive by default ?

Spinners

⁉️️ [Non-essential] Spacing in the button in v5 ?
dark version ?

Stepbar (Stepped process)

⁉️️ [Non-essential] 40px height in v4, 30px in v5 and design guidelines
dark versions ?

Stickers (only in v5) See work on it

Toasts

Toasts are behind Back to top component, is that normal ?
Missing Live example in Boosted v4
Text not well centered in Custom content
Missing design specs

Tooltips

Branded ? (design specs)
What z-index ? Atm over headers, back to top button, ..
Dark version

Utilities

API

Background

Borders

⁉️️ [Non-essential] substractive borders on v4 seems thiner.
Missing border-colors in v5 compared to v4
Missing border-radius for v5 compared to v4
Missing sizes in v5 compared to v4

Clearfix

Close icon (Components > Close button in v5) Need migration guide change ?

Colors

Do colored links need to be like navigation links or like in design nav ?

Display

Embed (See ticket https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/906)

Flex

Float

Image replacement (visually hidden in v5)

Interactions

Opacity (only in v5)

Overflow

Position

Screen readers (visually hidden in v5)

Shadows

Sizing

Spacing

Some classes aren't documented (even on Bootstrap), for instance line 5 of this CodePen is that normal ?

Stretched link

Text

Do we need info in v4 for text-break rtl ? (v5)
Text decoration to remove from v5 compared to v4

Vertical align

Visibility

Extend

Approach

Icons

Shall we add this link to Solaris icons ? (https://system.design.orange.com/0c1af118d/p/88b17c-solaris-icons)

Migration (Goes with Boosted Migration)

Boosted migration (Need to be reviewed in order to don't miss anything)

About

Overview

Add all Boosted components [here(https://boosted.orange.com/docs/5.1/about/overview/#custom-components)

Team

Boosted history (only in v4)

Brand

⁉️️ [Non-essential] something's wrong with the squares around orange logo, it overlaps on text

License

Boosted license

Do we need to add a part in license for Boosted or not ?

Translations

Do we still need this part in Boosted ?

Cookies

Essentials

Removed from v5 ?

Examples

Orange brand (none in v5)

Snipets (only in v5) thumbnails

Custom Components (none thumbnails with the orange brand)

Framework + thumbnails

Jumbotron to reconduct ?

Navbars + thumbnails

Experiments + thumbnails

reconduct to v5 ?

Boostwatch

Don't know what to do about it, Kind of design guidelines part ? It links the design and dev parts on the site, can also be an element of progress. As an example, see buttons in design specs and buttons in design guidelines, they look very similar and give the access to find code of a button, seen in design specs, very quickly.

Miscellaneous and non-essentials ?

Footer > Pre-release link > Send to v4 version
How does the search docs work ?

Orange-OpenSource / Orange-Boosted-Bootstrap

Boosted v4 ⭢ v5 (remaining tasks) #901

Remaining tasks or bugs

Documentation

Getting started

Introduction

Download

Contents

Browsers & devices

JavaScript

Theming (only in v4)

Build tools (only in v4)

Webpack

Parcel (only in v5)

Accessibility

RFS (only in v5)

RTL

Contribute (only in v5)

Customize (only in v5)

Overview (only in v5)

Sass (only in v5)

Options (only in v5)

Color (only in v5)

Components (only in v5)

CSS Variables (only in v5)

Optimize (only in v5)

Layout

Overview

Grid

Utilities for layout

Content

Reboot

Typography

Code

Images

Tables

Figures

Forms (only in v5)

Overview

Form Controls

Select

Checks and radios

Range

Input group

Layout

Validation

Components

Accordion (only in v5)

Alerts

Badge

Breadcrumb

Buttons

Button group

Card

Carousel

Close button (only in v5)

Custom carousel

Collapse

Dropdowns

Forms (only in v4)

Input group (only in v4)

Jumbotron (only in v4) Should it be in v5 ? Out of Bootstrap v5 and no design

List group

Media object (only in v4 goes in > Utilities > Flex)

Modal

Navs

Navbar

Navbar Orange (only in v4) Maybe related to Navbar ? See work on it

Orange megamenu (only in v4) Should maybe be related to Navbar ? Do we stick to it ? Global menu

Local navigation (only in v4) Local headers ? None in v5 yet Maybe move to navs & tabs ?

Priority Nav (only in v4) Move it in Navbar > responsive ?

Orange footer (only in v4) See work on it

Offcanvas (only in v5)

Pagination

Placeholders

Popovers

Progress

Scrollspy (See ticket) not in design specs

Scroll up = Back to top (need to update migration guide ?)

Spinners