Add callouts in all the documentation when incompatibility with ODS

[julien-deramond]

Some components (or some variants of them) are inherited from Bootstrap and should not be used in Orange websites.
To avoid an extra maintenance or simply to let the developer understand how some attributes or variants are possible, we keep what's from Bootstrap documentation.
So we use callouts as an information for the users to know that. This is an example for the Navbar component:

ℹ️ All callouts must use this template which is in site/layouts/shortcodes/ods-incompatibility-alert.html file.
The description text of the callout needs to be written in the component .md file. It has to be adapted for each different case. Try as much as possible to use the same description texts for similar cases.

This epic story will contain the list of pages and components that should have those callouts.

List of pages or components

=> For the moment, there is a unique callout template with a "danger" alert icon. So do not take into account the fact that is it written below "Add warning" alert or "Add danger alert".

💡 To discuss with the design:
Instead of using the Alert/Warning icon, it might be more efficient and clear to have an icon representing ODS or at least letting know that this callout targets a design topic and not a technical one.
This idea was implemented in Boosted V4.3 with this message on the Introduction page introducing these Docs callouts:

and the use of the icon where needed in the Docs pages:

    => **Decided on this topic with the design** : 
            - Keep the Alert icon which is the most efficient
            - As it was done in v4.3, add an explanation text in the `Getting started / Introduction` page to introduce and explain thje why of our design callout messages.
            - 2 possible contents for these callout messages where tested: 
            a) detailed messages to explain why a component or the variant can not be used (`kept version`).
            b) a generic and simpler text proposed by Cyriaque:  "In its structure or in its visual, this component variant inherited from Bootstrap is incompatible with the Orange Design System." The callout title remains the same "Incompatibility with ODS" with a link on it to go to the introduction page.

=> In the ℹ️ description text proposals below, the ones in bold are the one put in the code at the moment.

• docs/5.2/getting-started/introduction/
  • Before #quick-start paragraph, add a #about-orange-brand as it was done in v4.3 explaining the why of the design callouts spread in the doc.
    ℹ️ Proposed description text:

    About Orange brand
    As Boosted is based on/inherited from Bootstrap, you'll find in Boosted all the Bootstrap's components and their variants, but with an Orange branded look.
    Among those inherited components and variants, some exist in the Orange Design System and fully respect its design specifications and some don't. Those later ones should not be used in your projects to ensure a consistent user experience throughout our Orange web services. As for technical reasons we have to keep them in/we can't remove them from this documentation, we tagged them with informational design callouts to inform you of what can be used or not from an Orange design point of view.
    These callouts look like that:
    -screenshot of a callout-
    Thanks for taking their information into account.

Note : The entire Boosted doc is preserved and enhanced when necessary with Orange brand specifics, i.e. navbar page contains unsupported features, check out navbar orange page to find out what to use.

• docs/5.1/customize/color/

  • #All colors: Add alert message saying that some colors can't be used in ODS because they are inherited from Booststrap
    ℹ️ Proposed description texts to choose from:

    1- Some of the colors below do not respect the Orange Design System specifications. For the correct colors to use, please refer to our [Orange colors]({{< docsref "/customize/color/#oranges-colors" >}}) paragraph and to Guidelines/Colour on the Orange Design System website.

• docs/5.1/content/reboot/ --> 🆕 in V5.2

  • #horizontal-rules: Add warning alert saying "Variants 3 and 4 can't be used."
    ℹ️ Proposed description texts to choose from:

    1- Below, <hr> variants 3 and 4 are not compatible with the Orange Design System, variant 3 because of its opacity, variant 4 because of its height and its opacity.

    2- These <hr> variants 3 and 4 can not be used because they do not respect the Orange Design System specifications, variant 3 because of its opacity, variant 4 because of its height and its opacity.

    3- These

    ---

    3rd and 4th variants can not be used because they do not respect the Orange Design System specifications. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity.

    Specifications done by the design:
    Those specifications are the ones of the "Lines" and "Outline" in ODS. There is no chapter for then because they are components variants. For example, the blue outline is the outline of the Alert component.
    

