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

[KOA-6197] Add BpkNudgerRow component #2926

Merged
merged 4 commits into from
Jul 21, 2023
Merged

[KOA-6197] Add BpkNudgerRow component #2926

merged 4 commits into from
Jul 21, 2023

Conversation

anambl
Copy link
Contributor

@anambl anambl commented Jul 20, 2023

BpkNudgerRow is a new component made up of the BpkNudger and BpkLabel.
If you are using BpkNudger together with a label, consider migrating to BpkNudgerRow to inherit the accessible structure and styling of the component :accessibility:

The API is almost entirely the same as the BpkNudger API for an easy migration:

  • Remove the label component and instead pass the title and subtitle props accordingly.
  • Replace the id prop with nudgerId.

That is all! Here's an easy migration example:

<div>
  <BpkLabel id="passenger-label" htmlFor={id} className={labelClassName}>
      Number of passengers
  </BpkLabel>
  <BpkNudger
      aria-labelledby="passenger-label"
      id={id}
      min={1}
      max={10}
      value={value}
      onChange={handleChange}
      decreaseButtonLabel="Remove passenger"
      increaseButtonLabel="Add passenger"
      buttonType={buttonType}
   />
</div>

to

<div>
  <BpkNudgerRow
      nudgerId={id}
      min={1}
      max={10}
      value={value}
      onChange={handleChange}
      decreaseButtonLabel="Remove passenger"
      increaseButtonLabel="Add passenger"
      title="Number of passengers"
    />
</div>

Remember to include the following changes:

  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@anambl anambl added the minor Non breaking change label Jul 20, 2023
@github-actions
Copy link

github-actions bot commented Jul 20, 2023

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 4250d35

@github-actions
Copy link

Visit https://backpack.github.io/storybook-prs/2926 to see this build running in a browser.

@github-actions
Copy link

Visit https://backpack.github.io/storybook-prs/2926 to see this build running in a browser.

@anambl anambl marked this pull request as ready for review July 20, 2023 15:46
@github-actions
Copy link

Visit https://backpack.github.io/storybook-prs/2926 to see this build running in a browser.

Copy link
Member

@olliecurtis olliecurtis left a comment

Choose a reason for hiding this comment

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

LGTM!

@anambl anambl merged commit 0f6001e into main Jul 21, 2023
7 checks passed
@anambl anambl deleted the KOA-6197 branch July 21, 2023 15:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Non breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants