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(text-area): allow wrapper to span the full width of its container #4995

Merged
merged 8 commits into from
Jan 13, 2020
Merged

fix(text-area): allow wrapper to span the full width of its container #4995

merged 8 commits into from
Jan 13, 2020

Conversation

jendowns
Copy link
Contributor

@jendowns jendowns commented Jan 9, 2020

Closes #4994

Set the TextArea wrapper to width: 100% so that it can span the full width of its container (like the TextInput does).

Changelog

New

  • add width: 100% style rule to TextArea wrapper

@jendowns jendowns requested a review from a team as a code owner January 9, 2020 21:49
@jendowns jendowns mentioned this pull request Jan 9, 2020
Closed
2 tasks
@jendowns jendowns changed the title fix(text-area): set wrapper to width:100% to span container fix(text-area): allow wrapper to span the full width of its container Jan 9, 2020
@netlify
Copy link

netlify bot commented Jan 9, 2020 •
edited
Loading

Deploy preview for the-carbon-components ready!

Built with commit 2439534

https://deploy-preview-4995--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Jan 9, 2020 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit 2439534

https://deploy-preview-4995--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Jan 9, 2020 •
edited
Loading

Deploy preview for carbon-components-react failed.

Built with commit 2439534

https://app.netlify.com/sites/carbon-components-react/deploys/5e1cce5f88088b0008b2fb55

asudoh
asudoh approved these changes Jan 9, 2020
View reviewed changes
Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

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

LGTM 👍 - Thanks @jendowns!

@asudoh asudoh requested review from a team and jeanservaas and removed request for a team January 9, 2020 22:54
tw15egan
tw15egan approved these changes Jan 9, 2020
View reviewed changes
Copy link
Member

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

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

👍

@abbeyhrt
Copy link
Contributor

@jendowns, thank you for doing this! This might be the intended effect here but the TextArea for the storybook example is now spanning the whole page
Screen Shot 2020-01-10 at 11 08 35 AM

@jendowns
Copy link
Contributor Author

@abbeyhrt Yeah now I believe it is super similar to the TextInput story for example, which I believe also spans the whole page. But I can add a width to the story if you prefer that?

@abbeyhrt
Copy link
Contributor

@jendowns Gotcha, thanks for clarifying!

@jeanservaas
Copy link
Contributor

hey @jendowns can you just provide a screen grab of what is changing? I looked at the preview link, but I'm not really sure what's different. Thanks!

@jendowns
Copy link
Contributor Author

jendowns commented Jan 13, 2020 •
edited
Loading

Hey @jeanservaas - no problem!

Currently, the TextArea component does not span the full width of its parent.
If you go to the current React storybook deployment, you can see that the TextArea appears to be about 467 pixels wide but actually it should be much wider, because its parent container is width: 100% -- http://react.carbondesignsystem.com/?path=/story/textarea--default
Screen Shot 2020-01-13 at 8 51 37 AM

So this change shown in the PR deployment makes the TextArea truly expand to fill the available space: https://deploy-preview-4995--carbon-components-react.netlify.com/?path=/story/textarea--default
Screen Shot 2020-01-13 at 8 51 27 AM

jeanservaas
jeanservaas approved these changes Jan 13, 2020
View reviewed changes
Copy link
Contributor

@jeanservaas jeanservaas left a comment

Choose a reason for hiding this comment

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

lgtm!

@tw15egan tw15egan merged commit 91d37e9 into carbon-design-system:master Jan 13, 2020
joshblack added a commit to joshblack/carbon that referenced this pull request Jan 23, 2020
@jendowns @joshblack
@tw15egan @jeanservaas
fix(text-area): set wrapper to width:100% to span container (carbon-d…
30dcf42 
…esign-system#4995)

Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>
@joshblack joshblack mentioned this pull request Jan 23, 2020
Closed
@tw15egan tw15egan mentioned this pull request Jan 28, 2020
Closed
@joshblack joshblack mentioned this pull request Jan 31, 2020
Closed
@joshblack joshblack mentioned this pull request Feb 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@asudoh asudoh asudoh approved these changes

@joshblack joshblack joshblack approved these changes

@tw15egan tw15egan tw15egan approved these changes

@abbeyhrt abbeyhrt abbeyhrt approved these changes

@jeanservaas jeanservaas jeanservaas approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

TextArea react component not inheriting the width from it's container
6 participants
@jendowns @abbeyhrt @jeanservaas @asudoh @joshblack @tw15egan