braid-design-system

Minor Changes

• CheckboxStandalone:: Add component (#935)

  Adds support for cases where a Checkbox needs to be used without a form field style label.

  To maintain accessibility, it is required to provide either a aria-label or aria-labelledby property, to describe the field's intent.

  Given there is no visual label, the following features from a standard Checkbox cannot be supported:

  • description
  • message
  • badge
  • children (nested content)

  EXAMPLE USAGE:

  <CheckboxStandalone
    id={...}
    checked={...}
    onChange={...}
    aria-label="Label"
  />
  

• Add support for data attribute maps on all components. (#934)

  EXAMPLE USAGE:

  <Alert
    data={{
      testId: 'message',
    }}
  />
  
  // => <div data-testId="message" />
  

Patch Changes

• Sku dependencies update (#924)

Minor Changes

• Checkbox,RadioGroup,Toggle: Add size support to Checkbox, RadioGroup & Toggle (#928)

  Adds support for adjusting the size of a Checkbox, the RadioItems within a RadioGroup or a Toggle. Setting the size adjusts both the visual control and the text size of the label.

  EXAMPLE USAGE:

  <Checkbox size="small" label="Label" />
  

  <RadioGroup size="small" label="Label">
    ...
  </RadioGroup>
  

  <Toggle size="small" label="Label" />
  

Patch Changes

• Pagination: Add keyline to improve active page indicator contrast (#926)

  Improves the contrast of the active page indicator by adding a keyline when Pagination is used outside of a Card.

Minor Changes

• Accordion, AccordionItem: Allow customisation of size, tone, space and dividers. (#925)

  Note that, to ensure adequate space for touch targets, the space prop only accepts values of "medium", "large" and "xlarge".

  EXAMPLE USAGE

  <Accordion size="standard" tone="secondary" space="xlarge" dividers={false}>
    <AccordionItem label="Accordion item 1">...</AccordionItem>
    <AccordionItem label="Accordion item 2">...</AccordionItem>
    <AccordionItem label="Accordion item 3">...</AccordionItem>
  </Accordion>
  

Patch Changes

• Update capsize dependency (#921)

Patch Changes

• Textarea: Highlight excess characters when characterLimit is provided (#919)

Patch Changes

• Fix type errors in TypeScript v4.2.2 (#915)

Patch Changes

• TooltipRenderer: Support usage within Text elements (#912)

Minor Changes

• Box: Support responsive borderRadius (#910)

  Adds support for responsive values to borderRadius.

  EXAMPLE USAGE:

  <Box borderRadius={['none', 'standard']}>...</Box>
  

• Button: Add support for ref and tabIndex props (#905)

• Card: Add component support (#910)

  The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div (default), article, aside, details, main and section.

  EXAMPLE USAGE:

  <Card component="article">...</Card>
  

• Badge: Add support for ref, tabIndex and aria-describedby props (#905)

• Card: Add tone support (#910)

  Specifying a tone will now add a keyline down the left hand side of the container. The supported tones are promote and formAccent.

  As a result, Cards are now position relative containers.

  EXAMPLE USAGE:

  <Card tone="formAccent">...</Card>
  

• TextLink, ButtonLink: Add support for ref prop (#905)

• Card: Add rounded and roundedAbove support (#910)

  Card corners can be rounded by providing the rounded prop.

  Alternatively, rounding may be applied responsively using the roundedAbove prop, and providing either mobile or tablet. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.

  EXAMPLE USAGE:

  <Card rounded>...</Card>
  

  or

  <Card roundedAbove="mobile">...</Card>
  

Patch Changes

• Badge: Ensure ref, title, tabIndex and aria-describedby props are applied to the visual badge element, not its container element (#908)

• TooltipRenderer: Add arrow to tooltip (#908)

Patch Changes

• TextLink, TextLinkButton, TextLinkRenderer: Scope deprecation warning to only be in Actions context. (#903)

Minor Changes

• Box: Support value of default on cursor prop (#901)

  EXAMPLE USAGE

  <Box cursor="default">...</Box>
  

• TooltipRenderer: Add placement prop, support top and bottom. Set default placement to top. (#901)

  EXAMPLE USAGE

  <TooltipRenderer
    id={id}
    tooltip={<Text>This is a tooltip!</Text>}
    placement="bottom"
  >
    {({ triggerProps }) => (
      <Box aria-label="Help" {...triggerProps}>
        <IconHelp />
      </Box>
    )}
  </TooltipRenderer>
  

• Button, ButtonLink, ButtonRenderer: Add bleedY prop (#900)

  You can now choose to allow the button’s background colour to bleed out into the surrounding layout, making it easier to align with other elements.

  For example, we can align a button to a Heading element using an Inline, even though the button is actually taller than the heading. If we didn’t use the bleedY prop in this case, the button would introduce unwanted space above and below the heading.

  EXAMPLE USAGE:

  <Inline space="small" alignY="center">
    <Heading level="4">Heading</Heading>
    <Button bleedY>Button</Button>
    <Button bleedY size="small">
      Button
    </Button>
  </Inline>
  

Minor Changes

• Add TooltipRenderer component (#897)

  Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.

  Tooltips cannot contain interactive elements like links, buttons or form elements.

  Note: The trigger element must support ref, tabIndex and aria-describedby props.

  EXAMPLE USAGE

  <TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>}>
    {({ triggerProps }) => (
      <Box aria-label="Help" {...triggerProps}>
        <IconHelp />
      </Box>
    )}
  </TooltipRenderer>
  

Minor Changes

• Box: Add borderBrandAccentLarge to boxShadow prop (#893)

• Text, Icons: Add brandAccent tone to Text and Icons (#893)

  EXAMPLE USAGE:

  <Text tone="brandAccent">...</Text>
  

• Button,ButtonLink: Add variant to Button and deprecate weight (#893)

  Introduces a new variant prop to Button/ButtonLink giving consumers a single prop to use for selecting the visual style of the button. Choose from solid (default), ghost, soft or transparent. The colour of the button is now consistently controlled via the tone prop, with supported values being "brandAccent", "critical" or undefined.

  As a result the weight prop is now deprecated. See the migration guide below.

  EXAMPLE USAGE:

  <Inline space="small" collapseBelow="desktop">
    <Button>Solid</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="soft">Soft</Button>
    <Button variant="transparent">Transparent</Button>
  </Inline>
  

  MIGRATION GUIDE:
  The weight prop is now deprecated. If you are not specifying a weight there is no change required.

  If you are, each weight can be migrated as follows:

  Regular

  Can be replicated with a variant of solid (default).

  -<Button weight="regular">...</Button>
  +<Button variant="solid">...</Button>
  

  Given it is the default variant, you could also choose to simply remove the weight prop.

  -<Button weight="regular">...</Button>
  +<Button>...</Button>
  

  Strong

  Can be replicated with a variant of solid (default), with a tone of brandAccent.

  -<Button weight="strong">...</Button>
  +<Button tone="brandAccent">...</Button>
  

  Weak

  Can be replicated with a variant of ghost.

  -<Button weight="weak">...</Button>
  +<Button variant="ghost">...</Button>
  

Patch Changes

• TextLink,TextLinkButton: Deprecate inside of Actions in favour of transparent Button (#893)

  Usage of TextLink or TextLinkButton inside of an Actions container should now use a Button with a variant of transparent.

  Previously when a TextLink or TextLinkButton was placed inside of an Actions container, it would be given a custom layout to align with the Button elements. We are deprecating this behaviour.

  MIGRATION GUIDE:
  Going forward Actions should only contain Button elements. To migrate towards this, both TextLink and TextLinkButton should now use either a ButtonLink or Button respectively, with a variant or transparent.

  TextLink

  <Actions>
    <Button>...</Button>
  - <TextLink href="...">...</TextLink>
  + <ButtonLink href="..." variant="transparent">...</ButtonLink>
  </Actions>
  

  TextLinkButton

  <Actions>
    <Button>...</Button>
  - <TextLinkButton onClick={...}>...</TextLinkButton>
  + <Button onClick={...} variant="transparent">...</Button>
  </Actions>
  

• Button, ButtonLink: Remove all interactive styles when loading (#895)

  No longer applies hover and cursor pointer styles when a Button is set to loading.

Minor Changes

• Tabs: Support fragments and null/undefined as children in Tabs and TabPanels (#889)

Patch Changes

• Add space between page and navigation controls above mobile to improve affordance between the current page and the hover state of surrounding buttons. (#888)

Minor Changes

• Hidden: Add component support (#880)

  You can now customise the DOM element rendered when using Hidden. If no component is specified, it will fall back to the current behaviour — a div by default, or a span when setting inline to true.

  EXAMPLE USAGE:

  <Hidden component="li">...</Hidden>
  

• Pagination: Add component (#880)

  EXAMPLE USAGE:

  <Pagination
    label="Search results pagination"
    page={1}
    total={20}
    linkProps={({ page }) => ({
      href: `/results?page=${page}`,
    })}
  />
  

Patch Changes

• Update dependencies (#883)

Minor Changes

• Button, ButtonLink, ButtonRenderer, Actions: Add size prop, support small size (#879)

  You can now render smaller variants of button/action elements by setting the size prop to small.

  EXAMPLE USAGE

  Small Button

  <Button size="small">Small Button</Button>
  

  Small Actions

  <Actions size="small">
    <Button>Regular Button</Button>
    <Button weight="weak">Weak Button</Button>
    <TextLink href="#">TextLink</TextLink>
  </Actions>
  

Patch Changes

• Button, ButtonLink, ButtonRenderer: Reduce horizontal padding of standard size from gutter to medium (#879)

Minor Changes

• Tabs: Add divider prop, support full and none (#875)

  You can now customise the width of the divider line underneath the tab strip. The default value is minimal, but you can now set it to full or none.

  EXAMPLE USAGE

  <TabsProvider id="id">
    <Tabs label="Label" divider="full">
      <Tab>The first tab</Tab>
      <Tab>The second tab</Tab>
    </Tabs>
    <TabPanels>
      <TabPanel>...</TabPanel>
      <TabPanel>...</TabPanel>
    </TabPanels>
  </TabsProvider>
  

Patch Changes

• Autosuggest: Ensure input occupies the full width of its container (#872)

Minor Changes

• Add IconMobile and IconDesktop icons. (#867)

• TextField: Add prefix prop (#866)

  The prefix prop allows you to prepend read-only content on the left-hand side of the field. This is typically used for currency symbols, country codes, etc.

  EXAMPLE USAGE

  <TextField prefix="+61" {...rest} />
  

Patch Changes

• Use JSDoc comments to flag deprecated components (#860)

  You will now receive in-editor warnings and migration guidance when using deprecated components.

• Autosuggest: Fix bug where async suggestions may not be visible (#862)

  This fixes a bug where suggestions wouldn't become visible if the suggestions prop was initially empty and then populated asynchronously, only becoming visible on the next user interaction, e.g. typing in the field.

Minor Changes

• MenuItem, MenuItemLink: Add support for critical tone (#855)

  For destructive actions (e.g. "Delete") you can now provide a tone prop with a value of "critical".

  EXAMPLE USAGE

  <OverflowMenu label="Options">
    <MenuItem tone="critical" onClick={() => {}}>
      Delete
    </MenuItem>
  </OverflowMenu>
  

Patch Changes

• OverflowMenu, MenuRenderer, MenuItemDivider: Remove horizontal padding (#855)

Minor Changes

• Box: Add "criticalActive" and "criticalHover" to background prop (#851)

• Button, ButtonLink, ButtonRenderer: Add support for critical tone (#851)

  For destructive actions (e.g. "Delete") you can now provide a tone prop with a value of "critical".

  EXAMPLE USAGE

  <Button tone="critical">
    <IconDelete /> Delete
  </Button>
  

• Box: Add "borderCriticalLarge" to boxShadow prop (#851)