• docs/5.3/content/tables/ --> 🆕 2023-05-12 - Fix in PR Docs > Content > Tables: Add design callout messages #2032

  • #accented-tables: Add info alert saying that it's possible use striped rows OR striped columns, but not both in a same table.
    ℹ️ Proposed description texts to choose from:

    It is possible to use striped rows or striped columns in your tables, but you can't use both in a same table.

  • #nesting: Add danger alert saying that it's not possible to use this variant for usability reasons.
    ℹ️ Proposed description texts to choose from:

    This component variant should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons.

• docs/5.1/forms/overview

  • #form-text:

    • Add danger alert saying "In the Orange Design System, the input field label must be placed above the input field. Any other place is not correct + say to go to the Forms/Layout page/#horizontal-form where it will be explained that it is not possible to have horizontal labels in ODS)."
      ℹ️ Proposed description texts to choose from:

      1- This inline variant of the form text input component can not be used because it does not respect the Orange Design System specifications. The form text input label should always be placed above the input field.
      For the correct design, please refer to Forms and Pages on the Orange Design System website.

      2- The form text input label must always be placed above the input field.
      Refer to unitary form components and form examples page on the Orange Design System website.

    • Disabled field example: Add danger alert saying that in Orange Design System, we can't have a placeholder in an inactive input field. ⚠️ : Issue on hold. This issue needs to be discussed between Cyriaque and Julien (interesting to keep the placeholder from a technical point of view, but not from a usability one)

  • #required-field:

    • Add danger alert saying "The dropdown part of this component can not be used as it is. Instead use the component Dropdowns at docs/5.1/components/dropdowns/."
      ℹ️ Proposed description texts to choose from:

      1- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
      The correct appearance, that can't be applied here for technical and accessibility reasons, is the one of the [Dropdowns]({{< docsref "/components/dropdowns" >}})

      2- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
      The [Dropdowns]({{< docsref "/components/dropdowns" >}}) component has the correct appearance, but using an <ul> tag, it can not be used here for technical and accessibility reasons.

      3- The browser generated appearance of the <select> dropdown menu does not respect the Orange Design System and cannot be changed due to browser limitations.
      For the correct appearance, refer to the Boosted [Dropdowns]({{< docsref "/components/dropdowns" >}}) component. Be aware that this Dropdowns component, because using an <ul> tag, can not be a replacement here for technical and accessibility reasons.

• docs/5.1/forms/form-control

  • #readonly-plain-text: Add warning alert saying "The way this component works technically is OK, but this component can not be use as it is from a design point of view. It needs to be previously modified by a designer from Boosted team. If you If you really need it, ask us for that on Mattermost."
    ℹ️ Proposed description texts to choose from:

    1- This variant can be used from a technical point of view, but not from a design point of view. It needs to be previously modified by a designer from the Boosted team. If you really need it, ask us on Mattermost to have it redesigned.

    2- This input readonly plain text element can no be used with this design in your forms because it does no respect the Orange Design System specifications. To use it, it previously has to be modified by a designer from the Boosted team. So, if you really need it, ask the Boosted team on Mattermost to have it redesigned.

    3- This input readonly plain text element can not be used in your forms because it does no respect the Orange Design System specifications. If you really need it, before using ask the Boosted team on Mattermost to have it modified by one of its designers.

