fix(action-menu): added static attribute support (#3573)

* fix(action-menu): added static attribute support * fix(action-menu): replaced 'undefined' with 'none' * fix(action-menu): updated the tests * fix(action-menu): added golden hash key * fix(action-menu): added labels for control * fix: storybook none value maps to undefined * fix: storybook decorators reference for individual stories * chore: updated golden image cache --------- Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
adobe · Aug 30, 2023 · 25889a8 · 25889a8
1 parent 65c3e52
commit 25889a8
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 3 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: e9c36e00831e024b6167871385e2ba74fde479d3
+        default: 81e3786dcb896f1e90567db43fafb50ee3ba6a4e
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -43,6 +43,9 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
     @property({ type: String })
     public override selects: undefined | 'single' = undefined;
 
+    @property({ type: String, reflect: true })
+    public static: 'white' | 'black' | undefined = undefined;
+
     protected override listRole: 'listbox' | 'menu' = 'menu';
     protected override itemRole = 'menuitem';
     private get hasLabel(): boolean {
@@ -66,6 +69,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
             <sp-action-button
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
+                static=${ifDefined(this.static)}
                 aria-haspopup="true"
                 aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
                 aria-expanded=${this.open ? 'true' : 'false'}

diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
@@ -18,6 +18,7 @@ import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { ActionMenuMarkup } from './';
+import { makeOverBackground } from '../../button/stories/index.js';
 
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';
@@ -112,6 +113,24 @@ export default {
                 type: 'boolean',
             },
         },
+        staticValue: {
+            name: 'static',
+            type: { name: 'string', required: false },
+            description: 'The visual static variant to apply to the button.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'none' },
+            },
+            control: {
+                type: 'select',
+                labels: {
+                    white: 'white',
+                    black: 'black',
+                    none: undefined,
+                },
+                options: ['white', 'black', 'none'],
+            },
+        },
     },
     args: {
         visibleLabel: 'More Actions',
@@ -120,6 +139,7 @@ export default {
         quiet: false,
         tooltipDescription: '',
         tooltipPlacement: 'bottom',
+        static: undefined,
     },
 };
 
@@ -131,6 +151,7 @@ interface StoryArgs {
     selects?: 'single';
     selected?: boolean;
     quiet?: boolean;
+    staticValue?: 'white' | 'black' | undefined;
     tooltipDescription?: string | 'none';
     tooltipPlacement?: string | 'none';
 }
@@ -140,6 +161,18 @@ const Template = (args: StoryArgs = {}): TemplateResult =>
 
 export const Default = (args: StoryArgs = {}): TemplateResult => Template(args);
 
+export const staticWhite = (args: StoryArgs = {}): TemplateResult =>
+    Template(args);
+staticWhite.args = {
+    staticValue: 'white',
+};
+staticWhite.decorators = [makeOverBackground()];
+export const staticBlack = (args: StoryArgs = {}): TemplateResult =>
+    Template(args);
+staticBlack.args = {
+    staticValue: 'black',
+};
+staticBlack.decorators = [makeOverBackground()];
 export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);
 quiet.args = {
     quiet: true,

diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
@@ -9,6 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
@@ -23,6 +25,7 @@ export const ActionMenuMarkup = ({
     disabled = false,
     open = false,
     quiet = false,
+    staticValue = '',
     visibleLabel = '',
     customIcon = '' as string | TemplateResult,
     size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
@@ -37,6 +40,9 @@ export const ActionMenuMarkup = ({
             ?disabled=${disabled}
             ?open=${open}
             ?quiet=${quiet}
+            static=${ifDefined(
+                staticValue === 'none' ? undefined : staticValue
+            )}
             size=${size}
             @change="${changeHandler}"
             .selects=${selects ? selects : undefined}

diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
@@ -248,6 +248,21 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
 
             expect(el.quiet).to.be.true;
         });
+        it('can be `static`', async () => {
+            const el = await actionMenuFixture();
+
+            expect(el.static == undefined).to.be.true;
+
+            el.static = 'black';
+            await elementUpdated(el);
+
+            expect(el.static == 'black').to.be.true;
+
+            el.static = 'white';
+            await elementUpdated(el);
+
+            expect(el.static == 'white').to.be.true;
+        });
         it('stay `valid`', async () => {
             const el = await actionMenuFixture();
 

diff --git a/packages/overlay/README.md b/packages/overlay/README.md
@@ -320,8 +320,9 @@ Here, again, working with your content needs (whether or not you want to leverag
 
 Under very specific conditions, [WebKit will incorrectly clip fixed-position content](https://bugs.webkit.org/show_bug.cgi?id=160953).
 WebKit clips `position: fixed` elements within containers that have all of:
+
 1. `position: relative`
 2. `overflow: clip` or `overflow: hidden`
 3. `z-index` greater than zero
-  
-If you notice overlay clipping *only* in Safari, this is likely the culprit. The solution is to break up the conditions into separate elements to avoid triggering WebKit's bug. For example, leaving relative positioning and z-index on the outermost container while creating an inner container that enforces the overflow rules.
+
+If you notice overlay clipping _only_ in Safari, this is likely the culprit. The solution is to break up the conditions into separate elements to avoid triggering WebKit's bug. For example, leaving relative positioning and z-index on the outermost container while creating an inner container that enforces the overflow rules.