@primer/[email protected]

Minor Changes

• #939 7f0a119 Thanks @joshfarrant! - - Added a new RiverAccordion component.

  Usage example:

  <RiverAccordion>
    <RiverAccordion.Item>
      <RiverAccordion.Heading>A Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  
    <RiverAccordion.Item>
      <RiverAccordion.Heading>Another Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  
    <RiverAccordion.Item>
      <RiverAccordion.Heading>One More Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  </RiverAccordion>

  🔗 See the documentation for more usage examples

  • Fixed a bug in the Heading component where the component would be re-mounted each render, causing it to lose focus when used inside a focusable element.

Patch Changes

• #974 aea5ea4 Thanks @rezrah! - Removed clsx as a library dependency. Now treated as devDependency.

• #966 25db725 Thanks @joshfarrant! - Fixed a bug with the SubNav component where the SubNav.Heading and the current SubNav.Link were vertically misaligned in Safari on mobile viewports.

• #971 9de3349 Thanks @rezrah! - Fixed border radius inconsistency in the River component where picture elements were only showing rounded corners at the top but not the bottom.

• #973 c2d5b34 Thanks @rezrah! - Fixed type definitions for PricingOptions.Label. Now inclusive of all props in Label.

• #967 b1ff17b Thanks @danielguillan! - Added spacing between the label and the arrow in the next and previous links in Pagination.

• #965 9fdf1bf Thanks @rezrah! - Added a hasBorder prop to Testimonial component. Use hasBorder={false} to remove the default border applied by certain variant options.

  <Testimonial variant="default" hasBorder={false} />

• #967 b1ff17b Thanks @danielguillan! - Added a new isExternal prop to Link to display an external link icon.

  E.g.,

  <Link href="https://github.com" isExternal>
    My external link
  </Link>

• #971 9de3349 Thanks @rezrah! - River headings and body text now have a maximum width of 400px on default 50:50 layouts.

• #971 9de3349 Thanks @rezrah! - Fixed border radius inconsistency in the Card component where picture elements were only showing rounded corners at the top but not the bottom.

• #960 1203906 Thanks @rezrah! - Updating various project dependencies.

  No planned changes to Primer Brand component APIs, although minor visual changes to certain icons could be visible due to an internal update of the Primer Octicons dependency.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #955 2daaff8 Thanks @rezrah! - Button arrows are now hidden by default for all variants except subtle as part of a Core Brand refresh.

  To optionally re-enable arrows, use the hasArrow prop.

  <Button variant="primary" hasArrow>
    Learn more
  </Button>

Patch Changes

• #958 3b391a5 Thanks @rezrah! - Updates to PricingOptions component:

  • New center-aligned layout available via align prop.
  • Added support for 4 pricing options. Previous maximum of 3.
  • Removed heading level constraint to as prop in PricingOptions.Heading. Now accepts all heading levels, while retaining the previous h3 default.
  • Added accordionAsprop to PricingOptions.FeatureList for granular control over heading size.
  • All pricing items under 1011px now have a max width and centered positioning
  • Fixed layout alignment bug when trailing text is not present under price.
  • Fixed layout bug when footnote contains an inline link.

• #955 2daaff8 Thanks @rezrah! - Visual update to subtle button variants. Borders on hover interactions have been replaced with a solid background color.

• #955 2daaff8 Thanks @rezrah! - Added new accent button variant.

  <Button variant="accent">Register now</Button>

  🔗 See documentation for design guidelines and usage examples

• #955 2daaff8 Thanks @rezrah! - Increased content spacing on wide breakpoints in CTABanner from 16px to 32px

• #957 fbe8f17 Thanks @rezrah! - Added an align prop to the Card component with start (default) or center alignment options. Refer to our documentation for examples on when the latter should be used.

  No breaking changes are introduced as part of this change

@primer/[email protected]

Patch Changes

• #958 3b391a5 Thanks @rezrah! - Added new design tokens for a fourth pricing option item

  --brand-PricingOptions-items4-container-padding-inline
  --brand-PricingOptions-items4-gap

• #955 2daaff8 Thanks @rezrah! - Added tokens for accent and subtle button variants.

    --brand-button-accent-bgColor-rest
    --brand-button-accent-bgColor-hover
    --brand-button-accent-bgColor-active
    --brand-button-accent-bgColor-disabled
    --brand-button-accent-fgColor-rest
    --brand-button-accent-fgColor-disabled
    --brand-button-subtle-bgColor-rest
    --brand-button-subtle-bgColor-hover
    --brand-button-subtle-bgColor-active

  Removed the following tokens for subtle variant as they are no longer needed:

  --brand-button-subtle-borderColor-rest
  --brand-button-subtle-borderColor-hover
  --brand-button-subtle-borderColor-active

@primer/[email protected]

See documentation for this release

Minor Changes

• #947 646cccf Thanks @joshfarrant! - - Improved VideoPlayer appearance on narrow viewports.
  • This necessitated the removal of the showControlsWhenPaused prop to prevent the height of the VideoPlayer from changing when the video is played/paused.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #945 13b84de Thanks @rezrah! - Removed global CSS overrides for reduced-motion user preferences with local, component equivalents.

  [!WARNING]
  Users who relied on this functionality should now implement their own override mechanisms at the component or page level.

• #926 b11c431 Thanks @joshfarrant! - - Updated the Pagination component to ensure consistent behaviour across all viewports by displaying a condensed pagination on narrow viewports.

  • ⚠️ Deprecated responsive object support in the showPages prop. The showPages prop now only accepts a boolean value which will hide/show the page numbers across all viewports.

      <Pagination
    -   showPages={{narrow: true, regular: true, wide: true}}
    +   showPages
      />
    
      // Or
    
      <Pagination
    -   showPages={{narrow: false, regular: false, wide: false}}
    +   showPages={false}
      />

Patch Changes

• #931 c309912 Thanks @joshfarrant! - Fixed a bug in Safari where an Icon component with hasBackground={true} would cut off the corners of the rendered SVG. To resolve this the Icon component now wraps the rendered SVG in a div.

• #927 91c10c5 Thanks @rezrah! - Improved typings to various components. This update should not affect the end-user API's.

• #945 13b84de Thanks @rezrah! - Fixed hover states for inline links in the Prose component. Links now behave identically to InlineLink component.

• #946 010578b Thanks @danielguillan! - Added a new small size option for Label

  🔗 See documentation for usage examples

• #943 16b0cc7 Thanks @danielguillan! - Sets the maximum widths for the heading and description of the Card component.

• #940 cca78a1 Thanks @joshfarrant! - Updated the Accordion component to support additional state handling methods. All changes are backwards compatible. Refer to Storybook for examples of these additional Accordion features.

• #942 5f31936 Thanks @danielguillan! - Update the default primary and secondary accent color tokens from pink and purple to green and yellow, respectively.

@primer/[email protected]

Patch Changes

• #942 5f31936 Thanks @danielguillan! - Update the default primary and secondary accent color tokens from pink and purple to green and yellow, respectively.

@primer/[email protected]

See documentation for this release

Patch Changes

• #934 645fa5d Thanks @joshfarrant! - Fixed a bug where Card components would need to be tapped twice in iOS Safari to trigger navigation

• #889 34e444e Thanks @danielguillan! - Added new green-blue-purple color option to Label component

@primer/[email protected]

@primer/[email protected]