feat(action-menu): update spectrum css input

adobe · Jan 6, 2021 · 62a5065 · 62a5065
1 parent 8c888aa
commit 62a5065
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json
@@ -50,7 +50,7 @@
     "license": "Apache-2.0",
     "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/dropdown": "^0.8.5",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-workflow": "^0.3.6",

diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -16,9 +16,10 @@ import {
     PropertyValues,
     html,
     ifDefined,
+    property,
 } from '@spectrum-web-components/base';
 import { DropdownBase } from '@spectrum-web-components/dropdown';
-import '@spectrum-web-components/button/sp-action-button.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { MoreIcon } from '@spectrum-web-components/icons-workflow';
 import actionMenuStyles from './action-menu.css.js';
@@ -28,9 +29,12 @@ import actionMenuStyles from './action-menu.css.js';
  */
 export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
     public static get styles(): CSSResultArray {
-        return [...super.styles, actionMenuStyles];
+        return [actionMenuStyles];
     }
 
+    @property({ type: String, reflect: true })
+    public size = 'm';
+
     protected listRole = 'menu';
     protected itemRole = 'menuitem';
     private get hasLabel(): boolean {
@@ -40,12 +44,12 @@ export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
     protected get buttonContent(): TemplateResult[] {
         return [
             html`
-                <slot name="icon" slot="icon">
+                <slot name="icon" slot="icon" ?icon-only=${!this.hasLabel}>
                     <sp-icon size="m" class="icon">
                         ${MoreIcon({ hidden: this.hasLabel })}
                     </sp-icon>
                 </slot>
-                <slot name="label"></slot>
+                <slot name="label" ?hidden=${!this.hasLabel}></slot>
             `,
         ];
     }

diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host,
-.button {
-    min-width: 0;
-    width: auto;
+:host {
+    display: inline-flex;
 }
 
 :host([quiet]) {
@@ -35,4 +33,36 @@ governing permissions and limitations under the License.
 #popover {
     width: auto;
     max-width: none;
+    display: none;
+}
+
+:host([dir='ltr']) ::slotted([slot='icon']),
+:host([dir='ltr']) sp-icon {
+    /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon */
+    margin-left: calc(
+        -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) -
+                    var(--spectrum-actionbutton-padding-left-adjusted))
+    );
+}
+:host([dir='rtl']) ::slotted([slot='icon']),
+:host([dir='rtl']) sp-icon {
+    /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon */
+    margin-right: calc(
+        -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) -
+                    var(--spectrum-actionbutton-padding-left-adjusted))
+    );
+}
+
+:host([dir]) slot[icon-only]::slotted([slot='icon']),
+:host([dir]) slot[icon-only] sp-icon {
+    /* .spectrum-ActionButton .spectrum-ActionButton-hold+.spectrum-Icon,
+   * .spectrum-ActionButton .spectrum-Icon:only-child */
+    margin-left: calc(
+        -1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) -
+                    var(--spectrum-actionbutton-icononly-padding-left-adjusted))
+    );
+    margin-right: calc(
+        -1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) -
+                    var(--spectrum-actionbutton-icononly-padding-right-adjusted))
+    );
 }
diff --git a/packages/action-menu/tsconfig.json b/packages/action-menu/tsconfig.json
@@ -7,6 +7,7 @@
     "include": ["*.ts", "src/*.ts"],
     "exclude": ["test/*.ts", "stories/*.ts"],
     "references": [
+        { "path": "../action-button" },
         { "path": "../dropdown" },
         { "path": "../icons-workflow" },
         { "path": "../shared" }