• docs/5.1/forms/select

  • #default: Add danger alert saying "The dropdown part of this component can not be used as it is. Instead use the component Dropdowns at docs/5.1/components/dropdowns/." + possibly add the existing sentence "Custom <select> menus need only a custom class..."
    ℹ️ Proposed description texts to choose from:

    1- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
    The [Dropdowns]({{< docsref "/components/dropdowns" >}}) component has the correct appearance, but using an <ul> tag, it can not be used here for technical and accessibility reasons.

    2- The browser generated appearance of the <select> dropdown menu does not respect the Orange Design System and cannot be changed due to browser limitations.
    For the correct appearance, refer to the Boosted [Dropdowns]({{< docsref "/components/dropdowns" >}}) component. Be aware that this Dropdowns component, because using an <ul> tag, can not be a replacement here for technical and accessibility reasons.

  • #sizing: Add danger alert saying "The dropdown part of this component can not be used because it does no respect the Orange Design System specifications. Instead, use the component Dropdowns at docs/5.1/components/dropdowns/."
    ℹ️ Proposed description texts to choose from:

    1- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
    The [Dropdowns]({{< docsref "/components/dropdowns" >}}) component has the correct appearance, but using an <ul> tag, it can not be used here for technical and accessibility reasons.

    2- The browser generated appearance of the <select> dropdown menu does not respect the Orange Design System and cannot be changed due to browser limitations.
    For the correct appearance, refer to the Boosted [Dropdowns]({{< docsref "/components/dropdowns" >}}) component. Be aware that this Dropdowns component, because using an <ul> tag, can not be a replacement here for technical and accessibility reasons.

  • #disabled: Add danger alert saying "In Orange Design System, these components can not be used. => ⚠️ Alert message to delete once the design will be corrected. See Issue Docs > Forms > Select > Disabled: Fix disabled select dropdown design #1362
    ℹ️ Proposed description texts to choose from:

    1- To use this component, change its appearance according to Orange Design System specifications.

    2- This component can not be used unless you fix its appearance according to the Orange Design System specifications.

    3- This disabled <select> element can not be used because it does no respect the Orange Design System specifications.
    For the correct design, please refer to Dropdowns states on the Orange Design System website.

• docs/5.1/forms/checks-radios (added during review done: 25th Nov 2022)

  • #checkbox-toggle-buttons: Add danger alert saying "This component can not be used alone."
    ℹ️ Proposed description text:

    1- These variants with only one checkbox toggle button should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a checkbox toggle button should not be used alone.
    Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.

• docs/5.1/forms/input-group

  • #basic-example: Add danger alert saying "This component can not be used as it is."
    ℹ️ Proposed description texts to choose from:

    1- This form example can not be used because it does not respect the Orange Design System specifications.
    Refer unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #multiple-input: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description texts to choose from:

    1- This form example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #multiple-addons: Add danger alert saying "This component can not be used. Here, it only shows how to do such a component from a technical point of view."
    ℹ️ Proposed description text to choose from:

    1- This form example can not be used as it is because it does not respect the Orange Design System specifications.
    It is presented here only to show how to make such a component from a technical point of view.

    2- This form example can not be used because it does not respect the Orange Design System specifications.
    It is presented here only to show how to make such a component from a technical point of view.

    3- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #button-addons: Add danger alert. 🆕 2022-12-13
    ℹ️ Proposed description text:
    These variants should not be used because they do not respect the Orange Design System specifications. They are not recommended for usability reasons.
    Please refer to the Forms guidelines and to the Pages form examples on the Orange Design System website.

  • #buttons-with-dropdowns: Add danger alert saying "This component can not be used (usability reasons)"
    ℹ️ Proposed description texts to choose from:

    1- This form example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #custom-select: Add danger alert saying "The 3 first examples of this component can not be used."
    ℹ️ Proposed description texts to choose from :

    1- The 3 first form examples can not be used as they are because they do not respect the Orange Design System specifications.
    Refer unitary form components and form examples page on ODS website.

    2- ** These 3 first form variants can not be used because they do not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.**

    3- These 3 first form examples can not be used because they does not respect the Orange Design System specifications.

  • #custom-file-input: Add warning alert saying it is ok to use these components but only it they are created using unitary ODS components such as standard buttons, input fields + having a minimum margin of 10px between input fields and buttons."
    ℹ️ Proposed description texts to choose from:

    1- These examples can not be used as they are because they do not respect the Orange Design System specifications.
    Refer unitary form components and form examples page on ODS website.
    2- ** These form variants can not be used with this design because they do not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.**

