Make expand glyph size changing with density (#104)

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

packages/components/.storybook/preview.js

@@ -34,17 +34,36 @@ const parameters = {
 
 const globalTypes = {
   accent: {
-    name: 'Accent',
+    name: 'Accent color',
     description: 'Theme accent color for components',
     defaultValue: '#006CBE',
     toolbar: {
+      title: 'Accent color',
       icon: 'paintbrush',
       // Array of plain string values or MenuItem shape (see below)
       items: [
         { value: '#006CBE', right: '🔵', title: 'blue' },
         { value: '#DA1A5F', title: 'pink' },
         { value: '#f2c812', title: 'yellow' }
-      ]
+      ],
+      dynamicTitle: true
+    }
+  },
+  density: {
+    name: 'Density',
+    description: 'UI element density',
+    defaultValue: 0,
+    toolbar: {
+      title: 'Density',
+      icon: 'grow',
+      items: [
+        { value: -4, title: 'xsmall' },
+        { value: -2, title: 'small' },
+        { value: 0, title: 'medium' },
+        { value: 2, title: 'large' },
+        { value: 4, title: 'xlarge' }
+      ],
+      dynamicTitle: true
     }
   }
 };

packages/components/src/menu-item/menu-item.styles.ts

@@ -17,6 +17,7 @@ import {
   accentFillRest,
   bodyFont,
   controlCornerRadius,
+  density,
   designUnit,
   disabledOpacity,
   focusStrokeWidth,
@@ -30,7 +31,8 @@ import {
   neutralForegroundRest,
   strokeWidth,
   typeRampBaseFontSize,
-  typeRampBaseLineHeight
+  typeRampBaseLineHeight,
+  typeRampPlus1FontSize
 } from '../design-tokens.js';
 import {
   DirectionalStyleSheetBehavior,
@@ -148,8 +150,8 @@ export const menuItemStyles: FoundationElementTemplate<
 
     .expand-collapse-glyph {
       /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
-      width: 16px;
-      height: 16px;
+      width: calc((16 + ${density}) * 1px);
+      height: calc((16 + ${density}) * 1px);
       fill: currentcolor;
     }
 
@@ -170,6 +172,12 @@ export const menuItemStyles: FoundationElementTemplate<
       /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
       width: 16px;
       height: 16px;
+
+      /* Something like that would do if the typography is adaptive
+      font-size: inherit;
+      width: ${typeRampPlus1FontSize};
+      height: ${typeRampPlus1FontSize};
+      */
     }
 
     :host(:hover) .start,

packages/components/src/tree-item/tree-item.styles.ts

@@ -36,7 +36,8 @@ import {
   neutralForegroundRest,
   strokeWidth,
   typeRampBaseFontSize,
-  typeRampBaseLineHeight
+  typeRampBaseLineHeight,
+  typeRampPlus1FontSize
 } from '../design-tokens.js';
 import {
   DirectionalStyleSheetBehavior,
@@ -211,8 +212,8 @@ export const treeItemStyles: FoundationElementTemplate<
 
     .expand-collapse-glyph {
       /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
-      width: 16px;
-      height: 16px;
+      width: calc((16 + ${density}) * 1px);
+      height: calc((16 + ${density}) * 1px);
       transition: transform 0.1s linear;
 
       pointer-events: none;
@@ -229,6 +230,12 @@ export const treeItemStyles: FoundationElementTemplate<
       /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
       width: 16px;
       height: 16px;
+
+      /* Something like that would do if the typography is adaptive
+      font-size: inherit;
+      width: ${typeRampPlus1FontSize};
+      height: ${typeRampPlus1FontSize};
+      */
     }
 
     .start {

packages/components/src/utilities/storybook/index.ts

@@ -55,6 +55,9 @@ export function withTheme(story: any, context: StoryContext): HTMLElement {
     ? StandardLuminance.DarkMode
     : StandardLuminance.LightMode;
 
+  const density = context.globals.density;
+  theme.density = density;
+
   const children = story();
   if (typeof children === 'string') {
     theme.insertAdjacentHTML('afterbegin', children);