Skip to content
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

feat(range): add reference point for start position of range slider #25598

Merged
merged 20 commits into from
Jul 15, 2022

Conversation

sean-perkins
Copy link
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Developers are unable to specify a start position of the range bar. This prevents developers from having experiences where the start position may be fixed at "0", but have a min value of less than zero and a maximum value higher than zero.

For example, this is not possible:

Screen Shot 2022-07-08 at 3 41 47 PM

Issue URL: #24348

What is the new behavior?

  • Introduces barActiveStart property to enable developers to set the position the bar will begin from in the range slider (only available in single knob)

Does this introduce a breaking change?

  • Yes
  • No

Other information

This PR is in favor of #24399, will give co-authored-by credit when merging.

@github-actions github-actions bot added package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package labels Jul 8, 2022
@sean-perkins sean-perkins marked this pull request as ready for review July 9, 2022 02:04
@sean-perkins sean-perkins requested a review from a team as a code owner July 9, 2022 02:04
core/src/components/range/test/barActiveStart/index.html Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
@sean-perkins
Copy link
Contributor Author

Not sure why the accordion screenshot has a diff... going to add a task for that in our backlog and see if another run of updating the reference screenshots resolves it.

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

According to the design doc, "If [the floor value] falls outside [max and min], a console warning will be logged for the developer and floor will fall back to the min value specified."

The warning is there, but the floor does not fall back to the min value.

Example:

<ion-range
  class="ion-no-padding"
  min="-100"
  max="100"
  snaps="10"
  step="10"
  pin="true"
  bar-active-start="1000"
  value="0"
>
</ion-range>

core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
core/src/components/range/range.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Great job! Good to go once my remaining comment has been addressed.

packages/vue/src/proxies.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants