Docs > Component > Nav-tabs: change place of dropdown menu

[isabellechanclou]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

#1811

Description

In #using-dropdowns dans #pills-with-dropdowns sections, the dropdown menu shall be the last item in the list and therefore placed at the end of the list.

Motivation & Context

Modification asked by design when working on the design callout messages to make this variant compliant with the Orange design system.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2007--boosted.netlify.app/docs/5.3/components/navs-tabs/#using-dropdowns

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes
• I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is added in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	f833cbf
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64c36d99d6a20a0008812ffd
😎 Deploy Preview	https://deploy-preview-2007--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MewenLeHo]

Ok for the code.

But I am not sure if the design can really prevail over the functionnality in this particular case. Any application may need to have a dropdown elsewhere than in the last position.

And if this is truly the rule then the rule must be clearly written somewhere.

[isabellechanclou]

Decided in daily meeting (on April 24th 2023): ask the design for a sentence that explains why the dropdown nav-item should be at the end of the list and not elsewhere. This sentence is to be added above the concerned examples and in a design-callout-info message.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[julien-deramond]

LGTM.

Just added an info callout to precise the design recommendation which could help projects without designers. There are use cases where it's not true IMHO so I've just carefully explained the rule with words like "typically" and "recommendation".

It can be revisited later if we have a more precise rule coming from the designers (that should be mentioned in the DSM).

No need to add a migration note since it's a pure design recommendation for edge cases in our documentation or in projects.