Themeable design system for the SEEK Group
MIT License
Bot releases are hidden (Show)
Published by seek-oss-ci almost 3 years ago
BraidTestProvider: Move to separate entry (#1031)
By moving BraidTestProvider
to it’s own entry, we can prevent importing all the themes at dev-time. This improves the developer experience when debugging the stylesheet that is output by the development server.
MIGRATION GUIDE
Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:
yarn braid-upgrade v31 "**/*.{ts,tsx}"
It may be necessary to manually migrate code in some cases, here are the affected use cases:
- import { BraidTestProvider } from 'braid-design-system';
+ import { BraidTestProvider } from 'braid-design-system/test';
BackgroundProvider Removed in favour of setting a background
of customDark
/customLight
directly on the Box
that has the custom background color. (#1031)
MIGRATION GUIDE
-<Box style={{ backgroundColor: 'purple' }}>
+<Box background="customDark" style={{ backgroundColor: 'purple' }}>
- <BackgroundProvider value="UNKNOWN_DARK">
<Text>Inverted text given dark context</Text>
- </BackgroundProvider>
</Box>
Remove previously deprecated ButtonRenderer
component in favour of Button
and ButtonLink
. (#1031)
MIGRATION GUIDE
If you were using this to render an a
element that visually looks like a button, you should be using ButtonLink
- <ButtonRenderer>
- {(ButtonChildren, buttonProps) => (
- <a to="#" {...buttonProps}>
- Visually a button
- </a>
- )}
- </ButtonRenderer>
+ <ButtonLink>
+ Visually a button
+ </ButtonLink>
Button, ButtonLink: Add neutral
tone (#1031)
Introduces a neutral
tone for cases where actions need to be de-emphasised. As a result, there is a breaking change to the contextual design rules that invert buttons in dark containers.
BREAKING CHANGE:
A Button
with a variant
of ghost
, soft
, or transparent
and no specified tone
would previously invert when inside a dark container. Now, instead of inverting the foreground colour, these cases will use a lighter version of the default tone, i.e. formAccent
.
MIGRATION GUIDE:
To maintain previous behaviour, consumers should opt into the neutral
tone.
<Box background="brand" padding="gutter">
- <Button variant="ghost">Click</Button>
+ <Button variant="ghost" tone="neutral">Click</Button>
</Box>
Remove legacy seekAsia themes (#1031)
Since the rebrand went live earlier this year, all consumers of jobsDb
, jobStreet
, jobStreetClassic
and seekUnifiedBeta
themes should now be using the apac
theme in production.
MIGRATION GUIDE
-import jobStreet from 'braid-design-system/themes/jobStreet';
+import apac from 'braid-design-system/themes/apac';
-<BraidProvider theme={jobStreet}>
+<BraidProvider theme={apac}>
...
</BraidProvider>
BulletList Remove deprecated component (#1031)
MIGRATION GUIDE
-<BulletList>
- <Bullet large>Bullet</Bullet>
- <Bullet large>Bullet</Bullet>
- <Bullet large>Bullet</Bullet>
-</BulletList>
+<List size="large">
+ <Text>Bullet</Text>
+ <Text>Bullet</Text>
+ <Text>Bullet</Text>
+</List>
Remove previously deprecated TextLinkRenderer
component in favour of TextLink
and TextLinkButton
. (#1031)
MIGRATION GUIDE
If you were using this to render a button
element that visually looks like a link, you should be using TextLinkButton
<Text>
- <TextLinkRenderer reset={false}>
- {(textLinkProps) => (
- <Box component="button" {...textLinkProps}>
- Visually a link
- </Box>
- )}
- </TextLinkRenderer>
+ <TextLinkButton>
+ Visually a link
+ </TextLinkButton>
, rendered as a button.
</Text>
If you were using this to render an a
element or using a client side router link component you should ensure you have configured the linkComponent on BraidProvider
in your app. Once handled, migrating to TextLink
should be straight forward.
<Text>
- <TextLinkRenderer reset={false}>
- {(textLinkProps) => (
- <Link {...textLinkProps}>
- ...
- </Link>
- )}
- </TextLinkRenderer>
+ <TextLink>
+ ...
+ </TextLink>
</Text>
Button, ButtonLink: Remove weight prop (#1031)
Removing support for the weight
prop. This was deprecated back in v29.26.0 in favour of using the variant
prop.
TextLink, TextLinkButton: Remove support inside Actions
component (#1031)
Removing support for TextLink
and TextLinkButton
components inside of Actions
. This was previously deprecated back in v29.26.0 in favour of using the transparent
variant
of ButtonLink
.
MIGRATION GUIDE
<Actions>
<Button>...</Button>
- <TextLink href="...">...</TextLink>
+ <ButtonLink href="..." variant="transparent">...</ButtonLink>
</Actions>
Remove BraidLoadableProvider
(#1031)
As most Apps should run the apac
theme across all brands, it no longer makes sense to centralise a loadable version of the BraidProvider
. This should simplify builds across the board and may result in a small build-speed increase.
MIGRATION GUIDE
If you are only using a single theme, then you should migrate your BraidLoadableProvider
usage to BraidProvider
.
+import apac from 'braid-design-system/themes/apac';
+import { BraidProvider } from 'braid-design-system';
-import { BraidLoadableProvider } from 'braid-design-system';
export const App = () => (
- <BraidLoadableProvider themeName="apac">
+ <BraidProvider theme={apac}>
...
- </BraidLoadableProvider>
+ </BraidProvider>
);
If your app still needs to render different themes then you can replicate the BraidLoadableProvider
functionality locally using the loadable.lib
API.
import { BraidProvider } from 'braid-design-system';
import React, { ReactNode } from 'react';
import loadable from 'sku/@loadable/component';
type ThemeName = 'apac' | 'catho';
const BraidTheme = loadable.lib((props: { themeName: ThemeName }) =>
import(`braid-design-system/themes/${props.themeName}`),
);
interface AppProps {
themeName: ThemeName;
children: ReactNode;
}
export const App = ({ themeName, children }: AppProps) => (
<BraidTheme themeName={themeName}>
{({ default: theme }) => (
<BraidProvider theme={theme}>{children}</BraidProvider>
)}
</BraidTheme>
);
Box, atoms, vars: Update theme colour tokens with improved semantics. (#1031)
Simplifies the semantics of the colour-based tokens to support upcoming colour mode work. Changes to the property values on backgroundColor
and borderColor
has flow on affects to the apis on Box
and atoms
.
TOKEN CHANGES
New
surface
, neutralSoft
neutral
, neutralInverted
, neutralLight
Removed
card
, formAccentDisabled
, input
, inputDisabled
, selection
formHover
, standard
, standardInverted
MIGRATION GUIDE
Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:
yarn braid-upgrade v31 "**/*.{ts,tsx}"
It may be necessary to manually migrate code in some cases, here are the affected use cases:
Box
backgrounds
- <Box background="card" />
+ <Box background="surface" />
- <Box background="formAccentDisabled" />
+ <Box background="neutralLight" />
- <Box background="input" />
+ <Box background="surface" />
- <Box background="inputDisabled" />
+ <Box background="neutralSoft" />
- <Box background="selection" />
+ <Box background="formAccentSoft" />
Box
boxShadows
- <Box boxShadow="borderStandard" />
+ <Box boxShadow="borderNeutralLight" />
- <Box boxShadow="borderStandardInverted" />
+ <Box boxShadow="borderNeutralInverted" />
- <Box boxShadow="borderStandardInvertedLarge" />
+ <Box boxShadow="borderNeutralInvertedLarge" />
- <Box boxShadow="borderFormHover" />
+ <Box boxShadow="borderFormAccent" />
vars
- vars.borderColor.standard
+ vars.borderColor.neutralLight
- vars.borderColor.standardInverted
+ vars.borderColor.neutralInverted
- vars.borderColor.formHover
+ vars.borderColor.formAccent
atoms
atoms({
- boxShadow: 'borderStandard',
+ boxShadow: 'borderNeutralLight',
});
atoms({
- boxShadow: 'borderStandardInverted',
+ boxShadow: 'borderNeutralInverted',
});
atoms({
- boxShadow: 'borderStandardInvertedLarge',
+ boxShadow: 'borderNeutralInvertedLarge',
});
atoms({
- boxShadow: 'borderFormHover',
+ boxShadow: 'borderFormAccent',
});
Box: Add neutral background variants and new boxShadow border variants (#1031)
New backgrounds
The following backgrounds are now available:
neutralActive
neutralHover
neutralSoftActive
neutralSoftHover
New boxShadows
The following box shadows are now available:
borderBrandAccentLightLarge
borderCriticalLightLarge
borderFormAccentLight
borderFormAccentLightLarge
atoms: Add boxShadow border variants (#1031)
New boxShadows
The following box shadows are now available:
borderBrandAccentLightLarge
borderCriticalLightLarge
borderFormAccentLight
borderFormAccentLightLarge
vars: Darken neutral background for the occ
theme. (#1031)
A neutral
background should be able to hold tone-based text. Moving from grey700
to grey800
as per the Atomic Design System color palette
vars: Add new backgrounds and light variant border colors (#1031)
New backgrounds
The following backgrounds are now available on the vars.backgroundColor
theme object:
neutralActive
neutralHover
neutralSoftActive
neutralSoftHover
New borderColors
The following border colors are now available on the vars.borderColor
theme object:
brandAccentLight
criticalLight
formAccentLight
vars: Darken neutral background for the seekAnz
theme. (#1031)
A neutral
background should be able to hold tone-based text. Moving from sk-mid-gray-dark
to sk-charcoal
as per the Seek Style Guide color palette
Text: Improve contrast of brandAccent
, critical
and formAccent
tones (#1031)
When using any of the above tones in a dark container, a lighter colour will be used to improve the text contrast against the background.
Published by seek-oss-ci almost 3 years ago
Move @types/react
to devDependencies (#1023)
Braid requires consumers to provide React, therefore they should also provide the appropriate version of @types/react
rather than rely on the version installed in Braid.
Published by seek-oss-ci about 3 years ago
disabled
(#1019)Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea: Hide placeholder
text when field is disabled
(#1019)
Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup: Dim the field value and label when field is disabled
(#1019)
Autosuggest, TextField: Hide clear button when field is disabled
. (#1019)
Published by seek-oss-ci about 3 years ago
Published by seek-oss-ci about 3 years ago
Published by seek-oss-ci about 3 years ago
apac
and seekBusiness
themes: Update colour palette (#983)
The colours used in these themes have been updated to the latest design standards.
A design review is highly recommended to ensure any custom design elements in your application still look correct when combined with these new colours.
Box: Add new background and border colours (#983)
New background
values:
brandAccentSoft
brandAccentSoftActive
brandAccentSoftHover
criticalSoft
criticalSoftActive
criticalSoftHover
formAccentSoft
formAccentSoftActive
formAccentSoftHover
New boxShadow
values:
borderCautionLight
borderCriticalLight
borderInfoLight
borderPositiveLight
borderPromoteLight
atoms: Add new boxShadow
values: (#983)
borderCautionLight
borderCriticalLight
borderInfoLight
borderPositiveLight
borderPromoteLight
vars: Add new background and border colours (#983)
New backgroundColor
values:
brandAccentSoft
brandAccentSoftActive
brandAccentSoftHover
criticalSoft
criticalSoftActive
criticalSoftHover
formAccentSoft
formAccentSoftActive
formAccentSoftHover
New borderColor
values:
cautionLight
criticalLight
infoLight
positiveLight
promoteLight
Button, ButtonLink, ButtonRenderer: The soft
variant now has a solid background colour rather than an opacity. You may need to review any usage on top of coloured backgrounds. (#983)
Box, atoms, vars: Add large
and xlarge
to borderRadius
scale (#983)
apac
and seekBusiness
themes: Increase size of focus ring (accessed via the boxShadow
value of "outlineFocus"
) and use updated colour palette. (#983)
Display formAccent
outline on form elements when focused (#983)
Published by seek-oss-ci about 3 years ago
IconThumb, IconFlag: Add new icons (#980)
Autosuggest, Dropdown, MonthPicker, PasswordField, Textarea, TextField: Add aria-label & aria-labelledby support (#979)
In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.
EXAMPLE USAGE:
// Standard field label
<TextField label="My field" />
// Hidden field label
<TextField aria-label="My field" />
// Labelled by another element
<Heading id="title">Title</Heading>
<TextField aria-labelledby="title" />
Published by seek-oss-ci about 3 years ago
Checkbox, RadioGroup, Radio: Use atoms for label cursor styles (#973)
Since the disabled state of a checkbox can only be changed via JavaScript, cursor styles can be toggled via Box
props rather than generating additional CSS.
While this is an improvement in and of itself, this change is being made to work around a third-party testing bug where our use of :disabled
in a complex CSS selector is causing an exception to be thrown.
Published by seek-oss-ci over 3 years ago
TextField: Add characterLimit
prop (#963)
You can now provide a characterLimit
that will communicate when the input text approaches or exceeds the specified limit.
To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.
Published by seek-oss-ci over 3 years ago
Add wide
breakpoint of 1200px (#960)
This adds support for wide
to the following touchpoints:
{ mobile: 'small', wide: 'large' }
<Columns collapseBelow="wide" space={{ mobile: 'small', wide: 'large' }}>
responsiveStyle
function, e.g.
export const className = style(responsiveStyle({ wide: '...' }));
breakpoints
object, which now exposes the number 1200
via breakpoints.wide
, i.e.
{
mobile: 0,
tablet: 740,
desktop: 940,
wide: 1200
}
Add useResponsiveValue
Hook (#960)
This Hook will return the resolved value based on the breakpoint the browser viewport currently falls within (mobile
, tablet
, desktop
or wide
). As this can only be calculated in the browser, the value will also be null
when rendering server-side or statically rendering.
Note that this Hook returns a function so that it can be called anywhere within your component.
EXAMPLE USAGE
const responsiveValue = useResponsiveValue();
const screenSize = responsiveValue({
mobile: 'Small',
desktop: 'Large',
});
You can also resolve to boolean values for breakpoint detection.
const responsiveValue = useResponsiveValue();
const isMobile = responsiveValue({
mobile: true,
tablet: false,
});
const isDesktopOrAbove = responsiveValue({
mobile: false,
desktop: true,
});
Dialog, Drawer: Support nested Dialogs & Drawers (#959)
Remove restriction preventing the nesting of modal components, e.g. Dialog
and Drawer
. While it is still discouraged to keep experiences simple, there is no longer a technical guard against it.
Deprecate useBreakpoint
(#960)
This Hook has been deprecated in favour of the new useResponsiveValue
Hook.
This is because useBreakpoint
leads consumers to inadvertently couple themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.
For example, you may have chosen to detect large screens by checking that the user is on the (current) largest breakpoint (e.g. const isDesktop = useBreakpoint() === "desktop"
), but this logic would break if we introduced an even larger breakpoint and the Hook started returning other values.
To maintain backwards compatibility, useBreakpoint
will continue to return "desktop"
when the user is technically on larger breakpoints.
MIGRATION GUIDE
Note that the useResponsiveValue
Hook returns a responsiveValue
function, so in these cases we're double-calling the function.
-const isMobile = useBreakpoint() === 'mobile';
+const isMobile = useResponsiveValue()({
+ mobile: true,
+ tablet: false
+});
-const isTablet = useBreakpoint() === 'tablet';
+const isTablet = useResponsiveValue()({
+ mobile: false,
+ tablet: true,
+ desktop: false,
+});
-const isDesktop = useBreakpoint() === 'desktop';
+const isDesktop = useResponsiveValue()({
+ mobile: false,
+ desktop: true
+});
Published by seek-oss-ci over 3 years ago
Published by seek-oss-ci over 3 years ago
Narrow fontWeight
token type from string | number
to the expected values (#952)
Textarea: Fix "Received NaN for the rows
attribute." warning. (#950)
Fixes the warning in node testing environments where updating the rows
attribute was failing due to line-height
being normal
. Now falling back to the predefined lines
prop when the dynamic grow
size is not valid.
Published by seek-oss-ci over 3 years ago
Box: Remove transform="touchable"
in favour of transform={{ active: 'touchable' }}
(#947)
MIGRATION GUIDE
-<Box transform="touchable">
+<Box transform={{ active: 'touchable' }}>
Updated minimum browser requirement to browsers that support CSS variables (#947)
For the major browsers this includes:
Update minimum required sku version to 10.13.1
(#947)
BREAKING CHANGE
Ensure your version of sku is at least 10.13.1
. This is required as Braid now uses vanilla-extract for styling.
Standardise breakpoints across all themes (#947)
All themes now use the following breakpoints:
0px
740px
992px
BREAKING CHANGE
This is a change for the following themes:
jobStreet, jobStreetClassic, jobsDb, occ, wireframe
768px
→ 740px
catho
600px
→ 740px
1024px
→ 992px
docs
768px
→ 740px
1136px
→ 992px
Migrate to vanilla-extract (#947)
Braid now uses vanilla-extract rather than treat to power its theme-based styling.
Since they use different file extensions (.css.ts
vs .treat.ts
), we're able to ease the migration by supporting both approaches simultaneously in the same project.
While we encourage you to write new CSS with vanilla-extract files and slowly migrate your existing treat files over time, the goal is to eventually remove treat entirely to enable further improvements to build tooling.
We've written a treat to vanilla-extract migration guide to make it easier when opting to migrate a treat file. If you have any questions or concerns, or if you need assistance with implementation or migration work, please reach out to us in the #braid-support
channel.
BREAKING CHANGE
React Portals containing Braid components/styles must use the new BraidPortal
component
CSS-based theming doesn't automatically cascade through React portals. The new BraidPortal
component handles this for you by forwarding Braid's CSS variables through the portal.
-import { createPortal } from 'react-dom';
+import { BraidPortal } from 'braid-design-system';
// ...
-return open ? createPortal(<SomeComponent />) : null;
+return open ? (
+ <BraidPortal>
+ <SomeComponent />
+ </BraidPortal>
+) : null;
TextLinkRenderer: Allow custom CSS reset via the reset
prop, and allow it to be disabled by setting the prop to false
. (#947)
Support object notation for responsive props (#947)
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' }
Add breakpoints object for accessing standard breakpoint values (#947)
The breakpoints object provides a named set of screen sizes that form the basis of all responsive rules in Braid, available in the following format:
{
mobile: 0,
tablet: 740,
desktop: 992
}
Add globalTextStyle and globalHeadingStyle functions for applying standard text styles to foreign markup in vanilla-extract stylesheets (#947)
Note: These utilities should only be used when you have no control over the HTML.
EXAMPLE USAGE
// styles.css.ts
import { style, globalStyle } from '@vanilla-extract/css';
import { globalHeadingStyle, globalTextStyle } from 'braid-design-system/css';
export const root = style({});
// Target all <h2> elements within the root class
globalStyle(
`${root} h2`,
globalHeadingStyle({
level: '2',
}),
);
// Target all <p> elements within the root class
globalStyle(
`${root} p`,
globalTextStyle({
size: 'standard',
weight: 'regular',
}),
);
Add atoms function for accessing re-usable atomic classes within vanilla-extract stylesheets (#947)
Braid's re-usable atomic classes were previously only available via Box
, but they are now accessible via the new atoms
function.
// styles.css.ts
import { atoms } from 'braid-design-system/css';
export const className = atoms({
paddingTop: 'small',
});
This allows you to co-locate custom styles with Braid's atomic classes in your stylesheets.
// styles.css.ts
import { style, composeStyles } from '@vanilla-extract/css';
import { atoms } from 'braid-design-system/css';
export const className = composeStyles(
atoms({ position: 'absolute' }),
style({ top: 300 }),
);
Add responsiveStyle function for creating custom mobile-first styles within vanilla-extract stylesheets (#947)
EXAMPLE USAGE
// styles.css.ts
import { style } from '@vanilla-extract/css';
import { vars, responsiveStyle } from 'braid-design-system/css';
export const className = style(
responsiveStyle({
mobile: {
flexBasis: vars.space.small,
},
tablet: {
flexBasis: vars.space.medium,
},
desktop: {
flexBasis: vars.space.large,
},
}),
);
// is equivalent to
import { style } from '@vanilla-extract/css';
import { vars, breakpoints } from 'braid-design-system/css';
export const className = style({
flexBasis: vars.space.small,
'@media': {
[`screen and (min-width: ${breakpoints.tablet}px)`]: {
flexBasis: vars.space.medium,
},
[`screen and (min-width: ${breakpoints.desktop}px)`]: {
flexBasis: vars.space.large,
},
},
});
Add vars object for accessing themed CSS variables within vanilla-extract stylesheets and runtime files. (#947)
Theming is now achieved natively with CSS variables rather than generating separate styles for each theme. CSS variables are exposed via the braid-design-system/css
import.
// styles.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from 'braid-design-system/css';
export const className = style({
paddingTop: vars.space.small,
});
Published by seek-oss-ci over 3 years ago