diff --git a/.changeset/fuzzy-years-smile.md b/.changeset/fuzzy-years-smile.md new file mode 100644 index 000000000..543296654 --- /dev/null +++ b/.changeset/fuzzy-years-smile.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Fixed the `Hero` image border radius when rendering a `picture` element. diff --git a/packages/react/src/Hero/Hero.images-videos.stories.tsx b/packages/react/src/Hero/Hero.images-videos.stories.tsx index 4b2db77e3..ae2989f37 100644 --- a/packages/react/src/Hero/Hero.images-videos.stories.tsx +++ b/packages/react/src/Hero/Hero.images-videos.stories.tsx @@ -41,6 +41,31 @@ export const WithImageBlockEndDefault: Story = { ), } +export const WithPictureBlockEndDefault: Story = { + name: 'Picture (left + bottom)', + render: () => ( + + + + Label + This is my super sweet hero heading + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed + turpis felis nam pulvinar risus elementum. + + Primary action + + + + + ), +} + export const WithImageBlockEndCenter: Story = { name: 'Image (centered + bottom)', render: () => ( diff --git a/packages/react/src/Hero/Hero.module.css b/packages/react/src/Hero/Hero.module.css index 4f067cef9..139bd7d79 100644 --- a/packages/react/src/Hero/Hero.module.css +++ b/packages/react/src/Hero/Hero.module.css @@ -67,6 +67,10 @@ width: 100%; } +.Hero-image > img { + border-radius: inherit; +} + .Hero-mediaContainer { width: 100%; height: 100%; diff --git a/packages/react/src/Hero/Hero.visual.spec.ts b/packages/react/src/Hero/Hero.visual.spec.ts index 6e757cd02..9dc559ef6 100644 --- a/packages/react/src/Hero/Hero.visual.spec.ts +++ b/packages/react/src/Hero/Hero.visual.spec.ts @@ -474,6 +474,17 @@ test.describe('Visual Comparison: Hero', () => { await expect(page).toHaveScreenshot({fullPage: true}) }) + test('Hero / Picture (left + bottom)', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-hero-features-images-and-videos--with-picture-block-end-default&viewMode=story', + {waitUntil: 'networkidle'}, + ) + await page.locator('body.sb-show-main').waitFor({state: 'visible'}) + + await page.waitForTimeout(500) + await expect(page).toHaveScreenshot({fullPage: true}) + }) + test('Hero / Image (centered + bottom)', async ({page}) => { await page.goto( 'http://localhost:6006/iframe.html?args=&id=components-hero-features-images-and-videos--with-image-block-end-center&viewMode=story', diff --git a/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Picture-left-bottom-1-darwin.png b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Picture-left-bottom-1-darwin.png new file mode 100644 index 000000000..5b8a98776 Binary files /dev/null and b/packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-Picture-left-bottom-1-darwin.png differ