• docs/5.1/forms/layout

  • #gutters: Add warning alert saying that the dropdown list of this example (<select> <option>) is the one generated by the browser and that for the moment, it cannot be replaced by the Dropdowns component (<ul><li>), for both are technically different, with an impact on behavior and accessibility.
    ℹ️ Proposed description texts to choose from:

    1- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
    The correct appearance, that can't be applied here for technical and accessibility reasons, is the one of the [Dropdowns]({{< docsref "/components/dropdowns" >}})

    2- The browser generated appearance of the <select> dropdown menu is not compatible with the Orange Design System and cannot be changed due to browser limitations.
    The [Dropdowns]({{< docsref "/components/dropdowns" >}}) component has the correct appearance, but using an <ul> tag, it can not be used here for technical and accessibility reasons.

    3- The browser generated appearance of the <select> dropdown menu does not respect the Orange Design System and cannot be changed due to browser limitations.
    For the correct appearance, refer to the Boosted [Dropdowns]({{< docsref "/components/dropdowns" >}}) component. Be aware that this Dropdowns component, because using an <ul> tag, can not be a replacement here for technical and accessibility reasons.

  • #horizontal-form: Add warning alert saying "This example is a module, not a single component and it must be build using unitary Orange Design System components. Check correct ODS examples on ODS/Pages/Forms at https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53 + in ODS, it's not possible to have labels on the side of the input field "
    ℹ️ Proposed description texts to choose from:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • **#horizontal-form-label-sizing: Add a warning alert saying that the labels must be placed above the fields, and not on the same line.
    ℹ️ Proposed description texts to choose from:

    1- This inline version of the form text input component is not compatible with the Orange Design System. The form text input label must always be placed above the input field.

    2- The form text input label must always be placed above the input field.
    Refer to unitary form components and form examples page on ODS website.

    3- This form variant can not be used because it does not respect the Orange Design System specifications. The form text input label should always be placed above the input field.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #auto-sizing: Add warning alert saying "This example is a module, not a single component and it must be build using unitary Orange Design System components. Check correct ODS examples on ODS/Pages/Forms at https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53 "
    ℹ️ Proposed description texts to choose from:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications. The form text input label should always be placed above the input field.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #inline-forms: Add warning alert saying "This example is a module, not a single component and it must be build using unitary Orange Design System components. Check correct ODS examples on ODS/Pages/Forms at https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53 "
    ℹ️ Proposed description texts to choose from:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications. The form text input label should always be placed above the input field.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

• docs/5.1/forms/validation. 🆕 2022-12-14 we decided to delete this callout because except the checkbox "Agree terms and conditions" in which the label should be a link (and therefore appear underlined), the form is OK.

  • #custom-styles: Add warning alert saying "This example is a module, not a single component and it must be build using unitary Orange Design System components. Check correct ODS examples on ODS/Pages/Forms at https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53 "
    ℹ️ Proposed description texts:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications. The form text input label should always be placed above the input field.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #server-side: Add warning alert saying "This example is a module, not a single component and it must be build using unitary Orange Design System components. Check correct ODS examples on ODS/Pages/Forms at https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53"
    ℹ️ Proposed description texts to choose from:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

  • #browser-defaults: Add danger alert saying "In Orange Design System, this component can't be used. To add an alert message to an input field, use the Orange Design Alerts component"
    ℹ️ Proposed description texts to choose from:

    1- This example can not be used as it is because it does not respect the Orange Design System specifications.
    To add an alert message to an input field, use the the [Alert]({{< docsref "/components/alerts" >}}).
    Refer to unitary form components and form examples page on ODS website.

    2- This form variant can not be used because it does not respect the Orange Design System specifications.
    To add an alert message to an input field, use the the [Alert]({{< docsref "/components/alerts" >}}).
    For the correct design, please refer to unitary Forms components and Pages form examples on the Orange Design System website.

