Skip to content

docs(select): add new section on rich content options#4512

Open
brandyscarney wants to merge 14 commits into
major-9.0from
FW-7289
Open

docs(select): add new section on rich content options#4512
brandyscarney wants to merge 14 commits into
major-9.0from
FW-7289

Conversation

@brandyscarney
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney commented May 20, 2026

⚠️ Revert dev build in playgrounds before merging ⚠️

Adds the following:

  1. Select documentation for the new feature allowing HTML to be passed to select options.
  2. Updates the StackBlitz utilities to combine any config object being passed with the mode of the Playground.

Preview

@vercel
Copy link
Copy Markdown

vercel Bot commented May 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-docs Ready Ready Preview, Comment May 28, 2026 3:18pm

Request Review

Comment thread src/components/global/Playground/index.tsx Outdated
Comment thread src/components/global/Playground/playground.types.ts Outdated
Comment thread src/components/global/Playground/README.md Outdated
Comment on lines +56 to +64
const formatInterfaceLabel = (selectInterface) => {
return selectInterface
.split('-')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
};

/* Dynamically create the different Select components */
const selectInterfaces = ['alert', 'action-sheet', 'modal', 'popover'];
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.

Originally I defined the interface array like this:

const selectInterfaces = [{
  label: 'Alert',
  value: 'alert',
}, {
  label: 'Action Sheet',
  value: 'action-sheet',
}, {
  label: 'Modal',
  value: 'modal',
}, {
  label: 'Popover',
  value: 'popover',
}];

but I removed it in favor of using the single string and converting it to the label. If we think this is too much for the demo, I can go back to the object array.

Comment on lines +102 to +106
/* The interfaceOptions property is for demonstration purposes only. */
/* It is not required for the rich options to work. */
select.interfaceOptions = {
header: 'Travel mode',
};
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.

This is just to make the demo look nicer but can be removed if desired.

@brandyscarney brandyscarney marked this pull request as ready for review May 20, 2026 18:26
@brandyscarney brandyscarney requested a review from a team as a code owner May 20, 2026 18:26
@brandyscarney brandyscarney requested review from gnbm and thetaPC and removed request for a team and gnbm May 20, 2026 18:26
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM, minor suggestions!

Thank you for updating the Playground docs!

Comment thread docs/api/select.md
Comment thread docs/api/select.md
Comment thread docs/api/select.md Outdated
Comment thread docs/techniques/security.md Outdated
Comment thread src/components/global/Playground/index.tsx Outdated
Comment thread src/components/global/Playground/README.md Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants