@primer/[email protected]

Patch Changes

• #124 bc08980 Thanks @rezrah! - Fix: SubdomainNavBar and Radio component bugs in safari (iOS)

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #117 68d649f Thanks @rezrah! - Fix conflict with id and name attributes for form components

  The previous API for FormControl relied on the id prop to automatically assign the necessary name attribute for input tags. This had previously overridden the explicit name prop, which is not the desired behavior. This release fixes that by forwarding the name prop if it is provided, and falling back to the id prop if it is not.

  <FormControl>
    <FormControl.Label>Name</FormControl.Label>
    <TextInput name="name" />
  </FormControl>

  The above will now render as

  <section id="FormControl--custom-id">
    <label for="custom-id">Name</label>
    <input type="text" name="custom-name" id="custom-id" />
  </section>

• #117 68d649f Thanks @rezrah! - New Radio component available

  Use radios when a user needs to select one option from a list

  import {Radio} from '@primer/react-brand'

  <>
    <Radio name="radio-group" value="radio one" />
    <Radio name="radio-group" value="radio two" />
  </>

  🔗 See the documentation for more details and usage examples.

• #117 68d649f Thanks @rezrah! - New Textarea component available

  Use Textarea for multi-line text input form fields

  import {Textarea} from '@primer/react-brand'

  <Textarea>Enter multiline text here</Textarea>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #121 7d7c9c3 Thanks @rezrah! - Fixed conditional rendering bug in SubdomainNavBar

  Previously, SubdomainNavBar links would not appear correctly onscreen following a rerender.

  This bug has been fixed to ensure that conditional rendering - using showLinks below as an example - works as expected.

  <SubdomainNavBar title="Subdomain">
    {showLinks &&
      ['Collections', 'Topics', 'Articles', 'Events', 'Video'].map(link => {
        return (
          <SubdomainNavBar.Link key={link} href={`#${link}`}>
            {link}
          </SubdomainNavBar.Link>
        )
      })}
  </SubdomainNavBar>

@primer/[email protected]

@primer/[email protected]

@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.