FEAT: Add autoHeight prop to ResultCard to allow wrapping long titles (#1455) - #2340
Open
Talha12Shiekh wants to merge 1 commit into
Open
FEAT: Add autoHeight prop to ResultCard to allow wrapping long titles (#1455)#2340Talha12Shiekh wants to merge 1 commit into
Talha12Shiekh wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Added a new
autoHeightprop toResultCard(and the styledCardcomponent) to allow displaying the full text of the title without truncation:Card.js): WhenautoHeightistrue, changes the card height from a hardcoded300pxtoautowith amin-heightfallback of300px.h2title element styles dynamically:white-space: normal(instead ofnowrap)overflow: visible(instead ofhidden)text-overflow: unset(instead ofellipsis)autoHeightdefinition inResultCard.propTypes,ResultCard.defaultProps, and theResultCard.d.tsTypeScript file.Linked Issues
ResultCard title truncation issue / show full text of the title when using reactivecard)Usage Example:
Checklist
Improvements to the Library Experience
Side Effects
autoHeightdefaults tofalseand cards keep their standard300pxheight with truncated titles).Testing
yarn build).