n8design/htwoo

hoo-doccard styling issues with htwoo-react components

Closed this issue · 1 comments

bcameron1231 commented

Describe the bug
This may have come back from a previous bug? #21

Creating a document card using the HooCardImage, HooCardLocation, HooCardTitle components has a styling issue when the Location/Title values are really long.

What happens is, the HooCardImage doesn't grow with the container when the card properties push the container width

To Reproduce

Given that no HooDocumentCard control exists yet, create a document card following the Pattern Lab documentation, but use the new htwoo-react components for the image/location/title

  1. Document Card HTML
 <div className={`hoo-doccard`}>
        <HOOCardImage imageSource={<pathToImage>}/>
        <HOOCardLocation location="https://northpoleindustries.sharepoint.com/sites/WorkshopTemplate"/>
        <HOOCardTitle title="Workshop Template" />
    </div>

Expected behavior
When loading a DocumentCard, the location/title fields should either wrap/ellipsis or the HooCardImage should grow the container as these properties get longer.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: All
juliemturner commented

Bug fixed in version 0.0.0-pre-alpha-22