Feb 9, 2024
  • Tab: Remove cropping of the icon slot

    Previously the icon slot on a Tab was cropped on the left to improve alignment with the active tab indicator. For most icons in a Tab, this was subtle polish, but for others it had the undesirable side effect of clipping the side of the icon.

    Removing the cropping until we have a better solution for trimming whitespace around icons.

Dec 4, 2023
  • Tabs: Improve positioning of the active underline

Aug 23, 2023
  • TabPanel: Align focus outline radius to scale

    Increase the radius of the focus outline to better align to the scale. A TabPanel is typically a "large" element containing entire sections of UI, so using the large radius to better align to the radius scale.

Mar 31, 2023
  • Add xxxlarge to the space scale

    Extends the range of the space scale to include xxxlarge. This addition is to support an upcoming design uplift that requires greater fidelity in the scale. Note, the new value is also available as a responsive property.

    EXAMPLE USAGE:

    <Stack space="xxxlarge">...</Stack>
    
    {/* Or responsively: */}
    <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>
    import { atoms } from 'braid-design-system/css';
    
    atoms({ paddingY: 'xxxlarge' })
    import { vars } from 'braid-design-system/css';
    
    const space = vars.space.xxxlarge;
Dec 9, 2022
  • Tab, Tabs: Updated visual design

    The appearance of a Tab has been updated. Changes include:

    • Tab button use regular text weight
    • Hover state of inactive tab toggles neutral tone instead of underline
    • Active tab indicator underlines content only, without the horizontal gutter and animates between tabs
    • The minimal divider under Tabs underlines content only, without the horizontal gutter
Nov 9, 2022
  • Support data attribute boolean values

    The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

    EXAMPLE USAGE:

    <Component
      data={{
        'custom-attribute': true,
      }}
    />
    // => <div data-custom-attribute="true" />
Oct 21, 2022
  • Removes custom icon sizing and layout in favour of new typography icon sizes and layout.

Apr 8, 2022
  • Tab: Add icon support

    Provides a designed slot for adding an icon to a Tab

    EXAMPLE USAGE:

    <Tab icon={<IconPromote />}>{...}</Tab>
Jul 8, 2021
  • Add wide breakpoint of 1200px

    This adds support for wide to the following touchpoints:

    • Responsive values, e.g.
      { mobile: 'small', wide: 'large' }
    • Responsive range props, e.g.
      <Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
    • The responsiveStyle function, e.g.
      export const className = style(responsiveStyle({ wide: '...' }));
    • The breakpoints object, which now exposes the number 1200 via breakpoints.wide, i.e.
      {
        mobile: 0,
        tablet: 740,
        desktop: 940,
        wide: 1200
      }
Jun 21, 2021
  • Support object notation for responsive props

    Responsive prop values can now be written as objects with named breakpoints, which is now the recommended notation.

    { mobile: 'small', tablet: 'medium', desktop: 'large' }

    This also means that breakpoints can be skipped.

    { mobile: 'small', desktop: 'large' }
Feb 4, 2021
  • Tabs: Support fragments and null/undefined as children in Tabs and TabPanels

Jan 21, 2021
  • Tabs: Add divider prop, support full and none

    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>
Oct 22, 2020
  • Tabs: Only scroll tabs when necessary on large screens

    Previously, when there were enough tabs to require horizontal scrolling, we would always scroll the active tab to the left-hand side of the scroll container (with a slight offset). This was primarily designed as a mobile interaction, and in practice was found to be a bit unexpected on large screens.

    Instead, when the tabs are scrollable on large screens, we now only scroll the active tab into view if it's partially off-screen or positioned too close to the edge of the scroll container. This ensures that automatic scrolling only occurs when absolutely necessary.

Aug 21, 2020
  • Improved server rendering of Tabs

    Previously, Tab and TabPanel components only showed their content and active states after the first render, which meant server rendering was not ideal. Active Tabs and TabPanel content can now be server rendered. Uncontrolled usages of Tabs should just work.

    For controlled Tabs using the selectedItem prop, you now need to pass the item prop (already on Tab) to TabPanel as well.

    <TabsProvider id="id" selectedItem="second">
      <Tabs label="Test tabs">
        <Tab item="first">The first tab</Tab>
        <Tab item="second">The second tab</Tab>
        <Tab item="third">The third tab</Tab>
      </Tabs>
      <TabPanels>
    -    <TabPanel>
    +    <TabPanel item="first">
          <Placeholder height={200} label="Panel 1" />
        </TabPanel>
    -    <TabPanel>
    +    <TabPanel item="second">
          <Placeholder height={200} label="Panel 2" />
        </TabPanel>
    -    <TabPanel>
    +    <TabPanel item="third">
          <Placeholder height={200} label="Panel 3" />
        </TabPanel>
      </TabPanels>
    </TabsProvider>
Aug 14, 2020
  • TabPanels: Add renderInactivePanels prop

    By default, the children of TabPanel components are only rendered when they are selected. However, in cases where you want to preserve local component state when switching tabs, this behaviour is undesirable. Setting renderInactivePanels will cause the TabPanel children to be rendered even when visually hidden.

    Note: This is not a visual change, the panels will still be hidden from the user.

    e.g.

    <TabsProvider selectedItem={0}>
        <Tabs>
          <Tab>First</Tab>
          <Tab>Second</Tab>
        </Tabs>
        <TabPanels renderInactivePanels>
          <TabPanel>
            <Text>Tab 1</Text>
          </TabPanel>
          <TabPanel>
            {/* This TabPanel is hidden but still in the DOM */}
            <Text>Tab 2</Text>
          </TabPanel>
        </TabPanels>
    </TabsProvider>
Jul 1, 2020
  • Add Tabs component

    EXAMPLE USAGE:

    <TabsProvider id="id">
      <Stack space="medium">
        <Tabs label="Label">
          <Tab>The first tab</Tab>
          <Tab>The second tab</Tab>
          <Tab badge={<Badge tone="positive">New</Badge>}>The third tab</Tab>
        </Tabs>
        <TabPanels>
          <TabPanel>...</TabPanel>
          <TabPanel>...</TabPanel>
          <TabPanel>...</TabPanel>
        </TabPanels>
      </Stack>
    </TabsProvider>