• docs/5.1/components/back-to-top
  ⚠️ This variant was removed from the documentation following designers request. ⚠️
  _- [ ] #label-inside: Add danger alert saying "This component can not be used."
  ℹ️ Proposed description texts to choose from:
  > 1- This example can not be used as it is because it does not respect the Orange Design System specifications.
  Refer to the back to top component on ODS website.

   > 2- **This variant can not be used because it does not respect the Orange Design System specifications. 
       For the correct design, please refer to the [back to top](https://system.design.orange.com/0c1af118d/p/03eff8-back-to-top/b/978f59) component on the Orange Design System website.**_
  

• docs/5.1/components/badge

  • example:

    • #headings: Add danger alert saying "This component can not be used."
      ℹ️ Proposed description text:

      This component can not be used because it does not exist in the Orange Design System specifications.

    • #buttons: Add danger alert saying "This component can not be used."
      ℹ️ Proposed description text:

      This component can not be used because it does not exist in the Orange Design System specifications.

    • #positioned: Add warning alert saying "This component can be used but only inside a header component" + put a link towards the corresponding header variant + say to use the Tags component that will be added later in Boosted.
      ℹ️ Proposed description text:

      This component can be used only inside a header component.
      For the correct design, please refer to our Boosted navbars examples.
      For other usages, you will have to use the Tags component as described on the Orange Design System website. This component will be added later in Boosted.

    • #background-colors: Add danger alert saying "This component can not be used."
      ℹ️ Proposed description text:

      These component variants can not be used because they do not exist in the Orange Design System specifications.

    • #pill-badges: Add danger alert saying "This component can not be used."
      ℹ️ Proposed description text:

      **This component can not be used because it doesn't exist in the Orange Design System specifications.
      Instead, you will have to use the Tags component as described on the Orange Design System website. This component will be added later in Boosted. **

• docs/5.1/components/breadcrumb

  • #dividers: For the example without the divider, add danger alert saying "This component can not be used. In ODS, there must be a divider between the breadcrumb items".
    ℹ️ Proposed description texts:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to the breadcrumb component on the Orange Design System website.

• docs/5.1/components/buttons

  • #sizes: The custom size is not allowed in ODS => The sentence "It is not recommended by Orange Design System..." needs to be replaced by the dedicated Alert/Warning message.
    
    ℹ️ Proposed description texts to choose from:

    1- This variant should not be used because it does not respect the Orange Design System specifications.
    Nevertheless, in some cases where it would be really needed, you could roll your own custom sizing with CSS variables.
    For the allowed variants, please refer to Buttons components on the Orange Design System website.

  • #block-buttons: For the 1st example (buttons that are of the length of the screen), add warning alert saying "In ODS, it is not allowed to have buttons of the length of the screen in desktop screens."
    ℹ️ Proposed description texts to choose from:

    1- In the Orange Design System, it is not allowed to have buttons of the length of the screen in desktop screens.
    Refer to Buttons components on the Orange Design System website.

    2- These screen width buttons can not be used on desktop screens because they do not respect the Orange Design System specifications.
    For the correct design, please refer to Buttons components on the Orange Design System website.

  • #button-plugin: Add danger alert saying "In ODS, it is not allowed to use only one toggle button. Watch out: The component named "toggle buttons" in Boosted is not the same component as the one in ODS which behaves like a radio button". NOTE: Cyriaque will be asked for renaming this component in ODS. Not done yet.
    ℹ️ Proposed description texts to choose from:

    1- In the Orange Design System, it is not allowed to use only one toggle button.
    Watch out: The component named "toggle buttons" in Boosted is not the same component as the one in ODS which behaves like a radio button.

    2- This variant with only one toggle button can not be used because it does not respect the Orange Design System specifications.
    Watch out: The component named "toggle buttons" in Boosted is not the same component as the one in ODS which behaves like a radio button.

• docs/5.1/components/button-group

  • #mix-styles: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to the buttons standard component on the Orange Design System website.

  • #checkbox-and-radio-button-groups: Add danger alert saying "This component can not be used. Use ODS checkboxes instead."
    ℹ️ Proposed description text:

    This checkbox variant can not be used because it does not respect the Orange Design System specifications.
    Instead use Boosted [Checks]({{< docsref "/forms/checks-radios" >}}) components.
    For the correct design, you can also refer to the Checkbox component on the Orange Design System website.

  • #button-toolbar: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • #nesting: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • #vertical-variation: For all examples, add danger alert saying "These components can not be used, included split buttons"
    ℹ️ Proposed description text:

    These variants, split buttons included, can not be used because they do not respect the Orange Design System specifications.

• docs/5.1/components/card - ⚠️ ON HOLD
  Do not address the issues below because:
  - Maybe, we'll replace some or all the points below by a single alert message indicating that to build ODS cards, one should visit the Boosted Examples page.
  - Some points need to be seen with Cyriaque

  • #body: Add danger alert saying "This component can not be used."
  • #titles-text-and-links: Add danger alert saying "This component can not be used." Reasons: in ODS, no card subtitle, no card links, image mandatory. Alert to delete if the example can be changed so that is respects ODS (to be decided with Julien)
  • #images: Add danger alert saying "This component can not be used." Reason: In ODS, there can't be only a plain text in the card body, the requirement is to have at least a title.
  • #list-groups: Add danger alert saying "This component can not be used."
  • #kitchen-sink: Add danger alert saying "This component can not be used."
  • #header-and-footer: For all these examples, add danger alert saying "This component can not be used."
  • #text-alignment: For examples with text centered and text align to the right, add danger alert saying "This component can not be used." Reason: In ODS, the text shall always be aligned to the left + there should always be an image above the card body.
  • #navigation: For all these examples, add danger alert saying "This component can not be used." Reason: wrong design
  • #image-caps: Add danger alert saying "This component can not be used." Reason: In ODS, not possible to have the card image below the card body.
  • #image-overlays: Add danger alert saying "This component can not be used."
  • #card-styles: Add danger alert saying "This component can not be used."
  • #border: Add danger alert saying "This component can not be used."
  • #mixins-utilities: Add danger alert saying "This component can not be used."
  • #card-groups: Add danger alert saying "This component can not be used." Reason: In ODS, there are always gutters between cards.

• docs/5.1/components/carousel

  • #with-captions: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Carousel Navigation on the Orange Design System website.

• docs/5.1/components/collapse

  • Before #example: Add danger alert saying "Any following variant of this component can not be used." Reason: in ODS, no collapse behavior allowed to be triggered from a button component
    ℹ️ Proposed description texts to choose from:

    1- None of the following examples can be used because they do not respect the Orange Design System specifications.

    2- None of the following variants of this component can be used because they do not respect the Orange Design System in which no collapse behavior is allowed to be triggered from a button component.

    3- ** These variants can not be used because they do not respect the Orange Design System specifications in which no collapse behavior is allowed to be triggered from a button component.**

• docs/5.1/components/dropdowns

  • #single-button: Add danger alert saying that it is strongly recommended to use a <button> html tag for the dropdown field and that if one wants to use an <a> tag instead, it is then necessary to add some code to make it ok for accessibility. See PR HTML semantic of dropdown menu #1412. => ⚠️ Maybe to modify or delete because it's more a technical information that a design one.
    ℹ️ Proposed description text:

    Please note that using a element as a dropdown toggle should be your go to option.
    If you have to use a to do that you will have to change his semantic by adding a role="button" first. Then you will need to implement an event listener via JavaScript to be able to use it by using the space bar on focus.

  • Before #sizing: Before the small buttons examples, add danger alert saying "This component can not be used." Reason: in ODS, no such size available for this component.
    ℹ️ Proposed description texts to choose from:

    1- This variant can not be used because it does not belong to the Orange Design System specifications.
    Refer to Dropdown on the Orange Design System website.

    2- This small variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #centered: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #dropup-centered: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #text: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #forms: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #dropdown-options: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Dropdown on the Orange Design System website.

  • #auto-close-behavior: Add danger alert saying "The variants Clickable outside, Clickable inside and Manual close can be used ONLY with multiple selections and not single selection as illustrated here."
    ℹ️ Proposed description text:

    The variants Clickable outside, Clickable inside and Manual close can not be used because featuring a single selection, they do no respect the Orange Design System specifications. They can be used only if featuring multiple selections.

• docs/v5.1/components/list-group

  • numbered: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • horizontal: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • flush: It might be useful to add a design callout saying that this flush variant shall be used inside a container with a top and a bottom border, to have at the end the same design as illustrated on the design specifications. See PR List-group: Branded #1466

  • contextual-classes: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • with-badges: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • custom-content: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

  • #checkboxes-and-radios: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.

• docs/5.1/components/modal

  • #scrolling-long-content: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    These variants can not be used because they do not respect the Orange Design System specifications.
    For the correct design, please refer to Modals on the Orange Design System website.

  • #using-the-grid: Add danger alert saying "This component can not be used."
    ⚠️ CALLOUT MESSAGE DELETED IN FINE (decided when reviewing the PR)
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Modals on the Orange Design System website.

  • #varying-modal-content: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    These variants can not be used because they do not respect the Orange Design System specifications.
    For the correct design, please refer to Modals on the Orange Design System website.
    ℹ️ UPDATE 2022-12-06: As forms in a modal are finally accepted by the design because of the need in projects and that the actual variants of this section look ok, we decided to delete this callout message.

  • #toggle-between-modals: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Modals on the Orange Design System website.

  • #fullscreen-modal: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    These variants can not be used because they do not respect the Orange Design System specifications.
    For the correct design, please refer to Modals on the Orange Design System website.

• docs/5.1/components/navs-tabs

  • #pills: Add danger alert saying "This component can not be used." Reason: its a button component in ODS
    ℹ️ Proposed description text:

    This variant can not be used because it is a button component in the Orange Design System specifications.

  • #fill-and-justify: Add danger alert saying "This component can not be used." Reason: its a button component in ODS
    ℹ️ Proposed description text:

    These variants can not be used because they are button components in the Orange Design System specifications.

  • #working-with-flex-utilities: Add danger alert saying "This component can not be used." Reason: its a button component in ODS
    ℹ️ Proposed description text:

    This variant can not be used because it is a button component in the Orange Design System specifications.

  • #pills-with-dropdowns: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it is a button component in the Orange Design System specifications.

• docs/5.1/components/progress

  • #labels: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

  • #height: For the narrowest progress bar, add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    The 1px height variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

  • #backgrounds: Add danger alert saying "This component can be used only with the background color #ff7900. All other colors are not allowed in ODS".
    ℹ️ Proposed description text:

    These backgrounds color variants can not be used because they do not respect the Orange Design System specifications. The only background color to use is #ff7900.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

  • #multiple-bars: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

  • #striped: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    These variants can not be used because they do not respect the Orange Design System specifications.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

  • #animated-stripes: Add danger alert saying "This component can not be used."
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Progress indicators on the Orange Design System website.

• docs/5.1/components/tooltips

  • #custom-tooltips: Add danger alert saying "This component can not be used. It illustrates the available technical possibilities"
    ℹ️ Proposed description text:

    This variant can not be used because it does not respect the Orange Design System specifications.
    For the correct design, please refer to Tooltip on the Orange Design System website.

🚨 Comments from Boosted users

• It is confusing to have those callouts in the Docs pages because Boosted is supposed to offer developers ready to use Orange charted components code, so it's non sense to say that some can't be used because not compatible.
• Same thing, the fact to sent to Orange Design System website is not helpful: developers don't know about this website and its content. Moreover, it doesn't provide the code they need and in the "Develop" tab, they come back to Boosted, where they come from.

=> Different possibilities to counter that:
1- Rewording the content of the callouts.
Example of new callouts content: just say "Incompatibility with the Orange Design System" + link "More info", this link going to a page (intro?) in which it would be explained that being based on Bootstrap, Boosted docs offers components or components variants that are not recommended in ODS

2- Adding a tag in front of each unitary example meaning "OK to use", "Use but with some changes needed, "Don't use"

3- Removing all doc part that is not correct from ODS point of view (pb: hide technical possibilities that could be useful even though the design shall be adapted to match ODS spec + make the document lose part of its reading logic).

4- Adding directly usable code in ODS components

5- Having for each component a dedicated Orange page - as for Navbar and Orange Navbar - with only the content that is possible to use respecting ODS specs.

References in other issues

• Docs > Components > Buttons : Add "not in ODS" alert message for Toggle states #1118
• Docs > Components > Button-group > Split button : Add "not in ODS" alert message + explanation #1117

Sub-task

• List in all the doc the incompatibility with ODS #1201
• Add a callout for each part of the documentation incompatible with ODS #1235