Style glyphs for tree and accordion items (#30)

* Turn at 90deg the collapse glyph

* Upgrade storybook

* Use arrow glyph for accordion item

* Prettify

* Update snapshots

* Expand one tree item in story for testing it

* Update tree view snapshots

Author: fcollonval

packages/components/.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -12,14 +13,22 @@ module.exports = {
   },
   plugins: ['@typescript-eslint'],
   rules: {
-    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        args: 'none'
+      }
+    ],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/quotes': [
       'error',
       'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: false
+      }
     ],
     curly: ['error', 'all'],
     eqeqeq: 'error',

packages/components/package.json

@@ -55,20 +55,21 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@storybook/addon-a11y": "^6.4.3",
-    "@storybook/addon-actions": "^6.4.3",
-    "@storybook/addon-essentials": "^6.4.3",
-    "@storybook/addon-links": "^6.4.3",
-    "@storybook/addons": "^6.4.14",
-    "@storybook/builder-webpack5": "^6.4.3",
-    "@storybook/html": "^6.4.3",
-    "@storybook/manager-webpack5": "^6.4.3",
-    "@storybook/theming": "^6.4.3",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/html": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
     "@types/jest": "^27.0.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-storybook": "^0.5.7",
     "gh-pages": "^3.1.0",
     "jest": "^27.2.4",
     "prettier": "^2.2.1",

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

@@ -13,7 +13,6 @@ import {
 } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
-  accentFillRest,
   bodyFont,
   controlCornerRadius,
   density,
@@ -51,33 +50,33 @@ export const accordionItemStyles: FoundationElementTemplate<
       padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);
     }
 
-    .heading {
+    div.heading {
       display: grid;
       position: relative;
-      grid-template-columns: auto 1fr auto calc(${heightNumber} * 1px);
+      grid-template-columns: calc(${heightNumber} * 1px) auto 1fr auto;
+      color: ${neutralForegroundRest};
     }
 
     .button {
       appearance: none;
       border: none;
       background: none;
-      grid-column: 2;
-      grid-row: 1;
+      grid-column: 3;
       outline: none;
       padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
       text-align: left;
       height: calc(${heightNumber} * 1px);
-      color: ${neutralForegroundRest};
+      color: currentcolor;
       cursor: pointer;
       font-family: inherit;
     }
 
     .button:hover {
-      color: ${neutralForegroundRest};
+      color: currentcolor;
     }
 
     .button:active {
-      color: ${neutralForegroundRest};
+      color: currentcolor;
     }
 
     .button::before {
@@ -105,14 +104,15 @@ export const accordionItemStyles: FoundationElementTemplate<
       display: flex;
       align-items: center;
       justify-content: center;
-      grid-column: 4;
+      grid-column: 1;
+      grid-row: 1;
       pointer-events: none;
       position: relative;
     }
 
     slot[name='expanded-icon'],
     slot[name='collapsed-icon'] {
-      fill: ${accentFillRest};
+      fill: currentcolor;
     }
 
     slot[name='collapsed-icon'] {
@@ -136,15 +136,15 @@ export const accordionItemStyles: FoundationElementTemplate<
       align-items: center;
       padding-inline-start: calc(${designUnit} * 1px);
       justify-content: center;
-      grid-column: 1;
+      grid-column: 2;
       position: relative;
     }
 
     .end {
       display: flex;
       align-items: center;
       justify-content: center;
-      grid-column: 3;
+      grid-column: 4;
       position: relative;
     }
   `.withBehaviors(

packages/components/src/accordion-item/index.ts

@@ -25,27 +25,30 @@ export const jpAccordionItem = AccordionItem.compose<AccordionItemOptions>({
       <svg
         width="20"
         height="20"
-        viewBox="0 0 20 20"
+        viewBox="0 0 16 16"
         xmlns="http://www.w3.org/2000/svg"
+        class="expand-collapse-glyph"
       >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
-          d="M16.22 3H3.78a.78.78 0 00-.78.78v12.44c0 .43.35.78.78.78h12.44c.43 0 .78-.35.78-.78V3.78a.78.78 0 00-.78-.78zM3.78 2h12.44C17.2 2 18 2.8 18 3.78v12.44c0 .98-.8 1.78-1.78 1.78H3.78C2.8 18 2 17.2 2 16.22V3.78C2 2.8 2.8 2 3.78 2zM11 9h3v2h-3v3H9v-3H6V9h3V6h2v3z"
+          d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"
         />
       </svg>
     `,
   expandedIcon: /* html */ `
       <svg
         width="20"
         height="20"
-        viewBox="0 0 20 20"
+        viewBox="0 0 16 16"
         xmlns="http://www.w3.org/2000/svg"
+        class="expand-collapse-glyph"
       >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
-          d="M3.78 3h12.44c.43 0 .78.35.78.78v12.44c0 .43-.35.78-.78.78H3.78a.78.78 0 01-.78-.78V3.78c0-.43.35-.78.78-.78zm12.44-1H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.78-.8 1.78-1.78V3.78C18 2.8 17.2 2 16.22 2zM14 9H6v2h8V9z"
+          transform="rotate(90,8,8)"
+          d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"
         />
       </svg>
     `

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

@@ -53,7 +53,7 @@ const ltr = css`
     left: calc(${focusStrokeWidth} * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(45deg);
+    transform: rotate(90deg);
   }
 `;
 
@@ -71,7 +71,7 @@ const rtl = css`
     right: calc(${focusStrokeWidth} * 1px);
   }
   :host([expanded]) > .positioning-region .expand-collapse-glyph {
-    transform: rotate(135deg);
+    transform: rotate(90deg);
   }
 `;
 

packages/components/src/tree-view/tree-view.stories.ts

@@ -39,7 +39,7 @@ const Template = (
         <jp-tree-item>Nested item 2</jp-tree-item>
         <jp-tree-item>Nested item 3</jp-tree-item>
       </jp-tree-item>
-      <jp-tree-item>
+      <jp-tree-item expanded>
         Root item 2
         <jp-tree-item>
           Flowers