Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7f70605

Browse files
Rajdeep ChandraRajdeep Chandra
Rajdeep Chandra
authored and
Rajdeep Chandra
committedMar 20, 2025·
chore: resolved conflicts
2 parents 8011c3f + 46cd782 commit 7f70605

File tree

13 files changed

+270
-147
lines changed

13 files changed

+270
-147
lines changed
 

‎.changeset/great-wolves-move.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@spectrum-web-components/overlay': minor
3+
---
4+
5+
Removed pointer-events:none from the slot-trigger under overlay-trigger to disable the overlay content and not the trigger element.

‎.changeset/witty-words-wish.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@spectrum-web-components/action-menu': patch
3+
'@spectrum-web-components/picker': patch
4+
---
5+
6+
Updated the attribute name from `forcePopover` to `force-popover` in the Picker and Action menu documentation

‎.circleci/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ parameters:
1414
# 3. Commit this change to the PR branch where the changes exist.
1515
current_golden_images_hash:
1616
type: string
17-
default: 8d47e3059f2b7919e61fd76df01eda10d11178a5
17+
default: e70c0a2a64fe685f0409aaf65543a62cdeb96cdd
1818
wireit_cache_name:
1919
type: string
2020
default: wireit

‎package.json

100755100644
+3-3
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@
103103
"devDependencies": {
104104
"@changesets/changelog-github": "^0.5.0",
105105
"@changesets/cli": "^2.27.5",
106-
"@commitlint/cli": "^19.2.1",
107-
"@commitlint/config-conventional": "^19.1.0",
106+
"@commitlint/cli": "^19.8.0",
107+
"@commitlint/config-conventional": "^19.8.0",
108108
"@custom-elements-manifest/analyzer": "^0.9.0",
109109
"@geometricpanda/storybook-addon-badges": "^2.0.2",
110110
"@lit/react": "^1.0.4",
@@ -149,7 +149,7 @@
149149
"alex": "^11.0.1",
150150
"cem-plugin-module-file-extensions": "^0.0.5",
151151
"chromatic": "^11.20.0",
152-
"chromedriver": "^133.0.3",
152+
"chromedriver": "^134.0.3",
153153
"colors": "^1.4.0",
154154
"common-tags": "^1.8.2",
155155
"custom-elements-manifest": "^2.0.0",

‎packages/action-menu/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ When `selects` is set to `single`, the `<sp-action-menu>` element will maintain
276276

277277
## Force Popover on Mobile Devices
278278

279-
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-action-menu` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `forcePopover` to the `sp-action-menu`.
279+
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-action-menu` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `force-popover` to the `sp-action-menu`.
280280

281281
Usage Guidance:
282282

@@ -286,7 +286,7 @@ Usage Guidance:
286286
To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
287287

288288
```html
289-
<sp-action-menu forcePopover>
289+
<sp-action-menu force-popover>
290290
<span slot="label">Action Menu</span>
291291
<sp-menu-item>Deselect</sp-menu-item>
292292
<sp-menu-item>Select Inverse</sp-menu-item>

‎packages/action-menu/stories/action-menu.stories.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -210,9 +210,9 @@ export const forcePopoverOnMobile = (): TemplateResult => html`
210210
<div style="padding: 40px">
211211
<h1>Force Popover on Mobile</h1>
212212
<p>
213-
The forcePopover attribute overrides the mobile device functionality
214-
of rendering a tray so that a popover will always render no matter
215-
the device.
213+
The force-popover attribute overrides the mobile device
214+
functionality of rendering a tray so that a popover will always
215+
render no matter the device.
216216
</p>
217217
<ol>
218218
<li>Open Chrome DevTools (or equivalent).</li>
@@ -225,7 +225,7 @@ export const forcePopoverOnMobile = (): TemplateResult => html`
225225
<li>Reload the page</li>
226226
<li>Click the Action Menu and see a popover</li>
227227
</ol>
228-
<sp-action-menu forcePopover>
228+
<sp-action-menu force-popover>
229229
<span slot="icon">
230230
<sp-icon-settings></sp-icon-settings>
231231
</span>

‎packages/action-menu/stories/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const ActionMenuMarkup = ({
4545
?disabled=${disabled}
4646
?open=${open}
4747
?quiet=${quiet}
48-
?forcePopover=${forcePopover}
48+
?force-popover=${forcePopover}
4949
static-color=${ifDefined(
5050
staticValue === 'none'
5151
? undefined

‎packages/overlay/src/overlay-trigger.css

-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
:host([disabled]) ::slotted([slot='trigger']) {
14-
pointer-events: none;
15-
}
16-
1713
slot[name='longpress-describedby-descriptor'] {
1814
display: none;
1915
}

‎packages/overlay/stories/overlay.stories.ts

+103
Original file line numberDiff line numberDiff line change
@@ -1611,3 +1611,106 @@ export const triggeredByOptimization = (): TemplateResult => {
16111611
</div>
16121612
`;
16131613
};
1614+
1615+
export const disabledOverlayTrigger = (): TemplateResult => {
1616+
return html`
1617+
${storyStyles}
1618+
<h2>Disabled Overlay Trigger</h2>
1619+
<p>This demonstrates how disabled overlay-triggers should work:</p>
1620+
<ul>
1621+
<li>
1622+
The overlay (tooltip/popover) functionality should be disabled
1623+
</li>
1624+
<li>But the trigger content itself should remain interactive</li>
1625+
</ul>
1626+
1627+
<div style="display: flex; gap: 24px; margin: 24px 0;">
1628+
<!-- Disabled overlay-trigger with interactive content -->
1629+
<div>
1630+
<h3>Disabled overlay-trigger</h3>
1631+
<overlay-trigger triggered-by="click hover" disabled>
1632+
<div
1633+
slot="trigger"
1634+
style="padding: 8px; border: 1px solid #ccc;"
1635+
>
1636+
<p>This container has a disabled overlay-trigger</p>
1637+
<sp-button variant="primary" id="test-button-disabled">
1638+
This button should still be clickable
1639+
</sp-button>
1640+
</div>
1641+
<sp-tooltip slot="hover-content">
1642+
This tooltip should not appear (disabled)
1643+
</sp-tooltip>
1644+
<sp-popover slot="click-content" placement="bottom" tip>
1645+
<sp-dialog size="s" no-divider>
1646+
This popover should not appear (disabled)
1647+
</sp-dialog>
1648+
</sp-popover>
1649+
</overlay-trigger>
1650+
<p id="disabled-click-indicator">Button not clicked yet</p>
1651+
</div>
1652+
1653+
<!-- Regular overlay-trigger for comparison -->
1654+
<div>
1655+
<h3>Regular overlay-trigger (for comparison)</h3>
1656+
<overlay-trigger triggered-by="click hover">
1657+
<div
1658+
slot="trigger"
1659+
style="padding: 8px; border: 1px solid #ccc;"
1660+
>
1661+
<p>This container has a regular overlay-trigger</p>
1662+
<sp-button variant="primary" id="test-button-enabled">
1663+
This button should be clickable
1664+
</sp-button>
1665+
</div>
1666+
<sp-tooltip slot="hover-content">
1667+
This tooltip should appear on hover
1668+
</sp-tooltip>
1669+
<sp-popover slot="click-content" placement="bottom" tip>
1670+
<sp-dialog size="s" no-divider>
1671+
This popover should appear on click
1672+
</sp-dialog>
1673+
</sp-popover>
1674+
</overlay-trigger>
1675+
<p id="enabled-click-indicator">Button not clicked yet</p>
1676+
</div>
1677+
</div>
1678+
1679+
<script>
1680+
// Add click handlers to demonstrate button interactivity
1681+
setTimeout(() => {
1682+
const disabledButton = document.getElementById(
1683+
'test-button-disabled'
1684+
);
1685+
const enabledButton = document.getElementById(
1686+
'test-button-enabled'
1687+
);
1688+
const disabledIndicator = document.getElementById(
1689+
'disabled-click-indicator'
1690+
);
1691+
const enabledIndicator = document.getElementById(
1692+
'enabled-click-indicator'
1693+
);
1694+
1695+
if (disabledButton) {
1696+
disabledButton.addEventListener('click', () => {
1697+
disabledIndicator.textContent =
1698+
'Button was clicked! ✅';
1699+
disabledIndicator.style.color = 'green';
1700+
});
1701+
}
1702+
1703+
if (enabledButton) {
1704+
enabledButton.addEventListener('click', () => {
1705+
enabledIndicator.textContent = 'Button was clicked! ✅';
1706+
enabledIndicator.style.color = 'green';
1707+
});
1708+
}
1709+
}, 100);
1710+
</script>
1711+
`;
1712+
};
1713+
1714+
disabledOverlayTrigger.swc_vrt = {
1715+
skip: true,
1716+
};

