Skip to content

feat: Add missing hold affordance icon for longPress S2 MenuTriggers#10066

Open
LFDanLu wants to merge 5 commits into
mainfrom
s2_menu_long_press
Open

feat: Add missing hold affordance icon for longPress S2 MenuTriggers#10066
LFDanLu wants to merge 5 commits into
mainfrom
s2_menu_long_press

Conversation

@LFDanLu
Copy link
Copy Markdown
Member

@LFDanLu LFDanLu commented May 14, 2026

Closes #10029

Adds the hold affordance icon to "longPress" MenuTriggers in S2. Supports ActionButton and ToggleButton triggers

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test the new story and see chromatic.
Also test the pre-existing docs and make sure the affordance icon and behavior works as expected.

🧢 Your Project:

RSP

@rspbot
Copy link
Copy Markdown

rspbot commented May 14, 2026

@LFDanLu
Copy link
Copy Markdown
Member Author

LFDanLu commented May 14, 2026

Copy link
Copy Markdown
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs?

*/
isQuiet?: boolean;
/** @private */
holdAffordance?: boolean;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just add to the context interface?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh good point, I guess I could use the same context in the Chromatic instead of using the prop directly too

}
};

export const HoldAffordance: Story = {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we make it look a bit more like real ones?

Here's how photoshop uses something similar
Image

@LFDanLu
Copy link
Copy Markdown
Member Author

LFDanLu commented May 14, 2026

@snowystinger docs actually already exist for this under https://d1pzu54gtk2aed.cloudfront.net/pr/899e2671cf58a48cccbd21dd428eb34cbc67dada/ haha, definitely easy to miss. I didn't realize the same thing until I wrote some new docs and went through a whole debugging session ugh

I'll put the above in the test instructions too

@rspbot
Copy link
Copy Markdown

rspbot commented May 14, 2026

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Spectrum 2 toggle button in react missing the hold icon/functionality

3 participants