From 25889a808d6dcf11779d5c716f1b7522050ddf2b Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Wed, 30 Aug 2023 17:18:17 +0530 Subject: [PATCH] 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 --- .circleci/config.yml | 2 +- packages/action-menu/src/ActionMenu.ts | 4 +++ .../stories/action-menu.stories.ts | 33 +++++++++++++++++++ packages/action-menu/stories/index.ts | 6 ++++ packages/action-menu/test/index.ts | 15 +++++++++ packages/overlay/README.md | 5 +-- 6 files changed, 62 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index e041ef9365..0e345624c3 100644 --- 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 index 5409d4f820..e1c49cbd4e 100644 --- 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') { 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 index b9a3466c28..08314bf639 100644 --- 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 index 1d59edc15d..656fad482b 100644 --- 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 index 3b1ccc46fd..b5444e2a43 100644 --- 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.