Update Boosted based on UI Kit v5

[Franco-Riccitelli]

FYI, the priorization is to take the changes and the checks before the news

This epic issue will track all the modifications embedded in the new UI Kit v5.0 so that Boosted can be updated.

Placeholder new

• Dark variant has been added

Close button change

• Close button now has a mandatory tooltip

Focus state check

Focus state added to components and modules. It's already been tackled by #1437 so the only action identified here would be to double-check that we haven't forgotten anything.

• Double-check that focus visible is well applied on all components and modules #1785

File input change

• File input field component customised from Boosted library, added to Forms category. #1780

Story button new

• Story button component added to Navigation category. (See prototype in Add story button component #1816)

Toggle switch check

• Updated Toggle switch variant with On/Off label. See CSS: Fix .form-switch #1796.

Colour picker change

• Colour picker component customised from Boosted library, added to Forms.

Date picker new

• Updated Date picker with month and year dropdown options.

List group change

• List group: Branded #1467

Accordion change

• Accordion component design updates (ui kit v5) #1791

Dropdown new

• Updated dropdown list single selection with search filter in dropdown field.

Split button check

• Split button arrow orientation options added. Customised from Boosted library. See Docs: Dropdown fixes #1793.

Data tables new

• Update data tables to add new designs based on UI Kit v5 #1781

Title bar new

• 50px title size option added to Title bars for Large desktop and Medium desktop breakpoint sizes (note: the baseline remains the same)

Slider new

• Updated slider control with tooltip displaying values.

Pagination dots change

• Play/Pause optional control added to Pagination dots. Carousel's pause/play button must be placed first #1763

Tags check

• Dual selection interaction removed from Tag component. See CSS: Refine a bit .tag-sm to be branded #1795.

Back to top button check

• Updated Back to top button variant with a label added.

Alerts change ⚠️ On hold since need of an icon

• Updated Alerts with new functional colours for use on white and black backgrounds.
• Updated Warning icon.
• The 4 icons must be updated everywhere in the framework and should use a solid color in the center (not transparent) otherwise it won't work with all background colors

Dropdown list arrow change

• Updated Dropdown list arrow orientation points up when in the open state and down in the closed state.

Social buttons new

• TikTok social button added.

Help text change

• Help text added as a variant to Text Fields.

Tabs dropdown new

• Standard Tabs and Tabs light now include a dropdown variant as the last entry in a tab group. Docs > Component > Nav-tabs: change place of dropdown menu #2007.

Tooltips & popovers change

• New design: Update tooltips and popover design according to UI Kit v5 #1803

[hannahiss]

File input field is OK as it is currently in Boosted. After design review, and technical impossibility to realize fully the design that was wanted, Franco agreed to change it slightly to match the current design => no change is needed anymore in code