Add size 'small' to Toggle group

[Martrybus]

Provide a general summary of the feature here

Currently, toggle group component has onle 2 sizes: Mid and Large. In Editorial Suite, we would like to use size 'small'.

🤔 Expected Behavior?

In Editorial Suite, we are looking forward to replace our old toggle buttons with DS toggle group. However, we need a) a size small; b) Ideally, there should be an option that button width adjusts to the text. c) selected toggle (active state) should be marked with blue color (accent 500 or accent 600 from ES colors)

😯 Current Behavior

Current behaviour

1. Currently, toggle group component has onle 2 sizes: Mid and Large.
2. Also, the tabs don't 'hug' the text inside and do not adjust to the text's length. It seems like they have fixed width
3. Active state of toogle group element has no color.

In Editorial Suite, we are looking forward to replace our old toggle buttons with DS toggle group. However, we need a) a size small; b) Ideally, there should be an option that button width adjusts to the text. c) selected toggle (active state) should be marked with blue color (accent 500 or accent 600 from ES colors)

As you can see in the screenshot, we should try to make toggle group with Editor, Advanced search and Workflows fit to the width of the grey panel below. With the current sizes, we cannot to it. The toggle group takes to much space.

💁 Possible Solution

No response

🔦 Context

We are refreshing the look and feel of Editorial Suite and would really love to use toggle group to replace our old toggles which look a bit outdated.

💻 Examples

👤 Your name

Maria Trybuś

🧢 Your Product/Team

Editorial Suite

[DanielleRameau]

@Martrybus we are currently refactoring our components to the new design token setup, in this update we will also add the small toggle group