diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md index 6d29797f5f..cdc7d8f486 100644 --- 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 `` interface can be ```html - + Deselect diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css index 9d342c626b..30d32183a2 100644 --- 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 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 index f3c0c8a472..92280ea9f1 100644 --- 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" > diff --git a/packages/dropdown/src/dropdown.ts b/packages/dropdown/src/dropdown.ts index d316ff937d..fffc0c26df 100644 --- 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]; + } +}