Skip to content

feat(select): allow multiple selections in popover interface, ui updates #23474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 30 commits into from
Jul 20, 2021

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Jun 21, 2021

Features / Improvements

  • Adds support for multiple with the "popover" interface
  • Properly add styles for the label, highlight, dropdown arrow on focus / present
  • Removes the ripple effect for outline selects
  • Update styles for the popover itself to take up the full width of the item, remove borders, hide the radio buttons themselves, use correct colors for hovering / focusing items
  • First radio is focused when presented

resolves #23657
resolves #15500
resolves #12310

master branch
master branch
master-open branch-open

@github-actions github-actions bot added the package: core @ionic/core package label Jun 21, 2021
@brandyscarney brandyscarney requested review from liamdebeasi and willmartian and removed request for liamdebeasi July 6, 2021 20:52
Copy link
Contributor

@willmartian willmartian left a comment

Choose a reason for hiding this comment

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

Nice work! Added a few non-blocking suggestions.

return (
<Host class={getIonMode(this)}>
<ion-list>
{this.header !== undefined && <ion-list-header>{this.header}</ion-list-header>}
{ (this.subHeader !== undefined || this.message !== undefined) &&
{header !== undefined && <ion-list-header>{header}</ion-list-header>}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
{header !== undefined && <ion-list-header>{header}</ion-list-header>}
{header ?? <ion-list-header>{header}</ion-list-header>}

Comment on lines +166 to +167
{subHeader !== undefined && <h3>{subHeader}</h3>}
{message !== undefined && <p>{message}</p>}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
{subHeader !== undefined && <h3>{subHeader}</h3>}
{message !== undefined && <p>{message}</p>}
{subHeader ?? <h3>{subHeader}</h3>}
{message ?? <p>{message}</p>}

{this.header !== undefined && <ion-list-header>{this.header}</ion-list-header>}
{ (this.subHeader !== undefined || this.message !== undefined) &&
{header !== undefined && <ion-list-header>{header}</ion-list-header>}
{ (subHeader !== undefined || message !== undefined) &&
Copy link
Contributor

Choose a reason for hiding this comment

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

Moving this to something like const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined; at the top of the render function makes the JSX cleaner to read, but that might just be my personal preference. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants