Skip to content

Conversation

joaoGabriel55
Copy link
Contributor

@joaoGabriel55 joaoGabriel55 commented May 27, 2022

What does this PR do?

Fixed issue #6153 which consists of allowing to reverse icon in DateInput.

Where should the reviewer start?

Just access:

http://localhost:9001/?path=/story/input-dateinput-format--format

What testing has been done on this PR?

Unit test to Match Snapshot.

How should this be manually tested?

It is not necessary

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • userEvent is used in place of fireEvent.
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

No

What are the relevant issues?

No

Screenshots

image

Do the grommet docs need to be updated?

Yes, to add the new DateInput prop, reverse

Should this PR be mentioned in the release notes?

No

Is this change backwards compatible or is it a breaking change?

No

Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Just a few notes:

  • We should support both passing the reverse prop through inputProps and having the reverse prop on DateInput. Ideally just using the reverse prop is preferred but we need to support passing reverse through inputProps for backwards compatibility since we supported this in the past. See https://github.com/grommet/grommet/pull/6160/files for a similar discussion about the icon prop on DateInput.

  • When the icon is on the left side of DateInput the tab order is messed up. The focus moves first to the input and then the icon. It should move to the icon first and then the input since that is how it is visually ordered.

Copy link
Contributor

@amandadupell amandadupell left a comment

Choose a reason for hiding this comment

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

looks good to me! tab order goes from icon to input, following logical order. allows for reverse prop and passing in via inputProps for backwards compatibility

Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Coming along nicely, just a few comments

@joaoGabriel55 joaoGabriel55 force-pushed the feat/allow-to-reverse-icon-in-DateInput branch from 3042aa4 to 5f25beb Compare June 7, 2022 12:21
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Looks good!

@jcfilben jcfilben requested a review from ericsoderberghp June 7, 2022 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants