Themeable design system for the SEEK Group
MIT License
Bot releases are visible (Hide)
Published by seek-oss-ci over 4 years ago
Introduce apac
theme (#676)
The seekAnz
theme has always been held back by the need to maintain visual consistency with SEEK Style Guide.
In order to provide a path forwards, this release introduces a new apac
theme, giving teams the opportunity to adopt newer design standards while still providing the seekAnz
theme as a backwards compatibility layer.
Consumers of the seekAnz
theme are under no immediate pressure to migrate and both themes will be provided for the forseeable future. For now, this theme is aimed at those teams that are explicitly wanting to adopt newer design standards.
The visual changes to seekAnz
are as follows:
#eeeeee
to #f5f6f8
.It's possible that your application has custom design elements that depend on these older values in order to look correct. It's also possible that your application is part of a broader user journey that makes use of these older design standards. As a result, a design review is highly recommended.
This release also signifies that the seekUnifiedBeta
theme is coming out of beta. Any references to this theme should be replaced with apac
. As with seekAnz
, both themes will be provided for the timebeing to give you an opportunity to migrate.
EXAMPLE USAGE
import apac from 'braid-design-system/themes/apac';
<BraidProvider theme={apac}>
<BraidLoadableProvider themeName="apac">
Published by seek-oss-ci over 4 years ago
Box: Add body
background (#677)
You can now use the theme's body background on arbitrary elements within the page.
EXAMPLE USAGE
<Box background="body">...</Box>
Published by seek-oss-ci over 4 years ago
MonthPicker: Support custom month and year labels (#672)
To support internationalisation, you can now pass the following props to MonthPicker
:
string
)string
)string[]
)Published by seek-oss-ci over 4 years ago
Expose docs theme (#670)
In order to support internal documentation sites that leverage Braid, we're now exposing a docs
theme.
import docsTheme from 'braid-design-system/themes/docs';
Published by seek-oss-ci over 4 years ago
Add Tabs component (#666)
Follows the WAI Aria Tabs Pattern.
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>
Autosuggest: Fix suggestion double tap bug on iOS (#668)
Tapping a suggestion on iOS triggers the hover state rather than a selection, forcing users to tap a second time to select the suggestion.
This is due to the way that iOS simulates mouse events in a touch environment. If the document is updated during a mouseover
, mouseenter
or mousemove
event, the subsequent click
event is never fired. While it may seem counterintuitive, this ensures that touch users are able to see hover effects that make changes to the page.
To fix this, we now trigger our suggestion hover logic on touchstart
so that the document doesn't change during mouse events, which then allows the click
event to fire uninterrupted.
Published by seek-oss-ci over 4 years ago
Fix CSS ordering issue in production mode (#664)
Files within the top-level themes
directory were not correctly marked as side effects which meant that, when importing from braid-design-system/themes/*
, the CSS order could differ between development and production.
Published by seek-oss-ci over 4 years ago
useToast: Add deduplication of toasts (#662)
Passing key
when creating new toasts will now remove existing Toasts on screen with the same key
before adding the new Toast. This is useful when a toast is created as part of a repeatable process that happens frequently.
const showToast = useToast();
showToast({
message: 'There can only be one of me',
tone: 'positive',
key: 'deduped',
});
Published by seek-oss-ci over 4 years ago
Inline: Add support for semantic list elements (#654)
As already featured on Stack
, when rendering <Inline component="ul|ol">
, its children will be rendered as li
elements.
Hide icons from screen readers that have no title (#656)
Icons are mostly used for decorative purposes and as such are now hidden from screen readers unless providing a title
. In this case, an Icon is identified as an image.
Alert, Notice: Support rich content (#647)
BREAKING CHANGE
Since Alert
and Notice
no longer render a Text
component for you, you'll need to ensure that you're providing an enclosing Text
element as a direct child.
Alert:
<Alert tone="positive">
- Success!
+ <Text>Success!</Text>
</Alert>
Notice:
<Notice tone="positive">
- Success!
+ <Text>Success!</Text>
</Notice>
Why?
The Alert and Notice components were originally designed to render a single paragraph of text, but in practice we've found that there's a lot of demand for richer content, e.g. multiple paragraphs, bullet lists, etc.
In order to support this level of flexibility, Alert
and Notice
no longer render an enclosing Text
component for you. While this means you'll need a bit more boilerplate in simple cases, it also means you now have much more fine-grained control over the layout.
For example, if you wanted to render an Alert
using both Text
and BulletList
with "medium"
space between them:
<Alert tone="positive">
<Stack space="medium">
<Text>The quick brown fox jumps over the lazy dog.</Text>
<BulletList space="small">
<Bullet>Bullet 1</Bullet>
<Bullet>Bullet 2</Bullet>
</BulletList>
</Stack>
</Alert>
This same pattern applies to Notice
:
<Notice tone="positive">
<Stack space="medium">
<Text>The quick brown fox jumps over the lazy dog.</Text>
<BulletList space="small">
<Bullet>Bullet 1</Bullet>
<Bullet>Bullet 2</Bullet>
</BulletList>
</Stack>
</Notice>
MonthPicker: Fix internal <Hidden screen>
deprecation warning (#650)
The MonthPicker
component was mistakenly using <Hidden screen>
to provide labels to screen readers rather than the new HiddenVisually
component. As a result, deprecation warnings were being logged in the console during development.
Published by seek-oss-ci over 4 years ago
Use assert
for runtime assertions during development (#624)
Please ensure you are on sku v10.3.0 or higher so that these assertions are removed in production. This ensures that these checks don't have a negative performance impact on users.
The main driver for this change is to ensure that runtime design validation occurs within the Braid Playroom.
Playroom is built in production mode to maximise performance, but this means that our custom development-time validation code isn't being executed. As a result, it's becoming increasingly common for prototypes to contain invalid code that only throws an error when transposed into a proper development environment. This change ensures that invalid designs are caught as early as possible.
Published by seek-oss-ci over 4 years ago
Improve field border contrast ratio (#638)
To improve accessibility, field borders have been darkened for the following themes:
seekAnz
seekBusiness
seekUnifiedBeta
catho
(based on referencing Quantum)Since this is a noticeable visual change that may introduce inconsistincies with custom design elements, design review is recommended.
Toggle: Hide border on dark backgrounds (#638)
In order to reduce visual noise, similar to other fields, we now hide the border on Toggle
elements when rendered on dark backgrounds.
Dropdown: Lighten chevron when disabled (#638)
The visual prominence of the chevron icon is now lower when disabled
is set to true
.
Autosuggest: Apply darker background when disabled (#638)
When disabled, Autosuggest
elements didn't have the same dark background as other disabled fields. This has now been fixed.
Published by seek-oss-ci over 4 years ago
Add HiddenVisually
component (#643)
You can now easily provide content to assistive technologies while hiding it from the screen.
<Text>
This content is available to everyone.
<HiddenVisually>
This content is only available to screen readers.
</HiddenVisually>
</Text>
Hidden: Infer inline
prop when nested inside Text or Heading (#643)
Currently, if you want to hide content using the Hidden
component in an inline context (e.g. hiding part of a sentence), you need to remember to set the inline
boolean prop.
Since most usages of this feature are within text, we now infer this for you automatically within the context of a Text
or Heading
component.
MIGRATION GUIDE
This change is not strictly required, but you can now clean up your code like this:
-<Text>The end of this sentence is... <Hidden inline below="tablet">hidden on mobile.</Hidden>
+<Text>The end of this sentence is... <Hidden below="tablet">hidden on mobile.</Hidden>
Published by seek-oss-ci over 4 years ago
MonthPicker: Preserve touchable height on iOS (#641)
Fix for the native variant of MonthPicker
having a reduced height on iOS when no value is provided.
Published by seek-oss-ci over 4 years ago
Stack: Add support for Hidden stack items (#632)
You can now responsively hide stack items using the Hidden
component while maintaining the correct spacing between all visible elements.
For example, if you wanted to hide a stack item on mobile:
<Stack space="small">
<Text>...</Text>
<Hidden below="tablet">
<Text>...</Text>
</Hidden>
<Text>...</Text>
</Stack>
Published by seek-oss-ci over 4 years ago
seekAnz, seekBusiness, seekUnifiedBeta: Change critical colour to red (#634)
As part of the colour uplift work, this updates the critical
colour in the seekAnz
(and subsequently seekBusiness
and seekUnifiedBeta
) theme from pink to red. This brings the theme into line with our colour usage guide documented under Tones on the website.
BREAKING CHANGE
While not technically a breaking change, you may want to review usage of the critical
tone in your application, particularly in custom scenarios, for example:
background
props on Box
<Box background="critical">...</Box>
or
<Box background="criticalLight">...</Box>
tone
props on Icon
or Text
<Icon tone="critical">...</Icon>
or
<Text tone="critical">...</Text>
Published by seek-oss-ci over 4 years ago
Stack, Inline, Tiles: Flatten fragments when provided as direct children (#626)
The following patterns should now work as you might have previously expected:
<Stack space="small">
<React.Fragment>
<Text>...</Text>
<Text>...</Text>
</React.Fragment>
<Text>...</Text>
</Stack>
<Inline space="small">
<React.Fragment>
<Badge>...</Badge>
<Badge>...</Badge>
</React.Fragment>
<Badge>...</Badge>
</Inline>
<Tiles space="small" columns={3}>
<React.Fragment>
<Card>...</Card>
<Card>...</Card>
</React.Fragment>
<Card>...</Card>
</Tiles>
BREAKING CHANGE
While highly unlikely, if you were using a fragment to group unspaced sibling nodes within a Stack
, Inline
or Tiles
element, you'll need to replace it with a Box
, for example:
<Stack space="small">
...
- <React.Fragment>
+ <Box>
<Box>...</Box>
<Box>...</Box>
- <React.Fragment>
+ </Box>
...
</Stack>
<Inline space="small">
...
- <React.Fragment>
+ <Box>
<Box>...</Box>
<Box>...</Box>
- <React.Fragment>
+ </Box>
...
</Inline>
<Tiles space="small" columns={3}>
...
- <React.Fragment>
+ <Box>
<Box>...</Box>
<Box>...</Box>
- <React.Fragment>
+ </Box>
...
</Tiles>
Published by seek-oss-ci over 4 years ago
TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions. (#625)
The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.
Affects the following components:
Textarea: Fix border radius on dark backgrounds (#625)
When rendering a Textarea
on a background other than white, the field background extended out beyond the field's border radius.
TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click (#625)
Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.
Affects the following components:
Published by seek-oss-ci over 4 years ago
Published by seek-oss-ci over 4 years ago
Autosuggest: Support suggestion descriptions (#613)
You can now provide a description
as part of each suggestion item, e.g.:
<Autosuggest
suggestions={[
{
text: 'Apples',
value: 123,
description: 'Juicy and delicious',
},
]}
{...rest}
/>
Published by seek-oss-ci over 4 years ago