fix: toolbar button not having any margin

[itmilos]

Related Issue

Closes #1155

Description

Added margins for buttons in toolbar overflow

Screenshots

NOTE: If you've made any style changes, please provide appropriate screenshots (before and after) to help reviewers.

To see examples of which screenshots to include, go to Screenshot Examples.

Before:

After:

Please check whether the PR fulfills the following requirements

1. The output matches the design specs

• All values are in rem
• [na] Text elements follow the truncation rules
• [na] hover state of the element follow design spec
• [na] focus state of the element follow design spec
• [na] active state of the element follow design spec
• [na] selected state of the element follow design spec
• [na] selected hover state of the element follow design spec
• [na] pressed state of the element follow design spec
• [na] Responsiveness rules - the component has modifier classes for all breakpoints
• [na] Includes Compact/Cosy/Tablet design
• [na] RTL support

2. The code follows fundamental-styles code standards and style

• [na] only one top level fd-* class is used in the file
• [na] BEM naming convention is used
• [na] Mixins are used for repeatable code (fd-rtl, fd-ellipsis, fd-flex, fd-selected, fd-focus, ect.)
• [na] A11y support - keyboard support, screenreader support, proper ARIA attributes, etc.
• [na] fd-reset() mixin is applied to all elements
• [na] Variables are used, if some value is used more than twice.
• [na] Checked if current components can be reused, instead of having new code.

3. Testing

• tested Storybook examples with "CSS Resources" normalize option
• tested Storybook examples with "CSS Resources" unnormalize option
• Verified all styles in IE11
• [na] Updated tests
• last commit message should have [ci visual] so it can trigger chromatic visual regression (e.g. test: run chromatic visual regression [ci visual])

4. Documentation

• [na] Storybook documentation has been created/updated
• [na] Breaking Changes wiki has been updated in case of breaking changes.

[netlify]

Deploy preview for fundamental-styles ready!

Built with commit 963c277

https://deploy-preview-2196--fundamental-styles.netlify.app

[InnaAtanasova]

including fd-button inside fd-toolbar is violating the self-contained rules. If inside your component (in this case fd-toolbar) you are overwriting the properties of another component (fd-button in this case) you can't target directly the element like you did, you need a modifier class.
Basically you will need something like: fd-toolbar__button where you will modify the specific property of fd-button. But the problem here is that the visual specs do not specify spacing for the buttons in the overflow menu. The button is supposed to have "touchable area" that is bigger than the dimensions of the button and this touchable area is playing the role of "margin" around the button

[InnaAtanasova]

From the specs:

[mikerodonnell89]

@InnaAtanasova I think it may be safe to assume the same spacing as buttons in the action sheet menu?

[itmilos]

including fd-button inside fd-toolbar is violating the self-contained rules. If inside your component (in this case fd-toolbar) you are overwriting the properties of another component (fd-button in this case) you can't target directly the element like you did, you need a modifier class.

we can apply the same spacing for all elements in the menu, that way we should remove some of classes like

.#{$block}__overflow__label {
&.#{$fd-namespace}-label {
margin: 0.375rem 0;

[InnaAtanasova]

@itmilos you prob need to update the storyshot, the builds are failing