@primer/[email protected]

Minor Changes

• #108 ba4f102 Thanks @rezrah! - New ComparisonTable component available

  <ComparisonTable featuredColumn={1} heading="GitHub vs Jenkins">
    <ComparisonTable.Row>
      <ComparisonTable.Cell>Use case</ComparisonTable.Cell>
      <ComparisonTable.Cell>GitHub</ComparisonTable.Cell>
      <ComparisonTable.Cell>Jenkins</ComparisonTable.Cell>
    </ComparisonTable.Row>
    <ComparisonTable.Row>
      <ComparisonTable.Cell>Automation & CI/CD</ComparisonTable.Cell>
      <ComparisonTable.Cell>
        <Text as="p" size="300">
          Comparable native core capabilities
        </Text>
        <Text as="p" size="300">
          <InlineLink href="#">Over 13,000 GitHub Actions are available</InlineLink>
          &nbsp;in the GitHub Marketplace to automate your development workflow.
        </Text>
      </ComparisonTable.Cell>
      <ComparisonTable.Cell>
        <Text as="p" size="300">
          Comparable native capabilities
        </Text>
        <Text as="p" size="300">
          1,800+ community contributed Jenkins plugins <InlineLink href="#">in Jenkins Plugin Marketplace.</InlineLink>
        </Text>
      </ComparisonTable.Cell>
    </ComparisonTable.Row>
    <ComparisonTable.Row>
      <ComparisonTable.Cell>Deployment models</ComparisonTable.Cell>
      <ComparisonTable.Cell>Cloud or self-hosted</ComparisonTable.Cell>
      <ComparisonTable.Cell>
        <Text as="p" size="300">
          Self-hosted only
        </Text>
        <Text as="p" size="300">
          CloudBees is the cloud alternative
        </Text>
      </ComparisonTable.Cell>
    </ComparisonTable.Row>
    <ComparisonTable.Footnote>
      *** This is a biased overview of capabilities by use case, based on publicly available information as of
      2022-05-16.
    </ComparisonTable.Footnote>
  </ComparisonTable>

  🔗 See the documentation for more details and usage examples.

• #110 2569d4f Thanks @JoshBowdenConcepts! - Added ButtonGroup component

  Usage example:

  <ButtonGroup>
    <Button>This is one button</Button>
    <Button>This is the second button</Button>
  </ButtonGroup>

  See the Storybook for more usage examples.

@primer/[email protected]

Minor Changes

• #108 ba4f102 Thanks @rezrah! - Token updates for SubdomainNavBar and ComparisonTable

  • Fixed incorrect token name in SubdomainNavBar

    - --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-fg-default);
    + --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-text-default);

  • Added new token for customizing the featured gradiend in ComparisonTable

    + --brand-ComparisonTable-featured-color-start;
    + --brand-ComparisonTable-featured-color-end;

@primer/[email protected]

Patch Changes

• #104 b6322de Thanks @JoshBowdenConcepts! - Added a subtle variant for button component

• #106 85ed4d0 Thanks @rezrah! - Restore font folder to package root

  In 0.5.2 release, the /fonts folder was mistakenly placed in dist/ following the conversion of primer/brand to a monorepo.

  This has now been fixed in 0.5.3 by restoring the folder to package root to preserve backwards compatibility.

• #102 7fa82a5 Thanks @rezrah! - Added size prop to Heading component for granular control of visual sizing.

  Usage example:

  <Heading as="h2" size="4">
    This h2 will appear visually identical to a h4
  </Heading>

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #92 fcef134 Thanks @rezrah! - No updates in this release.

  New package versions published to verify the release process.

@primer/[email protected]

Patch Changes

• #92 fcef134 Thanks @rezrah! - No updates in this release.

  New package versions published to verify the release process.

v0.5.1

Patch Changes

• #87 0a82cd4 Thanks @rezrah! - UI bugfixes for SubdomainNavBar and Testimonial components.

  SubdomainNavBar

  • Fix bug where a missing SubdomainNavBar.Search child would cause the SubdomainNavBar to render incorrectly, despite being optional.
  • Fix bug where the overflow menu still appears when there are no items in the overflow menu.
  • Fix bug where longer titles caused text wrapping and layout issues. Slightly longer titles are now accepted.

  Testimonial

  • Increase spacing beneath the quote visual to 48px from 45px.

• #89 396734e Thanks @rezrah! - Add titleHref and fullWidth props for SubdomainNavBar

  Usage example:

  <SubdomainNavBar fullWidth={true} titleHref="/something-other-than-home" title="Subdomain">
    {/* ... */}
  </SubdomainNavBar>

v0.5.0

Minor Changes

• #81 88e2007 Thanks @rezrah! - Added SubdomainNavBar component.

  Usage example:

  <SubdomainNavBar title="Subdomain">
    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
    <SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
  </SubdomainNavBar>

  See the documentation and Storybook for more usage examples.

• #82 afbab6c Thanks @rezrah! - Added Testimonial component.

  Usage example:

  <Testimonial>
    <Testimonial.Quote>
      GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
      of code we&apos;re writing.
    </Testimonial.Quote>
    <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
    <Testimonial.Avatar
      src="https://avatars.githubusercontent.com/u/92997159?v=4"
      alt="Circular avatar from David Ross's GitHub profile"
    />
  </Testimonial>

  See the documentation or Storybook for more usage examples.

• #82 afbab6c Thanks @rezrah! - Added Stack component.

  Usage example:

  <Stack direction="horizontal" gap="spacious" padding="spacious">
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
  </Stack>

  See Storybook for more usage examples.

v0.4.0

Minor Changes

• #78 487a9e7 Thanks @JoshBowdenConcepts! - Added a new size prop to Button and a medium sized variant, making the previous large size optional.

  ⚠️ This update should be considered a breaking change, despite being issued in a minor release.

  Selectable values: medium (default) and large.

  Upgrade steps:

  - <Button>before</Button>
  + <Button size="large">after</Button>

• #69 7838af5 Thanks @rezrah! - Added FormControl, Checkbox, TextInput and Select components.

  Read the Technical Previews for usage examples:

  🔗 FormControl

  🔗 Checkbox

  🔗 TextInput

  🔗 Select

v0.3.1

Patch Changes

• #59 fdc731b Thanks @rezrah! - Added fillMedia prop to River.Visual

  Previously, all image and video children were automatically styled to fit the parent elements dimensions.

  This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an fillMedia prop.