Themeable design system for the SEEK Group
MIT License
Bot releases are hidden (Show)
Published by seek-oss-ci over 4 years ago
AccordionItem: Support onToggle
prop without expanded
to allow tracking in uncontrolled mode (#605)
For example:
<AccordionItem
id="id"
label="Label"
onToggle={expanded => trackSomething(expanded)}
>
...
</AccordionItem>
Published by seek-oss-ci over 4 years ago
automaticSelection
prop, we now prevent automatic selection from ocurring if the input value hasn't changed since focusing the field (#601)Published by seek-oss-ci over 4 years ago
Published by seek-oss-ci over 4 years ago
Inline: Add collapseBelow
and reverse
props. (#593)
Similar to Columns, you can now responsively collapse an Inline
into a vertical stack on mobile with the collapseBelow
prop.
For example, if you want items to stack vertically below tablet:
<Inline space="small" collapseBelow="tablet">
...
</Inline>
Also similar to Columns
, you can now reverse the order of items horizontally. This is particularly useful when combined with align="right"
.
For example, if you're rendering buttons and you want your primary action on the right on desktop, but at the top on mobile:
<Inline space="small" collapseBelow="tablet" align="right" reverse>
<Button>Primary action</Button>
<Button weight="weak">Secondary action</Button>
</Inline>
Columns: Add align
prop (#593)
When collapsing columns into a vertical stack on smaller screens, you can now control the alignment.
For example, if you want your columns to be horizontally centred on mobile:
<Columns space="small" collapseBelow="tablet" align="center">
<Column>...<Column>
<Column>...<Column>
<Column>...<Column>
</Columns>
As a side effect, this also means that you can control the alignment of columns when the total width doesn't reach 100%.
For example:
<Columns space="small" align="center">
<Column width="1/3">...<Column>
<Column width="1/3">...<Column>
</Columns>
Add TextDropdown component (#594)
An inline dropdown that can be used as part of a sentence or as an
alternative to Dropdown
, outside of a more structured form.
Inherits its styling from the parent typographic component, and as such
must be used nested within either a Text
or Heading
component.
Example usage:
const [jobTitle, setJobTitle] = useState('Developer');
<Text>
<TextDropdown
id="jobTitle"
label="Job Title"
value={jobTitle}
onChange={setJobTitle}
options={['Developer', 'Designer', 'Product Manager']}
/>
</Text>;
Published by seek-oss-ci over 4 years ago
Theme: Introduce the Catho theme (#550)
Adds support to build product for the Catho market. This theme is an adaption of the Quantum Design System.
Add Accordion
and AccordionItem
components (#587)
Example usage:
<Accordion>
<AccordionItem id="item_1" label="Accordion item 1">
<Text>Accordion item content</Text>
</AccordionItem>
<AccordionItem id="item_2" label="Accordion item 2">
<Text>Accordion item content</Text>
</AccordionItem>
<AccordionItem id="item_3" label="Accordion item 3">
<Text>Accordion item content</Text>
</AccordionItem>
</Accordion>
Accordions manage their own state internally by default. If you'd like to take control of them yourself, you can pass an expanded
prop to AccordionItem
as well as an onToggle
callback.
const [expanded, setExpanded] = useState(false);
<AccordionItem
id="id"
label="Accordion item"
expanded={expanded}
onToggle={setExpanded}
>
<Text>Accordion item content</Text>
</AccordionItem>;
Box: Add support for outline="none"
(#587)
Drop lodash usage to decrease bundle size. (#585)
This directly affects MonthPicker
and any components using the data
prop:
Published by seek-oss-ci over 4 years ago
Add ButtonLink component (#581)
You can now easily render semantic links that look like Button elements without needing to use the lower level ButtonRenderer.
This component renders a native a
element by default, but this can be customised via the linkComponent
prop on BraidProvider.
Example usage:
<ButtonLink href="#" weight="strong">
Submit
</ButtonLink>
Published by seek-oss-ci over 4 years ago
BraidProvider: Add linkComponent
prop to customise link rendering. (#574)
If you'd like to customise the technical implementation of all Link
and TextLink
components from Braid, you can now pass a custom component to the linkComponent
prop on BraidProvider
. For example, if you wanted to ensure that all relative links are React Router links:
import React, { ComponentProps } from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { BraidProvider, LinkComponent } from 'braid-design-system';
// First create the custom link implementation:
const BraidLink: LinkComponent = ({ href, ...restProps }) =>
href[0] === '/' ? (
<ReactRouterLink to={href} {...restProps} />
) : (
<a href={href} {...restProps} />
);
// Then pass it to BraidProvider:
export const App = () => (
<BraidProvider theme={jobStreetTheme} linkComponent={BraidLink}>
...
</BraidProvider>
);
In order to make your custom link component available for any type of link (not just usages of TextLink
), this release introduces a new Link
component which renders an unstyled a
tag by default.
BREAKING CHANGES
TextLink
now requires an href
prop. Even though this is unlikely to affect anyone (a TextLink
without an href
isn't terribly useful), this is still technically a breaking change.
However, if you find an instance of TextLink
that you think shouldn't have an href
, this is a sign that it's not actually a link and you should use a TextLinkRenderer
instead. Unfortunately, because there's no way for us to know the semantics of your usage ahead of time, we're unable to provide a migration guide, so you'll need to be mindful of how this might impact accessibility.
The props for TextLink
now extend React's AnchorHTMLAttributes<HTMLAnchorElement>
type rather than AllHTMLAttributes<HTMLAnchorElement>
. While highly unlikely, this may cause type errors if you've passed props to TextLink
that aren't considered to be valid anchor props.
Themes: Fix OCC theme export (#576)
The braid-design-system/themes/occ
theme export is now exposed correctly.
Published by seek-oss-ci over 4 years ago
Published by seek-oss-ci over 4 years ago
Divider: Add strong weight variant, e.g. <Divider weight="strong">
. (#569)
Note that this also affects the dividers
prop on both Stack
and Tiles
, e.g. <Stack space="medium" dividers="strong">
. You can still pass a boolean prop if you want to render the default divider styling, e.g. <Stack space="medium" dividers>
, so this change is backwards compatible.
Published by seek-oss-ci over 4 years ago
Published by seek-oss-ci over 4 years ago
Theme: Introduce the OCC theme (#547)
Adds support to build product for the OCC market. This theme is an adaption of the Atomic Design System.
Published by seek-oss-ci over 4 years ago
Inline: Support vertical alignment (#562)
Inline
Vertical alignment is now supported via the alignY
prop, e.g. <Inline space="small" alignY="center">
.
This also supports responsive values, e.g. <Inline space="small" alignY={['center', 'top']}>
Box: Add userSelect="none"
. (#556)
Box
You can now set userSelect
to "none"
directly on Box
.
Since the default value of user-select
in CSS is "auto"
, you can make this value dynamic by conditionally setting it to undefined
, e.g. <Box userSelect={selectable ? undefined : 'none'}
.
Published by seek-oss-ci over 4 years ago
Textarea: Fix trailing new line highlight issue (#555)
BUG FIXES
Textarea
Fix for highlightRanges
, where the highlights could get out of sync with the field value, if the value contained trailing new lines.
Published by seek-oss-ci over 4 years ago
Checkbox & Radio: Only add aria-describedby when a message is provided (#542)
BUG FIXES
Checkbox
& Radio
Both of these inputs were previously always adding the aria-describedby
attribute, while conditionally rendering the message
only when provided. This meant that elements without a message
would be indicating that they are described by an element that does not exist.
Published by seek-oss-ci over 4 years ago
Tiles: Honour column width for non-breaking content. (#537)
BUG FIXES
Tiles
The column width of a tile was not being honoured when its child elements contained non-wrapping/breaking content.