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

🪟 🎨 🧹 Migrate Input and TextArea to SCSS #16378

Merged
merged 8 commits into from
Sep 8, 2022

Conversation

edmundito
Copy link
Contributor

@edmundito edmundito commented Sep 6, 2022

What

Related to #15791

Migrates Input and TextArea to SCSS and adds Storybook. The styles are kept as they were before exactly instead of applying any updates that my mismatch the current Figma design (this may be done as a separate PR in the future.)

How

  • Updates the color names
  • Add storybook

Recommended reading order

Top to bottom

Tests

  • Ensured that disabled, light, error, and password states behave as expected

@edmundito edmundito added the area/frontend Related to the Airbyte webapp label Sep 6, 2022
@edmundito edmundito requested a review from a team as a code owner September 6, 2022 20:47
@github-actions github-actions bot added the area/platform issues related to the platform label Sep 6, 2022
@edmundito edmundito changed the title Migrate Input and TextArea to SCSS 🪟 🎨 🧹 Migrate Input and TextArea to SCSS Sep 6, 2022
@edmundito edmundito force-pushed the edmundito/cleanup-input-components branch from f7a98d5 to 55e3a63 Compare September 7, 2022 17:44
Copy link
Contributor

@krishnaglick krishnaglick left a comment

Choose a reason for hiding this comment

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

Only one issue I found, LGTM otherwise!

{isVisibilityButtonVisible ? (
<VisibilityButton
<Button
Copy link
Contributor

Choose a reason for hiding this comment

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

Replacing button looks like it's going to be fun

Copy link
Contributor

@krishnaglick krishnaglick left a comment

Choose a reason for hiding this comment

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

Tested locally, LGTM.
Feels a little strange that Light does something different on Inputs vs Textareas.

@edmundito
Copy link
Contributor Author

@krishnaglick the design of these two needs to be revisited so that they're consistent and match Figma. For now, the goal was to do a bit of cleanup.

@edmundito edmundito merged commit a198fcd into master Sep 8, 2022
@edmundito edmundito deleted the edmundito/cleanup-input-components branch September 8, 2022 18:28
robbinhan pushed a commit to robbinhan/airbyte that referenced this pull request Sep 29, 2022
* Migrate TextArea component to SCSS and add Storybook

* Move Input styles to SCSS, add Storybook

* Fix Input stylelint issues

* Fix hover selector on Input container to avoid hovering on focus

* Fix Input focus test by using style file

* Add missing & to Textarea style

* Fix styleint inssue in Input

* Move input testid before props
jhammarstedt pushed a commit to jhammarstedt/airbyte that referenced this pull request Oct 31, 2022
* Migrate TextArea component to SCSS and add Storybook

* Move Input styles to SCSS, add Storybook

* Fix Input stylelint issues

* Fix hover selector on Input container to avoid hovering on focus

* Fix Input focus test by using style file

* Add missing & to Textarea style

* Fix styleint inssue in Input

* Move input testid before props
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants