feat(menu): update spectrum css input

adobe · Jan 6, 2021 · 8c7e18a · 8c7e18a
1 parent 683bb1a
commit 8c7e18a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -55,11 +55,11 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/menu": "^3.0.0-beta.4"
+        "@spectrum-css/menu": "^3.0.0-beta.5"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
-        "@spectrum-web-components/button": "^0.9.4",
+        "@spectrum-web-components/action-button": "^0.0.1",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
         "@spectrum-web-components/shared": "^0.7.4",

diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -20,11 +20,11 @@ import {
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/icon/sp-icon.js';
-import { CheckmarkMediumIcon } from '@spectrum-web-components/icons-ui';
-import { ActionButton } from '@spectrum-web-components/button';
+import { Checkmark100Icon } from '@spectrum-web-components/icons-ui';
+import { ActionButton } from '@spectrum-web-components/action-button';
 
 import menuItemStyles from './menu-item.css.js';
-import checkmarkMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.js';
+import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
 
 export interface MenuItemQueryRoleEventDetail {
     role: string;
@@ -36,7 +36,7 @@ export interface MenuItemQueryRoleEventDetail {
  */
 export class MenuItem extends ActionButton {
     public static get styles(): CSSResultArray {
-        return [menuItemStyles, checkmarkMediumStyles];
+        return [menuItemStyles, checkmarkStyles];
     }
 
     static instanceCount = 0;
@@ -79,11 +79,11 @@ export class MenuItem extends ActionButton {
             content.push(html`
                 <sp-icon
                     id="selected"
-                    size="s"
+                    size="none"
                     slot="icon"
-                    class="checkmark-medium"
+                    class="spectrum-UIIcon-Checkmark100"
                 >
-                    ${CheckmarkMediumIcon({ hidden: true })}
+                    ${Checkmark100Icon()}
                 </sp-icon>
             `);
         }

diff --git a/packages/menu/stories/menu-item.stories.ts b/packages/menu/stories/menu-item.stories.ts
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
+import '../sp-menu.js';
 import '../sp-menu-item.js';
 
 export default {
@@ -20,8 +21,10 @@ export default {
 
 export const Default = (): TemplateResult => {
     return html`
-        <sp-menu-item>
-            Menu Item
-        </sp-menu-item>
+        <sp-menu>
+            <sp-menu-item>
+                Menu Item
+            </sp-menu-item>
+        </sp-menu>
     `;
 };
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
@@ -19,6 +19,7 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons/sp-icons-medium.js';
+import { CheckmarkCircleIcon } from '@spectrum-web-components/icons-workflow';
 
 export default {
     component: 'sp-menu',
@@ -100,19 +101,15 @@ export const headersAndIcons = (): TemplateResult => {
                         Section Heading
                     </span>
                     <sp-menu-item>
-                        <sp-icon
-                            name="ui:SuccessMedium"
-                            size="s"
-                            slot="icon"
-                        ></sp-icon>
+                        <sp-icon size="s" slot="icon">
+                            ${CheckmarkCircleIcon({ hidden: true })}
+                        </sp-icon>
                         Save
                     </sp-menu-item>
                     <sp-menu-item disabled>
-                        <sp-icon
-                            name="ui:SuccessMedium"
-                            size="s"
-                            slot="icon"
-                        ></sp-icon>
+                        <sp-icon size="s" slot="icon">
+                            ${CheckmarkCircleIcon({ hidden: true })}
+                        </sp-icon>
                         Download
                     </sp-menu-item>
                 </sp-menu-group>