feat(picker): add inline picker #28689
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BREAKING CHANGE: `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
… ion-picker-column (#28589)
Issue number: # --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - - - ## Does this introduce a breaking change? - [ ] Yes - [ ] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Liam DeBeasi <[email protected]> Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: ionitron <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Sean Perkins <[email protected]> Co-authored-by: Éric Le Maître <[email protected]> Co-authored-by: Shawn Taylor <[email protected]>
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The new picker component does not have a counterpart for the `prefix` and `suffix` properties on the old picker column. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `prefix` and `suffix` slots added. - Picker items wrapped in a new `.picker-opts` element for positioning purposes, similar to the legacy picker column. This necessitated additional changes to functionality and styling, since previously the items were direct descendants of the host. - New `setFocus` method added. This gets around a browser bug in Firefox where calling `focus()` on the column doesn't correctly move focus, as the nearest focusable element (`.picker-opts`) is in the shadow DOM. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> While you can no longer call `focus()` on the column in Firefox and must use `setFocus()` instead, this isn't considered a breaking change because this component isn't public API yet. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <[email protected]>
Issue number: N/a --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The team would like to add a way of using the picker inline with page content. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - This PR integrates the column option component with the rest of the picker so that is functional. This PR is a combination of commits from previously reviewed PRs. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <[email protected]>
Issue number: N/A
---------
## What is the current behavior?
Picker has the following CSS variables for styling:
`--wheel-fade-background-rgb` and `--wheel-highlight-background`
These variables make sense when used from `ion-datetime`, but picker
does not need the `wheel` prefix.
## What is the new behavior?
### Datetime
- Adds `--wheel-highlight-border-radius`
- Keeps `--wheel-fade-background-rgb` and `--wheel-highlight-background`
- Assigns these variables to picker's new variables
```scss
ion-picker {
--highlight-background: var(--wheel-highlight-background);
--highlight-border-radius: var(--wheel-highlight-border-radius);
--fade-background-rgb: var(--wheel-fade-background-rgb);
}
```
### Picker
Renames `--wheel-fade-background-rgb` and `--wheel-highlight-background`
and adds another CSS variables to `ion-picker`:
- Renames `--wheel-fade-background-rgb` to `--fade-background-rgb`
- Renames `--wheel-highlight-background` to `--highlight-background`
- Adds `--highlight-border-radius`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
PR to update the [Datetime docs](ionic-team/ionic-docs#3303)
---------
Co-authored-by: ionitron <[email protected]>
github-actions
bot
added
package: core
liamdebeasi
requested review from
averyjohnston,
sean-perkins,
thetaPC and
a team
as code owners
averyjohnston
suggested changes
Dec 12, 2023
averyjohnston
approved these changes
Dec 13, 2023
This was referenced Dec 13, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: resolves #24905, resolves #26840, resolves #15710
What is the current behavior?
The current picker is only displayed as an overlay which makes it impossible to use inline with the rest of the application. Additionally, there are several bugs and missing features. For example, it is impossible to know when the value of the picker column has changed using public APIs. This is valuable for updating other columns in response to that data.
What is the new behavior?
ion-pickeras an inline wheel picker component. The overlay picker is still available usingion-picker-legacy.ionChangeevent for developers to listen for.Does this introduce a breaking change?
Other information
Dev-build:
7.5.8-dev.11702398696.1ab62ea9