Skip to content

FEAT: Add autoHeight prop to ResultCard to allow wrapping long titles (#1455) - #2340

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/result-card-auto-height
Open

FEAT: Add autoHeight prop to ResultCard to allow wrapping long titles (#1455)#2340
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/result-card-auto-height

Conversation

@Talha12Shiekh

Copy link
Copy Markdown

Proposed Changes

Added a new autoHeight prop to ResultCard (and the styled Card component) to allow displaying the full text of the title without truncation:

  1. Flexible Height (Card.js): When autoHeight is true, changes the card height from a hardcoded 300px to auto with a min-height fallback of 300px.
  2. Text wrapping: Changes the card's h2 title element styles dynamically:
    • white-space: normal (instead of nowrap)
    • overflow: visible (instead of hidden)
    • text-overflow: unset (instead of ellipsis)
  3. Types & Prop Contracts: Added autoHeight definition in ResultCard.propTypes, ResultCard.defaultProps, and the ResultCard.d.ts TypeScript file.

Linked Issues

Usage Example:

<ResultCard autoHeight={true}>
  <ResultCard.Image src={item.image} />
  <ResultCard.Title>{item.title}</ResultCard.Title> {/* Wraps long title to next line */}
  <ResultCard.Description>{item.description}</ResultCard.Description>
</ResultCard>

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • Developer Layout Control: Gives developers control to easily show full item titles in search cards without forcing custom item renderers or CSS override hacks.

Side Effects

  • None. Default behavior remains unchanged (autoHeight defaults to false and cards keep their standard 300px height with truncated titles).

Testing

  • Verified successful compilation with Babel (yarn build).

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Increase the length of text on the reactivecard component

1 participant