gsoft-inc / sg-orbit

The design system for ShareGate web apps.
https://orbit.sharegate.design
Apache License 2.0
102 stars 37 forks source link

🐛 Illustration component as a child of a TileLink component automatically inheriting rounded corners #1215

Closed richard-karp closed 1 year ago

richard-karp commented 1 year ago

Describe the bug

When using a horizontal TileLink with an Illustration component, the Illustration has a border radius on all four corners

Steps to reproduce

TileLink component with an Illustration as a child.

Expected results

Only the two corners the two outer corners of the illustration, top and bottom left for horizontal or top left and top right for vertical, should be rounded

2023-05-15_14-02-29-0000

alexasselin008 commented 1 year ago

Reproductible demo in the documentation:

<TileLink orientation="horizontal">
    <Illustration backgroundColor="alias-accent-light">
        <Image src={Planet} width="100px" alt="Planet" />
    </Illustration>
    <Heading>Buy a ticket</Heading>
    <Content>
        Tickets are not refundable and not transferable. A confirmation email will be sent within
        the next few minutes
    </Content>
</TileLink>