fix: remove margins on host elements (microsoft#20710)

* fix: remove margins from host elements * Change files
mlp73 · Jan 17, 2022 · 82b81b6 · 82b81b6
1 parent 93ae413
commit 82b81b6
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 18 deletions.
diff --git a/change/@fluentui-web-components-75f5fbe5-98ae-4794-ac36-659358e98ce8.json b/change/@fluentui-web-components-75f5fbe5-98ae-4794-ac36-659358e98ce8.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: remove margins from host elements",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -41,7 +41,6 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
     ${display('inline-flex')} :host {
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
         /*
          * Chromium likes to select label text or the default slot when

diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
@@ -1,6 +1,6 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
 import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
+import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 
 export const dividerStyles: (
   context: ElementDefinitionContext,
@@ -10,7 +10,6 @@ export const dividerStyles: (
     ${display('block')} :host {
       box-sizing: content-box;
       height: 0;
-      margin: calc(${designUnit} * 1px) 0;
       border: none;
       border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
     }

diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
@@ -31,7 +31,6 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
       height: calc((${heightNumber} + ${designUnit}) * 1px);
       justify-content: center;
       align-items: center;
-      margin: 0;
       fill: currentcolor;
       color: ${neutralFillStrongRest};
       background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),

diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -47,7 +47,6 @@ export const optionStyles: (
       font-size: ${typeRampBaseFontSize};
       height: calc(${heightNumber} * 1px);
       line-height: ${typeRampBaseLineHeight};
-      margin: 0 calc(${designUnit} * 1px);
       outline: none;
       overflow: hidden;
       align-items: center;

diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts
@@ -3,6 +3,7 @@ import {
   display,
   ElementDefinitionContext,
   FoundationElementDefinition,
+  ListboxOption
 } from '@microsoft/fast-foundation';
 import {
   controlCornerRadius,
@@ -26,6 +27,10 @@ export const listboxStyles: (
       outline: none;
     }
 
+    ::slotted(${context.tagFor(ListboxOption)}) {
+      margin: 0 calc(${designUnit} * 1px);
+    }
+
     :host(:focus-within:not([disabled])) {
       border-color: ${focusStrokeOuter};
       box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;

diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -12,7 +12,6 @@ import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
 import {
   bodyFont,
   controlCornerRadius,
-  designUnit,
   disabledOpacity,
   focusStrokeOuter,
   focusStrokeWidth,
@@ -42,7 +41,6 @@ export const menuItemStyles: (context: ElementDefinitionContext, definition: Men
       justify-items: center;
       align-items: center;
       padding: 0;
-      margin: 0 calc(${designUnit} * 1px);
       white-space: nowrap;
       color: ${neutralForegroundRest};
       fill: currentcolor;

diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
@@ -1,5 +1,5 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
-import { display, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { display, Divider, ElementDefinitionContext, forcedColorsStylesheetBehavior, FoundationElementDefinition, MenuItem } from '@microsoft/fast-foundation';
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import { elevationShadowFlyout } from '../styles/index';
 import {
@@ -20,7 +20,6 @@ export const menuStyles: (
       border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${layerCornerRadius} * 1px);
       box-shadow: ${elevationShadowFlyout};
-      margin: 0;
       padding: calc(${designUnit} * 1px) 0;
       max-width: 368px;
       min-width: 64px;
@@ -31,6 +30,14 @@ export const menuStyles: (
       margin: 0 calc(${designUnit} * 2px);
     }
 
+    ::slotted(${context.tagFor(MenuItem)}) {
+      margin: 0 calc(${designUnit} * 1px);
+    }
+
+    ::slotted(${context.tagFor(Divider)}) {
+      margin: calc(${designUnit} * 1px) 0;
+    }
+
     ::slotted(hr) {
       box-sizing: content-box;
       height: 0;

diff --git a/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/src/progress/progress-ring/progress-ring.styles.ts
@@ -19,7 +19,6 @@ export const progressRingStyles: (
       outline: none;
       height: calc(${heightNumber} * 1px);
       width: calc(${heightNumber} * 1px);
-      margin: calc(${heightNumber} * 1px) 0;
     }
 
     .progress {

diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts
@@ -23,7 +23,6 @@ export const progressStyles: (context: ElementDefinitionContext, definition: Pro
       align-items: center;
       outline: none;
       height: calc((${strokeWidth} * 3) * 1px);
-      margin: calc(${designUnit} * 1px) 0;
     }
 
     .progress {

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,14 +1,12 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
 import { display, ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designUnit } from '../design-tokens';
 
 export const radioGroupStyles: (
   context: ElementDefinitionContext,
   definition: FoundationElementDefinition,
 ) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => css`
   ${display('flex')} :host {
     align-items: flex-start;
-    margin: calc(${designUnit} * 1px) 0;
     flex-direction: column;
   }
 

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
@@ -41,7 +41,6 @@ export const radioStyles: (context: ElementDefinitionContext, definition: RadioO
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
         /*
          * Chromium likes to select label text or the default slot when

diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
@@ -39,7 +39,6 @@ export const sliderStyles: (context: ElementDefinitionContext, definition: Slide
       --track-width: ${designUnit};
       align-items: center;
       width: 100%;
-      margin: calc(${designUnit} * 1px) 0;
       user-select: none;
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);

diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -47,7 +47,6 @@ export const switchStyles: (context: ElementDefinitionContext, definition: Switc
       align-items: center;
       outline: none;
       font-family: ${bodyFont};
-      margin: calc(${designUnit} * 1px) 0;
       ${
         /*
          * Chromium likes to select label text or the default slot when
@@ -140,8 +139,9 @@ export const switchStyles: (context: ElementDefinitionContext, definition: Switc
       cursor: pointer;
     }
 
-    .status-message {
-      margin-inline-start: calc(${designUnit} * 2px + 2px);
+    ::slotted([slot="checked-message"]),
+    ::slotted([slot="unchecked-message"]) {
+        margin-inline-start: calc(${designUnit} * 2px + 2px);
     }
 
     :host(.checked) .switch {