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(textbox): use 100% width on input for fluid variant #2405

Merged
merged 1 commit into from
Jul 30, 2024
Merged

fix(textbox): use 100% width on input for fluid variant #2405

merged 1 commit into from
Jul 30, 2024

Conversation

HenriqueLimas
Copy link
Member

Fixes #2404

  • This PR contains CSS changes
  • This PR does not contain CSS changes

Description

  • Added width: 100% for textbox--fluid variant on input element
  • Updated textbox fluid story with new structure

Notes

Screenshots

Before
Screenshot 2024-07-29 at 2 10 18 PM

After
Screenshot 2024-07-29 at 2 10 23 PM

Checklist

  • I verify the build is in a non-broken state
  • I verify all changes are within scope of the linked issue
  • I regenerated all CSS files under dist folder
  • I tested the UI in all supported browsers
  • I did a visual regression check of the components impacted by doing a Percy build and approved the build
  • I tested the UI in dark mode and RTL mode
  • I added/updated/removed Storybook coverage as appropriate

@HenriqueLimas HenriqueLimas self-assigned this Jul 29, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 29, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: fa8ef3a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@ebay/skin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

LuLaValva
LuLaValva previously approved these changes Jul 29, 2024
View reviewed changes
Copy link
Member

@LuLaValva LuLaValva left a comment

Choose a reason for hiding this comment

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

Thanks for the super fast fix @HenriqueLimas! Just one quick code style comment, and then I think we're good to merge.

src/sass/textbox/textbox.scss Outdated
@@ -244,4 +244,8 @@ textarea.textbox__control[readonly]:focus {

.textbox--fluid {
width: 100%;

& .textbox__control {
Copy link
Member

Choose a reason for hiding this comment

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

Typically in skin we avoid nesting whenever possible because it helps with scanability and searchability, would you mind separating this out into a separate selector?

.textbox--fluid .textbox__control {

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks, done

agliga
agliga reviewed Jul 29, 2024
View reviewed changes
Copy link
Contributor

@agliga agliga left a comment

Choose a reason for hiding this comment

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

Couple of comments:
Please target 13.1.0 for now. We will be releasing that version soon
Please make sure the docs/static file is not changing. It should not be.
Also add a changeset using npm run change
Thanks!

src/sass/textbox/textbox.scss Outdated
@@ -244,4 +244,8 @@ textarea.textbox__control[readonly]:focus {

.textbox--fluid {
width: 100%;

& .textbox__control {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we do

.textbox--fluid,
.textbox--fluid .textbox__control {

instead?
This way its easier to read in CSS inspector where the styles are coming from initially.

@HenriqueLimas
Copy link
Member Author

I suppose its 18.1.0, but currently this is breaking our mweb page, can we get it earlier? How much soon this is?

@agliga
Copy link
Contributor

agliga commented Jul 29, 2024

I suppose its 18.1.0, but currently this is breaking our mweb page, can we get it earlier? How much soon this is?

Tomorrow probably

@agliga agliga changed the base branch from master to 18.1.0 July 30, 2024 03:00
@agliga agliga merged commit d67e8ea into 18.1.0 Jul 30, 2024
@agliga agliga deleted the fix-textbox-width branch July 30, 2024 03:01
This was referenced Jul 29, 2024
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@agliga agliga agliga approved these changes

@LuLaValva LuLaValva LuLaValva left review comments

Assignees

@HenriqueLimas HenriqueLimas

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

textbox: Width of the input not respecting the container size
3 participants
@HenriqueLimas @agliga @LuLaValva