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

fix(code-snippet): set max-height to 100% and add bottom padding to expanded multi-line #4915

Merged
merged 3 commits into from
Dec 18, 2019
Merged

fix(code-snippet): set max-height to 100% and add bottom padding to expanded multi-line #4915

merged 3 commits into from
Dec 18, 2019

Conversation

jendowns
Copy link
Contributor

Closes #4903

The problem identified in #4903 is caused by a fixed max-height being set on the expanded multi-line code snippet. While this max-height is very large, there are situations where a code snippet may be even longer and would therefore be cut off.

This PR proposes making the max-height of an expanded multi-line code snippet 100%, so that all expanded snippets can be fully visible no matter how long they are. I don't think there's a reason to cut off this text (even with a scroll) when a user chooses to expand the snippet to see entire snippet.

I also added some bottom padding to this container because I noticed that the "Show more"/"Show less" button was overlapping the last line of code.

Changelog

New

  • add bottom padding to the expanded multi-line snippet (so as not to cover last line of code when button)

Changed

  • change max-height of expanded multi-line snippet to 100%

Removed

  • {{removed thing}}

Testing / Reviewing

To test this, I used the Cupcake Ipsum generator to create 50 long paragraph of text to place into the multi-line code snippet. I suggest using that generator (not copy + pasting text repeatedly) or a similar generator so that it's easier to tell that the component is showing ALL available text when you expand it.

@jendowns jendowns requested a review from a team as a code owner December 18, 2019 17:26
@ghost ghost requested review from emyarod and joshblack December 18, 2019 17:27
@jendowns jendowns changed the title fix(code-snippet): maxheight 100% for expanded multi and add padding fix(code-snippet): set max-height to 100% and add bottom padding to expanded multi-line Dec 18, 2019
@netlify
Copy link

netlify bot commented Dec 18, 2019

Deploy preview for the-carbon-components ready!

Built with commit b5ec8c5

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

@netlify
Copy link

netlify bot commented Dec 18, 2019

Deploy preview for carbon-elements ready!

Built with commit b5ec8c5

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

@netlify
Copy link

netlify bot commented Dec 18, 2019

Deploy preview for carbon-components-react failed.

Built with commit b5ec8c5

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CodeSnippet with type="multi" truncates strings with many lines after clicking "Show more"
4 participants