fix(action-menu): spectrum adherence update

adobe · Jan 22, 2020 · 6eb1860 · 6eb1860
1 parent 08c727d
commit 6eb1860
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md
@@ -51,7 +51,7 @@ The visible label that is be provided via the default `<slot>` interface can be
 <!-- prettier-ignore -->
 ```html
 <sp-action-menu label="More Actions">
-    <sp-menu slot="options">
+    <sp-menu slot="options" style="min-width: 125px">
         <sp-menu-item>
             Deselect
         </sp-menu-item>

diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
@@ -15,8 +15,15 @@ governing permissions and limitations under the License.
 }
 
 .icon {
+    /* Sizing for .icon is needed because we are using a raw <svg> due to https://github.com/adobe/spectrum-web-components/issues/155 */
     width: 18px;
     height: 18px;
+
+    /**
+     * Because .icon is acting as default content for its slot, the `::slotted([slot="icon"])` styles do not apply.
+     * In the future it may be necessary to add a default content selector to the style processing code.
+     */
+    flex-shrink: 0;
 }
 
 #popover {

diff --git a/packages/action-menu/src/action-menu.ts b/packages/action-menu/src/action-menu.ts
@@ -17,14 +17,14 @@ import {
     PropertyValues,
     html,
 } from 'lit-element';
-import { Dropdown } from '@spectrum-web-components/dropdown';
+import { DropdownBase } from '@spectrum-web-components/dropdown';
 import { ObserveSlotText } from '@spectrum-web-components/shared/lib/observe-slot-text';
 import actionMenuStyles from './action-menu.css.js';
 
 /**
  * @slot options - The menu with options that will display when the dropdown is open
  */
-export class ActionMenu extends ObserveSlotText(Dropdown) {
+export class ActionMenu extends ObserveSlotText(DropdownBase) {
     public static get styles(): CSSResultArray {
         return [...super.styles, actionMenuStyles];
     }
@@ -51,6 +51,7 @@ export class ActionMenu extends ObserveSlotText(Dropdown) {
                         class="icon"
                         focusable="false"
                         aria-hidden="true"
+                        fill="currentColor"
                     >
                         <circle cx="17.8" cy="18.2" r="3.4"></circle>
                         <circle cx="29.5" cy="18.2" r="3.4"></circle>

diff --git a/packages/dropdown/src/dropdown.ts b/packages/dropdown/src/dropdown.ts
@@ -42,12 +42,11 @@ import '@spectrum-web-components/popover';
  * @slot default - The placeholder content for the dropdown
  * @slot options - The menu with options that will display when the dropdown is open
  */
-export class Dropdown extends Focusable {
+export class DropdownBase extends Focusable {
     public static get styles(): CSSResultArray {
         return [
             ...super.styles,
             actionButtonStyles,
-            fieldButtonStyles,
             dropdownStyles,
             alertSmallStyles,
             chevronDownMediumStyles,
@@ -296,3 +295,9 @@ export class Dropdown extends Focusable {
         }
     }
 }
+
+export class Dropdown extends DropdownBase {
+    public static get styles(): CSSResultArray {
+        return [...super.styles, fieldButtonStyles];
+    }
+}