‎packages/picker/README.md

+4-7
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ When using `<sp-menu-item>` elements without text content, be sure to use the `v
137137
</sp-picker>
138138
```
139139
140-
##### Advanced icon management
140+
#### Advanced icon management
141141
142142
The `icons` attribute manages how the selected item will appear. Set `icons="only"` to display only the selected item's icon in the `<sp-picker>` element, or `icons="none"` to display the selected item text without the icon `<sp-picker>`.
143143
@@ -564,11 +564,11 @@ While in pending state, `<sp-picker>` elements will not respond to click events
564564
</sp-tab-panel>
565565
</sp-tabs>
566566
567-
## Behaviors
567+
### Behaviors
568568
569569
#### Force Popover on Mobile Devices
570570
571-
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-picker` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `forcePopover` to the `sp-picker`.
571+
On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-picker` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `force-popover` to the `sp-picker`.
572572
573573
Usage Guidance:
574574
@@ -589,15 +589,12 @@ To see this functionality in action, load this page from your mobile device or u
589589
<sp-field-label for="picker-popover">
590590
Do you want to see a popover menu?
591591
</sp-field-label>
592-
<sp-picker id="picker-popover" label="Select an option" forcePopover>
592+
<sp-picker id="picker-popover" label="Select an option" force-popover>
593593
<sp-menu-item value="option-1">Yes</sp-menu-item>
594594
<sp-menu-item value="option-2">No</sp-menu-item>
595595
</sp-picker>
596596
```
597597
598-
</sp-tab-panel>
599-
</sp-tabs>
600-
601598
### Accessibility
602599
603600
#### Include a visible label

‎packages/picker/src/Picker.ts

+10
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ const chevronClass = {
7070
};
7171

7272
export const DESCRIPTION_ID = 'option-picker';
73+
74+
/**
75+
* @element sp-picker
76+
* @slot label - The placeholder content for the Picker
77+
* @slot description - The description content for the Picker
78+
* @slot tooltip - Tooltip to to be applied to the the Picker Button
79+
* @slot - menu items to be listed in the Picker
80+
* @fires change - Announces that the `value` of the element has changed
81+
* @fires sp-opened - Announces that the overlay has been opened
82+
*/
7383
export class PickerBase extends SizedMixin(SpectrumElement, {
7484
noDefaultSize: true,
7585
}) {

‎packages/picker/stories/picker.stories.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {
102102
<div style="padding: 40px">
103103
<h1>Force Popover on Mobile</h1>
104104
<p>
105-
The forcePopover attribute overrides the mobile device
105+
The force-popover attribute overrides the mobile device
106106
functionality of rendering a tray so that a popover will always
107107
render no matter the device.
108108
</p>
@@ -134,7 +134,7 @@ export const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {
134134
</sp-field-label>
135135
<sp-picker
136136
id="picker-2"
137-
forcePopover
137+
force-popover
138138
@change=${handleChange(args)}
139139
label="Select an option"
140140
>

0 commit comments

Comments
 (0)
Please sign in to comment.