Themeable design system for the SEEK Group
MIT License
Bot releases are visible (Hide)
Published by seek-oss-ci about 1 year ago
TooltipRenderer: Re-evaluate position when trigger
or children
changes (#1374)
Fixes an issue where the tooltip would not re-evaluate its position when the trigger
or children
prop changed while the tooltip was already open.
Published by seek-oss-ci about 1 year ago
Preserve new lines in the output code (#1372)
Before:
const responsiveValue = useResponsiveValue();
const isMobile = responsiveValue({
mobile: true,
tablet: false,
});
const isDesktopOrAbove = responsiveValue({
mobile: false,
desktop: true,
});
After:
const responsiveValue = useResponsiveValue();
const isMobile = responsiveValue({
mobile: true,
tablet: false,
});
const isDesktopOrAbove = responsiveValue({
mobile: false,
desktop: true,
});
Published by seek-oss-ci about 1 year ago
source.macro
package (#1362)Published by seek-oss-ci about 1 year ago
When animating an SVG circle, it seems that the width changes slightly, which on Loader was causing the right-most one to push off the boundaries of the SVG View Box. (#1370)
This has been fixed so clipping should no longer occur.
Published by seek-oss-ci about 1 year ago
Button, ButtonLink: Default to neutral ghost in non-legacy themes (#1363)
By default, a button now has a neutral
tone and uses the ghost
variant, allowing the visual prominence to be increased or decreased as required, enabling colour to be applied as accents and with purpose, rather than by default.
<Button />
// => tone="neutral" & variant="ghost"
To compliment this, when a tone
is purposefully applied, the default variant becomes solid
to maximise its impact — allowing the visual prominence to be reduced as needed.
<Button tone="brandAccent" />
// => tone="brandAccent" & variant="solid"
apac
and seekBusiness
consumersGiven the fundamental change in approach to colour and usage of such a core component, this change has been isolated to newer themes and does not impact apac
and seekBusiness
consumers.
These themes will continue to have a tone of formAccent
and a solid
variant by default, allowing consumers to adopt this new approach as part of the design uplift when migrating to an updated theme, e.g. seekJobs
.
Published by seek-oss-ci about 1 year ago
Button, ButtonLink: Provide formAccent
as the name for undefined tone (#1359)
Formalise the name of the undefined
tone as formAccent
, making it more discoverable as an accent available for increased prominence.
Note: Consumers should only apply this tone where an action should be emphasized explicitly. The undefined
value is still valid for buttons that should follow the default button style of the theme.
EXAMPLE USAGE:
<Button tone="formAccent">...</Button>
Published by seek-oss-ci about 1 year ago
seekJobs: Change link colour to neutral (#1347)
Changing the foregroundColor
token for link
on the seekJobs
theme to align with neutral text.
Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.
This affects the following usages across the system:
vars.foregroundColor.link
Text
(using tone="link"
)TextLink
and (TextLinkButton
)TextLink, TextLinkButton: Underline regular links in non-legacy themes (#1347)
To improve affordance beyond primarily being colour, a TextLink
(and TextLinkButton
) will now always be underlined, in line with best practice accessibility guidelines.
Given this has not been the case previously, this decision has been applied to non-legacy themes only, as such only affecting consumers of seekJobs
, docs
and wireframe
.
TextLink, TextLinkButton: Apply themed focus outline (#1347)
Apply a focus outline using the relevant focus attributes from the theme, bringing TextLink
(and TextLinkButton
) into line with the focus treatment applied to rest of the system.
TextLink, TextLinkButton: Reduce weak
links to regular
font weight (#1347)
The font weight of a weak
link is now reduced to regular
weight, reducing the link's visual prominence in addition to following the neutral text colour.
docs: Lighten soft background tokens (#1347)
Lighten the brandAccentSoft
and formAccentSoft
background tokens for the docs
theme.
Dialog, Drawer: Adapt max height to available viewport space (#1352)
Make use of the new dynamic viewport units for applying a max height to modal elements such as Dialog
and Drawer
. These new units take into account dynamic browser toolbars that expand and contract as the user scrolls, ensuring the browser interface never obscures the web site content.
Fix also incorporates fallback for older browsers to use regular viewport units.
Published by seek-oss-ci about 1 year ago
Published by seek-oss-ci about 1 year ago
Drawer: Prevent close button protruding in left position (#1351)
Fixes an issue where the close button could protrude from a Drawer
.
This was only visible when setting position
to left
and between a small range of screen widths — above 660px (small
content width) and below 768px (tablet
breakpoint).
RadioGroup: Ensure reserveMessageSpace
prevents layout shift correctly (#1349)
Consider the reserveMessageSpace
prop as well as message
when conditionally applying internal padding between radio list and field message.
Published by seek-oss-ci about 1 year ago
Page: Add component (#1343)
The new Page
component establishes a consistent page-level layout by managing the relationship between the footer and the main content.
By default, for pages with limited content the footer
will at a minimum be placed at the bottom of the screen, pushed beyond as the page content grows.
For pages with dynamic content, it is recommended to place the footer out of view by setting the footerPosition
prop to belowFold
to prevent the footer from popping in and out of view when the page content changes, e.g. toggling between a loading indicator and content.
EXAMPLE USAGE:
<Page footer={<Footer />}>
<Header />
{/* page content... */}
</Page>
TabPanel: Align focus outline radius to scale (#1345)
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.
Published by seek-oss-ci about 1 year ago
apac, seekBusiness: Increase medium
font weight (#1331)
The unicode range of Thai characters is not satisfied by the preferred fonts specified for the apac
theme, resulting in these characters falling through and being rendered by sans-serif
— which applies a platform-specific font.
These system fonts do not have support for the semi-bold weight chosen for medium
, resulting in the visual weight of medium
text being rounded down to regular
— providing no differentiation relative to other text in the UI.
In addition, due to both Helvetica
and Arial
not having a medium
weight, these fallbacks also have the same problem, even for Latin characters.
By increasing the value of medium
, it will now round to strong
when the rendered font cannot satisfy medium
— preventing the loss of hierarchy.
This only affects apac-based themes, namely apac
and seekBusiness
.
Published by seek-oss-ci about 1 year ago
Drawer, Dialog: Increase gutter around close button (#1328)
Fix for a regression where the gutter around the close button was reduced — resulting in visually clashing with the content when scrolling.
Published by seek-oss-ci over 1 year ago
seekJobs: Update visited link colour tokens (#1323)
Darken the visited link colour tokens within the seekjobs
theme.
Published by seek-oss-ci over 1 year ago
IconEnlarge: Add new component (#1320)
EXAMPLE USAGE:
<IconEnlarge />
The active
prop can be used to toggle the icon into the "reduce" state:
<IconEnlarge active={true} />
Published by seek-oss-ci over 1 year ago
Drawer, Dialog: Support validation blocking closure of modal (#1318)
To prevent a Dialog
or Drawer
from closing, e.g. due to validation, the onClose
function can now return false.
EXAMPLE USAGE:
<Drawer
open={open}
onClose={() => {
const valid = runValidation();
if (!valid) {
return false;
}
setOpen(false);
}}
/>
TooltipRenderer: Fix arrow overlapping tooltip corner radius (#1316)
Fix for an edge case where the arrow on a small tooltip could the overlap the corner radius of the tooltip.
Drawer: Darken backdrop in dark mode (#1316)
Increase the weight of the backdrop in dark mode to ensure the content is suffiently obscured.
Drawer: Fix entrance animation from left
position (#1316)
Apply the entrance animation correctly for a Drawer
using the left
position.
Also reduced the horizontal overshoot for the transition for a smoother feel.
Drawer: Increase space between title
and description
on tablet (#1316)
Drawer: Align horizontal gutters with PageBlock (#1316)
Given a Drawer
is full width on a mobile device, applying the same horizontal gutter rules as PageBlock
makes sense.
This ensures content on a mobile will have the same available space whether its in the page, or inside a Drawer
.
Published by seek-oss-ci over 1 year ago
PageBlock: Add new component (#1307)
Provides a top-level page container, constraining the content width (using ContentBlock
) while establishing common screen gutters on smaller devices.
EXAMPLE USAGE:
<PageBlock width="large">...</PageBlock>
Button, TextLinkButton: Add aria-label
support (#1304)
Provide support for aria-label
, enabling additional context to be given to assistive technologies where context is typically visual.
EXAMPLE USAGE:
<Button aria-label="Save job">Save</Button>
IconMessage: Add new component (#1303)
Add new IconMessage
component.
EXAMPLE USAGE:
<IconMessage />
Published by seek-oss-ci over 1 year ago
Hide field borders in dark containers (#1294)
Reduce visual noise when a form field is displayed in a dark container by hiding the default border.
As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.
Add seekJobs
theme (#1281)
The seekJobs
theme encapsulates the system changes necessary to apply and deliver the updated visual design language for SEEK Jobs.
Through the development of this theme, we have been able improve the fidelity of the various scales in our tokens, while also ensuring that the tokens themselves are consumed and applied more consistently throughout the system itself.
EXAMPLE USAGE:
import seekJobs from 'braid-design-system/themes/seekJobs';
<BraidProvider theme={seekJobs}>...</BraidProvider>;
MIGRATION
Consumers of the apac
theme are not recommended to migrate independently. The seekJobs
theme represents an uplifted visual identity that is part of a wider visual uplift.
Instead, we’ll be guiding the initial teams through a staged migration in coordination with the centralised team process.
There are some differences in how certain concepts are applied, whether it's the space scale, or Card
usage, etc., and we will be documenting these in due course.
If you would like to talk about migrating, please reach out to us in our #braid-support channel on slack.
Published by seek-oss-ci over 1 year ago
Text, Heading: Only show truncate deprecation message when true (#1289)
Only show the truncate deprecation message when truncate
is provided and set to true
TextLink, TextLinkButton: Improve underline position for wrapping text (#1290)
Refine the underline position to be consistent across the whole typographic hierarchy, ensuring it does not interfere with wrapping lines of text.
Published by seek-oss-ci over 1 year ago
Text, Heading: Add maxLines
support (#1286)
Provide support for limiting the number of lines shown by a Text
or Heading
component.
EXAMPLE USAGE:
<Text maxLines={3}>...</Text>
MIGRATION:
With the addition of this feature, the truncate
prop is now deprecated and will be removed in a future release.
Existing consumers should start migrating as below:
<Text
- truncate
+ maxLines={1}
/>
Card: Add full height support (#1285)
Provide support for making a Card
use all available vertical space.
This is useful when laying out rows of Card
elements and having them all be equal height.
EXAMPLE USAGE:
<Card height="full">...</Card>
TextLink, TextLinkButton: Update underline design (#1288)
Uplift the design of the the text underline used on TextLink
and TextLinkButton
components.
Column: Support full height content (#1285)
Provide support for full height content by growing all Column
elements to be uniform in height.
This will have no effect on the content itself, but enables consumers to create designs of uniform content, such as rows of Card
elements.
Published by seek-oss-ci over 1 year ago
RadioItem, Checkbox: Fix stacking context behaviour (#1284)
A RadioItem
and Checkbox
previously created a new stacking context with an elevated z-index
applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when toggling nested content.
For example, toggling nested content containing an Autosuggest
, would see the list of suggestions list would be overlayed by the next RadioItem
on hover.
To fix this, the z-index
is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is checked.
Textarea: Adjust highlightRange
background to support different line heights (#1279)
Remove the vertical padding on the highlight element to prevent the background colour overlapping the wavy underline in themes with tighter line heights.
MenuItemCheckbox: Align checkbox size with a small
Checkbox (#1276)
Align the size of a MenuItemCheckbox
with a small
sized Checkbox
.
Checkbox, RadioItem: Fix alignment with updated Badge layout (#1280)
Improve layout to work with updated Badge layout which is no longer driven by line height.
MonthPicker: Reduce space between fields (#1277)
Reduce the space between the month and year fields.