Remove global display block to img

.changeset/calm-scrolls-rest.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed the global reset so smooth scrolling is disabled consistently when users prefer reduced motion.

.changeset/fresh-images-flow.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': minor
+---
+
+Removed the global `block` layout applied to `img` and `picture` elements to prevent overriding of default inline behavior.
+
+To minimize regressions, `block` has been applied to image elements at a component level instead.
+
+⚠️ If you previously relied on the `block` styling to images via our `reset.css`, please apply them manually yourself in your application code.

packages/react/src/Avatar/Avatar.module.css

@@ -14,6 +14,7 @@
 }
 
 .Avatar__image {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;

packages/react/src/EyebrowBanner/EyebrowBanner.module.css

@@ -41,6 +41,11 @@
   max-height: var(--base-size-44);
 }
 
+.EyebrowBanner__leadingVisual img,
+.EyebrowBanner__leadingVisual picture {
+  display: block;
+}
+
 .EyebrowBanner__trailingVisual {
   display: flex;
 }

packages/react/src/LogoSuite/LogoSuite.module.css

@@ -69,6 +69,10 @@
   height: var(--base-size-32);
 }
 
+.LogoSuite__logobar img {
+  display: block;
+}
+
 .LogoSuite__logobar--variant-muted svg,
 .LogoSuite__logobar--variant-muted path {
   fill: var(--brand-LogoSuite-color-logo-muted);

packages/react/src/MinimalFooter/MinimalFooter.module.css

@@ -77,6 +77,7 @@
 }
 
 .Footer__social-icon {
+  display: block;
   width: 24px;
   height: auto;
 }

packages/react/src/Testimonial/Testimonial.module.css

@@ -134,6 +134,10 @@
   margin-top: var(--base-size-24);
 }
 
+.Testimonial-logo-image {
+  display: block;
+}
+
 .Testimonial--size-large .Testimonial__media {
   margin-top: var(--base-size-64);
 }

packages/react/src/Testimonial/Testimonial.module.css.d.ts

@@ -9,6 +9,7 @@ declare const styles: {
   readonly "Testimonial-caption": string;
   readonly "Testimonial-from": string;
   readonly "Testimonial-link": string;
+  readonly "Testimonial-logo-image": string;
   readonly "Testimonial-quote": string;
   readonly "Testimonial__media": string;
   readonly "Testimonial__quoteMark": string;

packages/react/src/css/reset.css

@@ -33,11 +33,19 @@ ol[role='list'] {
   list-style: none;
 }
 
-/* Set core root defaults */
+/* Set core root scrolling behavior */
+html,
 html:focus-within {
   scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html,
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+}
+
 /* Set core body defaults */
 body {
   min-height: 100vh;
@@ -53,7 +61,6 @@ a:not([class]) {
 img,
 picture {
   max-width: 100%;
-  display: block;
 }
 
 /* Inherit fonts for inputs and buttons */
@@ -63,14 +70,3 @@ textarea,
 select {
   font: inherit;
 }
-
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-}
-
-html {
-  scroll-behavior: smooth;
-}

packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css

@@ -42,6 +42,7 @@
 }
 
 .RiverStoryScroll__image {
+  display: block;
   margin-left: auto;
   margin-right: auto;
   width: auto;

packages/react/src/river/river-shared.module.css

@@ -34,6 +34,10 @@
   order: 2;
 }
 
+.River__visual :is(img, picture) {
+  display: block;
+}
+
 .River__visual--fill-media img,
 .River__visual--fill-media picture,
 .River__visual--fill-media video {