Fix layout shift in PricingOptions accordion (#1121)

* rework pricingoption accordion logic

* add visual snapshots

* add changeset

* rename a state variable

* copilot feedback

* remove redundant condition for narrow viewports

* add tests

Author: rezrah

.changeset/chilled-moles-remain.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Fix layout shift in the `PricingOptions` feature list accordion
+
+The feature lists now respect their explicit `expanded` prop values on the initial render, and no longer apply default animations. This prevents layout shift in certain SSR contexts where the component was incorrectly relying on the client-side `window` size even when explicitly passed `expanded={true}` or `expanded={false}`, which shouldn't depend on viewport size.

packages/react/src/PricingOptions/PricingOptions.features.stories.tsx

@@ -1129,3 +1129,38 @@ ExpandedTablet.parameters = {
     defaultViewport: 'ipad',
   },
 }
+
+export const HideFeatureListOnNarrowAndRegular: StoryFn<typeof PricingOptions> = () => {
+  return (
+    <PricingOptions>
+      <PricingOptions.Item>
+        <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
+        <PricingOptions.Description>
+          Code completions, Chat, and more for indie developers and freelancers.
+        </PricingOptions.Description>
+        <PricingOptions.Price trailingText="per month / $100 per year">10</PricingOptions.Price>
+        <PricingOptions.FeatureList expanded={{narrow: false, regular: false, wide: true}}>
+          <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+          <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+          <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+          <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
+        </PricingOptions.FeatureList>
+        <PricingOptions.Footnote>
+          Free for verified students, teachers, and maintainers of popular open source projects.
+        </PricingOptions.Footnote>
+        <PricingOptions.PrimaryAction as="a" href="#">
+          Start a free trial
+        </PricingOptions.PrimaryAction>
+      </PricingOptions.Item>
+    </PricingOptions>
+  )
+}
+HideFeatureListOnNarrowAndRegular.storyName = 'Hide feature list on all viewports except wide'
+
+export const HideFeatureListOnNarrowAndRegularNarrow = () => <HideFeatureListOnNarrowAndRegular />
+HideFeatureListOnNarrowAndRegularNarrow.parameters = {
+  viewport: {
+    defaultViewport: 'iphonexr',
+  },
+}
+HideFeatureListOnNarrowAndRegularNarrow.storyName = 'Hide feature list on all viewports except wide (narrow)'

packages/react/src/PricingOptions/PricingOptions.module.css

@@ -444,3 +444,7 @@
 .PricingOptions__feature-list-accordion[open] .PricingOptions__feature-list-accordion-chevron {
   transform: rotate(180deg);
 }
+
+.PricingOptions__feature-list-accordion-content {
+  animation: none !important;
+}