Boosted v4 ⭢ v5 (remaining tasks)

[julien-deramond]

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).

• Gather and sort items from v5 — migration guide #383 then delete it as duplicate
• Check the content of New examples: Standard VS Variable font // Leaflet #640 and define an action_
• Compare our v5 components with the design specifications and note the differences
• Merge this list with the ones in comments
• Study each item and create an issue for each one or delete it
• 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 fix(doc): add small size input example #1230
  • no forms' .#{$state}-tooltip
  • no table-row-variants(), .table-bordered, .table-borderless, .table-striped -> Should change with Adding features to tables #859
  • no .btn-outline
  • no .pagination-sm nor .pagination-lg
  • no active state for .list-group-item-action -> Should change with List group: Branded #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 Rollback the grow spinners #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

• Homepage In v4 there were interesting sections. We need to evaluate if we use as well in v5. See Backport some interesting sections from v4 #1160.
  • "Only in Boosted!" section that redirects to /docs/4.6/about/boosted-history/
  • "Orange Templates"
  • "Using Angular?"
  • "Migrating from Boosted 3?"
• 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
• Reintroduce Bootstrap Community section in introduction #984
• docs: Use param to set Bootstrap version in Contents page twbs/bootstrap#35556
• 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 .a11y-swatch-* classes #1297
• Docs > Customize > Overview Add in the DoD for Feature that we must not forget to update CSPs and embedded SVGs section
• Docs > Customize > Color: $indigo is missing in All colors.  #1225
• 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 Docs: Minor fixes for some misprint in Boosted #1439
• Fix broken links in 'Unused CSS' section #985
• 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 Handle .container-fluid to follow brand #987.
• 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 Docs: Make the grid values back from v4 #1440.
• 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 Handle .container-fluid to follow brand #987.
• docs: A fix for CSS Variables and some proposal twbs/bootstrap#35563
• 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
• 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.
• 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 Docs: third level Reboot list  #1497.
• 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 Docs: Typography hide display-5 and display-6 #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.
• 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.
• 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 ol tag numbers color contrast #1156. Seen : Feels right at the moment. We maybe need to update the migration guide.
• Docs > Content > Typography Missing Links from v4? -> Keep it as-is since we already redirect to other components.
• Docs > Content > Typography Missing With arrow from v4? -> It is with Chevron. We maybe need to update migration guide. See Migration guide: update for 5.0 and 5.1 #1633.
• Docs > Content > Typography Missing With back arrow from v4? Needed. We maybe need to update migration guide. See Migration guide: update for 5.0 and 5.1 #1633.
• Docs > Content > Typography Check if we need to reintroduce the difference between Responsive typography and Responsive font sizes. Seems to be ok for me
• 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 Re-introduce thumbnail images #1441.
• Docs > Content > Tables Dark variant table rows hover color is different in v5 and v4 → see Adding features to tables #859
• Docs > Content > Tables Rich content tables is missing in version 5.
• 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 Add sortable tables to .table #1163.
• 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
• 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.
• Docs > Content > Tables Do responsive tables need a sticky row? (no design guideline at the moment). See Sticky table column twbs/bootstrap#31458. See Adding features to tables #859.
• Docs > Content > Tables Missing expanding row in version 5. See Add expanding row to .table #1162.
• Docs > Content > Tables Missing row selection in version 5
• Docs > Content > Tables Missing column filter in version 5. An example rather that an implementation? See Add column filter to .table #1161.
• 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 9ec9150
• 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.
• .rounded class does nothing while it worked in Bootstrap v4. -> Removed from Boosted since a94291b. Do we re-introduce it ? -> See Docs: Should re-introduce border-radius and box-shadow #1551.
• 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 Docs: Submit buttons spacing #1495.
• 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 .form-text: fix margin-top, font-size and color #1442.
• Docs > Forms Missing tooltip example -> Will come with Pages from design. -> See Tooltip for forms #1444.
• Docs > Forms > Overview Form label margin bottom should be 6px instead of 8px (see design guidelines) -> See .form-label: fix to be more consistent with the design #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 ?
• Docs > Forms > Overview is-requiredshould have a margin-leftof 3px instead of 6px (in version 5). See fix(forms): change the margin left value between the required symbol and the label #1144 and fix(forms): change the margin left value between the required symbol and the label #1177.
• Docs > Forms > Form control Sizing: large form control hasn't the same padding than in v4. Specifications are coming
• 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
• Docs > Forms > Select Sizing: inform designers that there is no corresponding specs for multiple select. -> Let's wait for specs from design
• Docs > Forms > Checks & radios Switches need a .right class as in v4? Or maybe it already exists with inline? (Missing example anyway) #1073
• Docs > Forms > Checks & radios Missing Without labels from Bootstrap #1227
• Docs > Forms > Input group: add Small Sizing example  #1229
• [Bootstrap] Docs > Forms > Checks & radios Radios. Probably "selected" rather than "checked" (source? https://www.w3schools.com/tags/att_input_type_radio.asp) Asked in docs: A fix for CSS Variables and some proposal twbs/bootstrap#35563 Checked.
• 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 Prepare v4.4.1 #285. Should be asked to design IMO.
• 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 Error messages: Fix margin-top #1445.
• 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
• Docs > Components > Accordion Example Medium sized one isn't branded, 45px instead of 50. See Complete verification of accordions states in v4 and v5 #1091.
• Docs > Components > Accordion Sizes Line height for large one isn't good. See Complete verification of accordions states in v4 and v5 #1091.
• Docs > Components > Accordion Missing dark variant. See Dark accordions #1025.
• Docs > Components > Alerts Missing dark variant as in v4. See Alerts with dark background #1012.
• Docs > Components > Alerts Missing "Action" link in example as in v4
• [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.
• Docs > Components > Alerts Sizes: remove margin when stacked? (no design specs). The alerts are well displayed and have 15px between in small version. See Fixes for alerts #1165.
• Docs > Components > Alerts Missing specific Boosted message about the icons from v4. See Fixes for alerts #1165.
• 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.
• Docs > Components > Alerts Missing specific Boosted message about the div in "Additional content". See Fixes for alerts #1165.
• 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 859cc5e in v4 and from 5126312 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 Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Breadcrumb Missing Backgrounds (in v4). -> See Breadcrumb: Add dark variant #1430.
• Docs > Components > Breadcrumb Backgrounds Missing hover for the breadcrumb bg-dark in the v4.-> See Links: fix hover state on dark background #1446.
• 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
• Docs > Components > Buttons Missing dark variant
• 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
• Docs > Components > Buttons Sizes Letter spacing of large buttons is -0.1px instead of -0.2px -> See Buttons: fix letter-spacing #1447.
• Docs > Components > Buttons With icon Why the buttons are called "Secondary" and are displayed as primary buttons. -> See Docs: make buttons text descriptive of the used class #1494.
• 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 Buttons: large icons in large buttons #1448 Small and large buttons with icons - adjustments  #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 Various docs improvements around buttons / buttons grou #645. Do we need to reintroduce them ? -> No
• Docs > Components > Card Padding top for titles should be 15px according to design specs rather than 20px on v4 and v5. -> See Cards: Header padding-top fix #1449.
• 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 Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Card Missing space in Header and footer - Quote. -> See Cards: quote fix #1450.
• Docs > Components > Card Background and color should use supporting colors. -> See Add callouts in all the documentation when incompatibility with ODS #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 chore(merge v4-dev): latest patched commit → 8e59752ee #575. Do we backport it on v5 ? -> No
• 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 Docs: image overlays as in v4 #1493.
• Docs > Components > Carousel Missing Slides only that was only in Boosted v4? -> Comes from Feature/branded components #362 (and more exactly 7f320f6). It was done on purpose, do we reintroduce it ? -> Wait for Add callouts in all the documentation when incompatibility with ODS #1199
• Docs > Components > Carousel Missing Add a link to a slider by using a html tag. in Boosted v4. -> See Docs: reorder Carousel doc parts #1491.
• 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 Docs: reorder Carousel doc parts #1491.
• Docs > Components > Carousel A Dark variant exists in Bootstrap v5 and not in Boosted v5. Normal? -> Dropped in (7f320f6 on Carousels #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
• Provide a pause button for Carousels #1112
• [Bootstrap] Docs > Components > Collapse Could be replaced by <details>? (see https://developer.mozilla.org/fr/docs/Web/HTML/Element/details). See Use details / summary for accordions #1097.
• Docs > Components > Collapse Not in design specs. Should be added? -> No IMO, this is "just" an animation.
• 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 Fixes for dropdown #1164.
• Docs > Components > Dropdown Dark dropdowns is broken in v4 and v5. See Adjusting dark dropdowns #1021 and fix dropdowns on .bg-dark #658.
• Docs > Components > Dropdown Sizing: Less padding for large variant? Border color? See Fixes for dropdown #1164.
• [Bootstrap] Docs > Components > Dropdown Dropright shouldn't be "Dropend" and Dropleft "Dropstart"? See docs: A fix for CSS Variables and some proposal twbs/bootstrap#35563
• Docs > Components > Dropdown Headers: dropdown header's padding different from v4 See Fixes for dropdown #1164. There will be a meeting for this specific point
• Docs > Components > Dropdown Dropdown item's height is 38px instead of 40px See Fixes for dropdown #1164.
• 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 Dropdown: min-width on toggle-split dropdown #1451.
• Docs > Components > Dropdown In both versions of Boosted, the vertical separation of the Split dropstart is not the same than for the right. See Fixes for dropdown #1164.
• Docs > Components > Dropdown Dropdown divider has not the same color than in Boosted v4. See Fixes for dropdown #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
• Docs > Components > List group Links and buttons needs a hover state as in v4? -> See List group: make the component branded with the specs. #1452.
• Docs > Components > List group Contextual classes have different background colors compared as in v4. -> See List group: make the component branded with the specs. #1452.
• Docs > Components > List group Custom content: muted content looks weird on click. Probably linked to a11y. -> See List group: make the component branded with the specs. #1452.
• Docs > Components > List group Identify that it doesn't exist in design specs. -> See List group: make the component branded with the specs. #1452.
• Docs > Components > List group Is it OK to have orange color for numbers in Numbered? See ol tag numbers color contrast #1156.
• Docs > Components > List group The badges weren't rounded in Boosted v4 -> Keep it as is and alert about it -> See Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > List group Missing top border in JavaScript behavior (as well in Boosted v4) -> Nope, fine as is
• 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.
• Docs > Components > Modal Text link left-aligned in mobile modals? -> See Fixing modals titles and offcanvas titles #857.
• Docs > Components > Navs & tabs First example of Base nav doesn't work? Orange branded? -> See Add callouts in all the documentation when incompatibility with ODS #1199.
• 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 Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Navs & tabs Fill and justify and Working with flex utilities have a weird behavior in Boosted v4/v5. -> Warn about it. See Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Navs & tabs JavaScript behavior Borders looks weird in the Pills example. -> See Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Navs & tabs Pills not branded? -> See Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Components > Navs & tabs Not responsive. Need to transform in accordion at a medium breakpoint. Missing Responsive Tabs from Boosted v4. -> See Responsive tabs #1455.
• 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.
• Docs: Replace Bootstrap reference with Boosted in Offcanvas example #986
• 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
• Docs > Components > Pagination No more .has-label class in Boosted v5. Is it in the migration guide? -> Needs to be in migration guide. See Migration guide: update for 5.0 and 5.1 #1633.
• Docs > Components > Placeholders Missing design specifications. Hard to evaluate this ? -> lottie is under study so specs will be coming
• Docs > Components > Placeholders Accessibility check? Asked to accessibility expert.
• Docs > Components > Placeholders Need an example with working JS to replace content once loaded? -> Not needed and should be on Bootstrap side first anyway.
• Docs > Components > Placeholders More animations? Waiting for designers -> Will come with the study
• 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 Progress bar: Reduce size to be branded #1456.
• Docs > Components > Back to top Scroll up in v4 needs to be in migration guide? Needs to be in migration guide. -> See Migration guide: update for 5.0 and 5.1 #1633.
• Docs > Components > Spinners Buttons: spacing to fix. See Rollback the grow spinners #1041.
• Docs > Components > Spinners Reintroduce Grow spinners and mark them as "not Orange Design approved". See Rollback the grow spinners #1041.
• Docs > Components > Spinners There are normally 3 sizes for the spinners. Isn't that already the case (preview) ?
• Docs > Components > Stepped process 40px height in v4 and 30px in v5 and design guidelines. See Orange stepbar #1039.
• 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.
• Docs > Components > Toasts Missing Live example in v4 (chore(merge-v4-dev): patched commit → a3d14bb #1013)
• Docs > Components > Toasts Missing design specs or forbidden by the Brand? -> Ongoing
• Docs > Components > Toasts Remaining "blue" toast in Boosted v4 (chore(merge-v4-dev): patched commit → a3d14bb #1013)
• Docs > Components > Toasts Isn't the right margin too big? (right of the close button) -> See Docs: Toasts alignment fix #1490.
• Docs > Components > Toasts Text not well centered in Custom content -> See Docs: Toasts alignment fix #1490.
• Docs > Utilities > API Check if the values are correct in Enable responsive -> See Docs: Change api responsive values #1488.
• Docs > Utilities > Borders Substractive are too thin in v4. -> See Border utility: make subtractive borders 2px #1458.
• Docs > Utilities > Borders Missing colors in Border color compared to the one in v4. See bcd4b62 and 5639866 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.
• 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 Migration guide: update for 5.0 and 5.1 #1633.
• 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 Migration guide: update for 5.0 and 5.1 #1633.
• 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
• Docs > Utilities > Position Examples should respect the Orange Design for the badges -> See Add callouts in all the documentation when incompatibility with ODS #1199.
• Docs > Utilities > Shadows Re-introduce them with an alert to ODS not compliant -> Wait an answer in Docs: Should re-introduce border-radius and box-shadow #1551.
• Docs > Utilities > Text Do we need info in v4 for text-break rtl ? (v5) -> See Text break: remove for RTL and add a callout #1459.
• 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.
• Docs > Boosted migration Check if elements from v5 — migration guide #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 Migration guide: update for 5.0 and 5.1 #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 Migration guide: update for 5.0 and 5.1 #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 Migration guide: update for 5.0 and 5.1 #1633.
  • Link with arrow (.o-link-arrow) is now link with chevron (.link-chevron) -> See Migration guide: update for 5.0 and 5.1 #1633.
    • .back has not been implemented since it's not part of the Web UI Kit. -> See Migration guide: update for 5.0 and 5.1 #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 Migration guide: update for 5.0 and 5.1 #1633.
  • Social buttons now require .btn-icon modifier, -> See Migration guide: update for 5.0 and 5.1 #1633.
  • Toggle buttons with icon: the pattern changed Bootstrap-side but we still require .btn-icon modifier too. -> See Migration guide: update for 5.0 and 5.1 #1633.
  • Stepbar (.o-stepbar) is now Stepped process (.stepped-process) and all .stepbar-... classes are now .stepped-process-... -> See Migration guide: update for 5.0 and 5.1 #1633.
  • For Stepped process variables:
    • $o-stepbar-margin-r is renamed $step-item-margin-end -> See Migration guide: update for 5.0 and 5.1 #1633.
    • $o-stepbar-arrow-width is renamed $step-item-arrow-width -> See Migration guide: update for 5.0 and 5.1 #1633.
    • $o-stepbar-height is not used anymore -> See Migration guide: update for 5.0 and 5.1 #1633.
    • Lots of new variables have been added aswell -> See Migration guide: update for 5.0 and 5.1 #1633.
  • Change .o-footer-* to some new .footer-* classes -> See Migration guide: update for 5.0 and 5.1 #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

• Docs > About > Brand Something's wrong in Clear space with the squares around orange logo, it overlaps on text. -> See Brand doc: Fix clear space that overlap on certain breakpoints #1460.
• Docs > About > Brand Move the content of "Design guidelines" here
• Documentation Footer "Pre-release on Netlify" link displays the v4 version
• 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

[louismaximepiton]

Documentation

Getting started

Introduction

Download

Contents

• ⁉️ [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 #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 ?

[julien-deramond]

All tasks have a dedicated issue or PR. We can finally close this one.