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.

Sign up for GitHub

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

Jump to bottom

NumberControl: Fix invalid HTML attributes for infinite bounds #69033

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

NumberControl: Fix invalid HTML attributes for infinite bounds #69033

wants to merge 2 commits into from
+2 −2

Conversation

Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Feb 4, 2025 •
edited
Loading

Closes: #69022

What?

Fixes invalid HTML attributes in the NumberControl component where min="-Infinity" and max="Infinity" are being rendered.

Why?

The NumberControl component currently uses JavaScript's Infinity and -Infinity values as HTML attributes for min and max, which is invalid according to the HTML. It requires min and max attributes to have valid floating-point numbers as values.

How?

Modified the NumberControl component to omit the min/max attributes entirely when their values are infinite by using undefined:

Testing Instructions

  1. Run storybook by following command:
npm run storybook:dev
  1. Go to Number Control component
  2. Inspect the source and observe the max and min attribute of input field.

Screencast:

Screen.Recording.2025-02-05.at.10.45.58.AM.mov

@Infinite-Null Infinite-Null marked this pull request as ready for review February 5, 2025 05:18
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 5, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: hbhalodia <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: afercia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

hbhalodia
hbhalodia requested changes Feb 5, 2025
View reviewed changes
Copy link
Contributor

@hbhalodia hbhalodia left a comment

Choose a reason for hiding this comment

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

Left some suggestion.

packages/components/src/number-control/index.tsx Outdated
Comment on lines 232 to 233
min={ min === -Infinity ? undefined : min }
max={ max === Infinity ? undefined : max }
Copy link
Contributor

Choose a reason for hiding this comment

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

Why prop position changed? Can you please update to use max first and min later?

Copy link
Contributor Author

@Infinite-Null Infinite-Null Feb 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Thank you for the feedback, I've updated the PR to maintain consistent prop ordering.

@Infinite-Null
Copy link
Contributor Author

Hi @hbhalodia,

I have implemented the changes and requested for review. Please review it at your convince.
Thank You!

hbhalodia
hbhalodia approved these changes Feb 5, 2025
View reviewed changes
Copy link
Contributor

@hbhalodia hbhalodia left a comment

Choose a reason for hiding this comment

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

LGTM! as per the screencast attached.

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Feb 9, 2025
@Mamaduka
Copy link
Member

Mamaduka commented Feb 9, 2025

cc @WordPress/gutenberg-components

@mirka
Copy link
Member

mirka commented Feb 10, 2025

Thanks! Looks good to merge with a changelog entry 👍

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

@hbhalodia hbhalodia hbhalodia approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

NumberControl: Infinity isn't a valid value for min and max
4 participants
@Infinite-Null @Mamaduka @mirka @hbhalodia