fix: add radio and checkbox visual in fast-menu-item (microsoft#4205)

* update template and styles to support radio and checkbox indicator for menu-item * add when directive for radio and checkbox role * update border color on empty radio and checkbox to match svg and content color * add query to check for role for styling menu-item * add without-role class name and style * fixed and add high contrast styles * removed behavior in menu and creating selectors to style radio and checkbox * update high contrast color on input * refactor the template using the when directive. update styles on radio and checkbox * update high contrast selectors * add slots to create defaults and refactor style code
mihsta · Mar 3, 2021 · 50efed4 · 50efed4
1 parent 6f61475
commit 50efed4
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 4 deletions.
diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts
@@ -9,12 +9,15 @@ import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     accentFillActiveBehavior,
     accentFillHoverBehavior,
+    accentFillRestBehavior,
     accentForegroundCutRestBehavior,
     heightNumber,
+    neutralFillInputRestBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralFocusInnerAccentBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineRestBehavior,
 } from "../styles/index";
 
 export const MenuItemStyles = css`
@@ -54,7 +57,8 @@ export const MenuItemStyles = css`
         background: ${accentFillHoverBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
-    :host([checked="true"]) {
+
+    :host([aria-checked="true"]) {
         background: ${accentFillHoverBehavior.var};
         color: ${accentForegroundCutRestBehavior.var};
     }
@@ -92,6 +96,7 @@ export const MenuItemStyles = css`
     .start,
     .end {
         display: flex;
+        justify-content: center;
     }
     
     ::slotted(svg) {
@@ -110,25 +115,121 @@ export const MenuItemStyles = css`
     :host(:active)::slotted(svg) {
         fill: ${accentForegroundCutRestBehavior.var};
     }
+
+    :host([role="menuitemcheckbox"]),
+    :host([role="menuitemradio"]) {
+        display: grid;
+        grid-template-columns: auto auto 1fr minmax(42px, auto);
+        align-items: center;
+        min-height: 32px;
+    }
+
+    :host .input-container {
+        display: none;
+    }
+
+    :host([role="menuitemcheckbox"]) .input-container,
+    :host([role="menuitemradio"]) .input-container {
+        display: grid;
+        margin-inline-end: 10px;
+    }
+
+    :host([role="menuitemcheckbox"]) .start,
+    :host([role="menuitemradio"]) .start {
+        grid-column-start: 2;
+        margin-inline-end: 10px;
+    }
+
+    :host([role="menuitemcheckbox"]) .content,
+    :host([role="menuitemradio"]) .content {
+        grid-column-start: 3;
+    }
+
+    :host([role="menuitemcheckbox"]) .end,
+    :host([role="menuitemradio"]) .end {
+        grid-column-start: 4;
+    }
+
+    :host .checkbox,
+    :host .radio {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        box-sizing: border-box;
+        border: calc(var(--outline-width) * 1px) solid ${
+            accentForegroundCutRestBehavior.var
+        };
+        outline: none;
+        margin-inline-start: 10px;
+    }
+
+    :host .checkbox {
+        border-radius: calc(var(--corner-radius) * 1px);
+    }
+
+    :host .radio {
+        border-radius: 999px;
+    }
+
+    :host .checkbox-indicator,
+    :host .radio-indicator,
+    ::slotted([slot="checkbox-indicator"]),
+    ::slotted([slot="radio-indicator"]) {
+        display: none;
+    }
+
+    :host([aria-checked="true"]) .checkbox-indicator,
+    :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]) {
+        width: 100%;
+        height: 100%;
+        display: block;
+        fill: ${accentForegroundCutRestBehavior.var};
+        pointer-events: none;
+    }
+
+    :host([aria-checked="true"]) .radio-indicator {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        right: 4px;
+        bottom: 4px;
+        border-radius: 999px;
+        display: block;
+        background: ${accentForegroundCutRestBehavior.var};
+        pointer-events: none;
+    }
+
+    :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
+        display: block;
+        pointer-events: none;
+    }
 `.withBehaviors(
     accentFillActiveBehavior,
     accentFillHoverBehavior,
+    accentFillRestBehavior,
     accentForegroundCutRestBehavior,
+    neutralFillInputRestBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralFocusInnerAccentBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(
         css`
             :host {
                 border-color: transparent;
                 color: ${SystemColors.ButtonText};
                 forced-color-adjust: none;
             }
+
             :host(:hover) {
                 background: ${SystemColors.Highlight};
                 color: ${SystemColors.HighlightText};
             }
+
             :host(:hover) .start,
             :host(:hover) .end,
             :host(:hover)::slotted(svg),
@@ -137,13 +238,15 @@ export const MenuItemStyles = css`
             :host(:active)::slotted(svg) {
                 fill: ${SystemColors.HighlightText};
             }
+
             :host(:${focusVisible}) {
                 background: ${SystemColors.Highlight};
                 border-color: ${SystemColors.ButtonText};
                 box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText};
                 color: ${SystemColors.HighlightText};
                 fill: currentcolor;
             }
+
             :host([disabled]),
             :host([disabled]:hover),
             :host([disabled]:hover) .start,
@@ -154,6 +257,43 @@ export const MenuItemStyles = css`
                 fill: currentcolor;
                 opacity: 1;
             }
+
+            :host .checkbox,
+            :host .radio{
+                border-color: ${SystemColors.ButtonText};
+                background: ${SystemColors.HighlightText};
+            }
+
+            :host([checked="true"]) .checkbox,
+            :host([checked="true"]) .radio {
+                border-color: ${SystemColors.HighlightText};
+            }
+
+            :host(:hover) .checkbox,
+            :host(:hover) .radio,
+            :host(:${focusVisible}) .checkbox,
+            :host(:${focusVisible}) .radio,
+            :host([checked="true"]:hover) .checkbox,
+            :host([checked="true"]:hover) .radio,
+            :host([checked="true"]:${focusVisible}) .checkbox,
+            :host([checked="true"]:${focusVisible}) .radio {
+                border-color: ${SystemColors.HighlightText};
+            }
+
+            :host([aria-checked="true"]) {
+                background: ${SystemColors.Highlight};
+                color: ${SystemColors.HighlightText};
+            }
+
+            :host([aria-checked="true"]) .checkbox-indicator,
+            :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]),
+            :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
+                fill: ${SystemColors.Highlight};
+            }
+
+            :host([aria-checked="true"]) .radio-indicator {
+                background: ${SystemColors.Highlight};
+            }
         `
     )
 );
diff --git a/packages/web-components/fast-components/src/menu/fixtures/menu.html b/packages/web-components/fast-components/src/menu/fixtures/menu.html
@@ -154,11 +154,50 @@ <h2>With radio buttons and checkboxes</h2>
     <fast-menu-item>Menu item 3</fast-menu-item>
     <fast-divider></fast-divider>
     <fast-menu-item role="menuitemcheckbox">Checkbox 1</fast-menu-item>
-    <fast-menu-item role="menuitemcheckbox">Checkbox 2</fast-menu-item>
+    <fast-menu-item role="menuitemcheckbox">
+        Checkbox 2
+        <svg
+            slot="checkbox-indicator"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+            />
+        </svg>
+    </fast-menu-item>
     <fast-divider></fast-divider>
     <fast-menu-item role="menuitemradio">Radio 1.1</fast-menu-item>
     <fast-menu-item role="menuitemradio">Radio 1.2</fast-menu-item>
     <fast-divider></fast-divider>
-    <fast-menu-item role="menuitemradio">Radio 2.1</fast-menu-item>
-    <fast-menu-item role="menuitemradio">Radio 2.2</fast-menu-item>
+    <fast-menu-item role="menuitemradio">
+        Radio 2.1
+        <svg
+            slot="radio-indicator"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+            />
+        </svg>
+    </fast-menu-item>
+    <fast-menu-item role="menuitemradio">
+        Radio 2.2
+        <svg
+            slot="radio-indicator"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+            />
+        </svg>
+    </fast-menu-item>
 </fast-menu>
diff --git a/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts b/packages/web-components/fast-foundation/src/menu-item/menu-item.template.ts
@@ -20,6 +20,40 @@ export const MenuItemTemplate = html<MenuItem>`
         class="${x => (x.disabled ? "disabled" : "")} ${x =>
             x.expanded ? "expanded" : ""}"
     >
+        <div part="input-container" class="input-container">
+            ${when(
+                x => x.role === MenuItemRole.menuitemcheckbox,
+                html<MenuItem>`
+                    <span part="checkbox" class="checkbox">
+                        <slot name="checkbox-indicator">
+                            <svg
+                                aria-hidden="true"
+                                part="checkbox-indicator"
+                                class="checkbox-indicator"
+                                viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
+                                />
+                            </svg>
+                        </slot>
+                    </span>
+                `
+            )}
+            ${when(
+                x => x.role === MenuItemRole.menuitemradio,
+                html<MenuItem>`
+                    <span part="radio" class="radio">
+                        <slot name="radio-indicator">
+                            <span part="radio-indicator" class="radio-indicator"></span>
+                        </slot>
+                    </span>
+                `
+            )}
+        </div>
         ${startTemplate}
         <span class="content" part="content">
             <slot></slot>