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

fix(Input): fix misalignment and styling states #10989

Merged
merged 11 commits into from
Sep 29, 2023
Merged

fix(Input): fix misalignment and styling states #10989

merged 11 commits into from
Sep 29, 2023

Conversation

TylerAPfledderer
Copy link
Contributor

@TylerAPfledderer TylerAPfledderer commented Aug 23, 2023 •
edited
Loading

cc @nloureiro

Description

This PR primarily addresses the misalignment of the Input component field, and in addition fixes minor styling issues in the theme.

  • Per the latest DS, removes the left-side icon.
    • Also reworks the prop usage and typing for the right-side icon
  • Misalignment issue came from updating Chakra to the latest version, where there was a breaking change in the default theme. For the size options, height of the input field needed to be declared with a CSS Var used in the default theme so padding can be appropriately set through the InputGroup when an icon is rendered.
  • Both input sizes now have matching left/right padding
  • Fixed issue with border color of the input field on hover still changing on disabled state, and no border color change on hover occurring with inputs that do not have an icon.

Related Issue

Closes #10740

@gatsby-cloud
Copy link

gatsby-cloud bot commented Aug 23, 2023 •
edited
Loading

✅ ethereum-org-website-dev deploy preview ready

pettinarip
pettinarip requested changes Aug 28, 2023
View reviewed changes
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

Nice, thanks @TylerAPfledderer

The input used in the languages page is not showing the close button for some reason:
image

@github-actions github-actions bot added the content 🖋️ This involves copy additions or edits label Aug 29, 2023
pettinarip
pettinarip requested changes Aug 29, 2023
View reviewed changes
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

@TylerAPfledderer now it is showing the close button in the languages input but once you press the first key, it loses focus and you can't keep typing

Peek.2023-08-29.11-37.mp4

@TylerAPfledderer
Copy link
Contributor Author

TylerAPfledderer commented Aug 30, 2023 •
edited
Loading

@TylerAPfledderer now it is showing the close button in the languages input but once you press the first key, it loses focus and you can't keep typing
Peek.2023-08-29.11-37.mp4

@pettinarip needed to persist the rendering of the close button in the DOM and hide it by using the display prop.

This maintains the rendering of the InputGroup wrap in the Input. Previously, if there was no value in the field, only the Input component renders. And if you began to type, the component had to rerender with the InputGroup and thereby lose focus.

TylerAPfledderer
TylerAPfledderer commented Sep 18, 2023
View reviewed changes
docs/ds-implementation.md Outdated
├── index.tsx
├── ComponentA.stories.tsx
└── // Any other files as applicable (utils, child components, useHook, etc.)
└── ComponentA/
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Formatting regression that bled through the diff

pettinarip
pettinarip reviewed Sep 26, 2023
View reviewed changes
src/components/Input/index.tsx
Comment on lines +25 to 29
type InputProps = NoIconProps | WithIconProps

function Input(props: NoIconProps): JSX.Element
function Input(props: WithIconProps): JSX.Element
function Input(props: InputProps) {
Copy link
Member

Choose a reason for hiding this comment

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

Interesting. What would be the benefit of doing this overload? since function Input(props: InputProps) already handles both cases NoIconProps | WithIconProps.

pettinarip
pettinarip approved these changes Sep 26, 2023
View reviewed changes
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

Looks great @TylerAPfledderer 🎉

@pettinarip pettinarip merged commit 1022068 into ethereum:dev Sep 29, 2023
3 of 4 checks passed
@TylerAPfledderer TylerAPfledderer deleted the fix/input-misalignment branch September 29, 2023 18:08
This was referenced Oct 4, 2023
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nloureiro nloureiro nloureiro approved these changes

@pettinarip pettinarip pettinarip approved these changes

@samajammin samajammin Awaiting requested review from samajammin

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

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

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

@jmcook1186 jmcook1186 Awaiting requested review from jmcook1186

@nhsz nhsz Awaiting requested review from nhsz

Assignees
No one assigned
Labels
content 🖋️ This involves copy additions or edits
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DS implementation: Input's placeholder misalignment
3 participants
@TylerAPfledderer @pettinarip @nloureiro