Themeable design system for the SEEK Group
MIT License
Bot releases are hidden (Show)
Published by seek-oss-ci over 3 years ago
CheckboxStandalone:: Add component (#935)
Adds support for cases where a Checkbox needs to be used without a form field style label.
To maintain accessibility, it is required to provide either a aria-label or aria-labelledby property, to describe the field's intent.
Given there is no visual label, the following features from a standard Checkbox cannot be supported:
EXAMPLE USAGE:
<CheckboxStandalone
id={...}
checked={...}
onChange={...}
aria-label="Label"
/>
Add support for data attribute maps on all components. (#934)
EXAMPLE USAGE:
<Alert
data={{
testId: 'message',
}}
/>
// => <div data-testId="message" />
Published by seek-oss-ci over 3 years ago
Checkbox,RadioGroup,Toggle: Add size
support to Checkbox, RadioGroup & Toggle (#928)
Adds support for adjusting the size
of a Checkbox
, the RadioItems within a RadioGroup
or a Toggle
. Setting the size adjusts both the visual control and the text size of the label.
EXAMPLE USAGE:
<Checkbox size="small" label="Label" />
<RadioGroup size="small" label="Label">
...
</RadioGroup>
<Toggle size="small" label="Label" />
Pagination: Add keyline to improve active page indicator contrast (#926)
Improves the contrast of the active page indicator by adding a keyline when Pagination
is used outside of a Card
.
Published by seek-oss-ci over 3 years ago
Accordion, AccordionItem: Allow customisation of size, tone, space and dividers. (#925)
Note that, to ensure adequate space for touch targets, the space
prop only accepts values of "medium"
, "large"
and "xlarge"
.
EXAMPLE USAGE
<Accordion size="standard" tone="secondary" space="xlarge" dividers={false}>
<AccordionItem label="Accordion item 1">...</AccordionItem>
<AccordionItem label="Accordion item 2">...</AccordionItem>
<AccordionItem label="Accordion item 3">...</AccordionItem>
</Accordion>
Published by seek-oss-ci over 3 years ago
characterLimit
is provided (#919)Published by seek-oss-ci over 3 years ago
Published by seek-oss-ci over 3 years ago
Text
elements (#912)Published by seek-oss-ci over 3 years ago
Box: Support responsive borderRadius
(#910)
Adds support for responsive values to borderRadius
.
EXAMPLE USAGE:
<Box borderRadius={['none', 'standard']}>...</Box>
Button: Add support for ref
and tabIndex
props (#905)
Card: Add component
support (#910)
The HTML tag can be customised to ensure the underlying document semantics are meaningful. This can be done using the component prop and supports div
(default), article
, aside
, details
, main
and section
.
EXAMPLE USAGE:
<Card component="article">...</Card>
Badge: Add support for ref
, tabIndex
and aria-describedby
props (#905)
Card: Add tone
support (#910)
Specifying a tone
will now add a keyline down the left hand side of the container. The supported tones are promote
and formAccent
.
As a result, Cards are now position relative containers.
EXAMPLE USAGE:
<Card tone="formAccent">...</Card>
TextLink, ButtonLink: Add support for ref
prop (#905)
Card: Add rounded
and roundedAbove
support (#910)
Card corners can be rounded by providing the rounded
prop.
Alternatively, rounding may be applied responsively using the roundedAbove
prop, and providing either mobile
or tablet
. This enables card edges to be softened on larger screens, but squared off if it runs full bleed on smaller devices.
EXAMPLE USAGE:
<Card rounded>...</Card>
or
<Card roundedAbove="mobile">...</Card>
Published by seek-oss-ci over 3 years ago
Published by seek-oss-ci over 3 years ago
Box: Support value of default
on cursor
prop (#901)
EXAMPLE USAGE
<Box cursor="default">...</Box>
TooltipRenderer: Add placement
prop, support top
and bottom
. Set default placement to top
. (#901)
EXAMPLE USAGE
<TooltipRenderer
id={id}
tooltip={<Text>This is a tooltip!</Text>}
placement="bottom"
>
{({ triggerProps }) => (
<Box aria-label="Help" {...triggerProps}>
<IconHelp />
</Box>
)}
</TooltipRenderer>
Button, ButtonLink, ButtonRenderer: Add bleedY
prop (#900)
You can now choose to allow the button’s background colour to bleed out into the surrounding layout, making it easier to align with other elements.
For example, we can align a button to a Heading element using an Inline, even though the button is actually taller than the heading. If we didn’t use the bleedY prop in this case, the button would introduce unwanted space above and below the heading.
EXAMPLE USAGE:
<Inline space="small" alignY="center">
<Heading level="4">Heading</Heading>
<Button bleedY>Button</Button>
<Button bleedY size="small">
Button
</Button>
</Inline>
Published by seek-oss-ci over 3 years ago
Add TooltipRenderer component (#897)
Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.
Tooltips cannot contain interactive elements like links, buttons or form elements.
Note: The trigger element must support ref
, tabIndex
and aria-describedby
props.
EXAMPLE USAGE
<TooltipRenderer id={id} tooltip={<Text>This is a tooltip!</Text>}>
{({ triggerProps }) => (
<Box aria-label="Help" {...triggerProps}>
<IconHelp />
</Box>
)}
</TooltipRenderer>
Published by seek-oss-ci over 3 years ago
Box: Add borderBrandAccentLarge
to boxShadow
prop (#893)
Text, Icons: Add brandAccent tone to Text and Icons (#893)
EXAMPLE USAGE:
<Text tone="brandAccent">...</Text>
Button,ButtonLink: Add variant to Button and deprecate weight (#893)
Introduces a new variant
prop to Button
/ButtonLink
giving consumers a single prop to use for selecting the visual style of the button. Choose from solid
(default), ghost
, soft
or transparent
. The colour of the button is now consistently controlled via the tone
prop, with supported values being "brandAccent"
, "critical"
or undefined
.
As a result the weight
prop is now deprecated. See the migration guide below.
EXAMPLE USAGE:
<Inline space="small" collapseBelow="desktop">
<Button>Solid</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>
<Button variant="transparent">Transparent</Button>
</Inline>
MIGRATION GUIDE:
The weight
prop is now deprecated. If you are not specifying a weight
there is no change required.
If you are, each weight can be migrated as follows:
Can be replicated with a variant
of solid
(default).
-<Button weight="regular">...</Button>
+<Button variant="solid">...</Button>
Given it is the default variant
, you could also choose to simply remove the weight
prop.
-<Button weight="regular">...</Button>
+<Button>...</Button>
Can be replicated with a variant
of solid
(default), with a tone
of brandAccent
.
-<Button weight="strong">...</Button>
+<Button tone="brandAccent">...</Button>
Can be replicated with a variant
of ghost
.
-<Button weight="weak">...</Button>
+<Button variant="ghost">...</Button>
TextLink,TextLinkButton: Deprecate inside of Actions in favour of transparent Button (#893)
Usage of TextLink
or TextLinkButton
inside of an Actions
container should now use a Button
with a variant
of transparent
.
Previously when a TextLink
or TextLinkButton
was placed inside of an Actions
container, it would be given a custom layout to align with the Button
elements. We are deprecating this behaviour.
MIGRATION GUIDE:
Going forward Actions
should only contain Button
elements. To migrate towards this, both TextLink
and TextLinkButton
should now use either a ButtonLink
or Button
respectively, with a variant
or transparent
.
<Actions>
<Button>...</Button>
- <TextLink href="...">...</TextLink>
+ <ButtonLink href="..." variant="transparent">...</ButtonLink>
</Actions>
<Actions>
<Button>...</Button>
- <TextLinkButton onClick={...}>...</TextLinkButton>
+ <Button onClick={...} variant="transparent">...</Button>
</Actions>
Button, ButtonLink: Remove all interactive styles when loading (#895)
No longer applies hover and cursor pointer styles when a Button
is set to loading
.
Published by seek-oss-ci over 3 years ago
Published by seek-oss-ci over 3 years ago
Hidden: Add component
support (#880)
You can now customise the DOM element rendered when using Hidden
. If no component
is specified, it will fall back to the current behaviour — a div
by default, or a span
when setting inline
to true
.
EXAMPLE USAGE:
<Hidden component="li">...</Hidden>
Pagination: Add component (#880)
EXAMPLE USAGE:
<Pagination
label="Search results pagination"
page={1}
total={20}
linkProps={({ page }) => ({
href: `/results?page=${page}`,
})}
/>
Published by seek-oss-ci over 3 years ago
Button, ButtonLink, ButtonRenderer, Actions: Add size
prop, support small
size (#879)
You can now render smaller variants of button/action elements by setting the size
prop to small
.
EXAMPLE USAGE
Small Button
<Button size="small">Small Button</Button>
Small Actions
<Actions size="small">
<Button>Regular Button</Button>
<Button weight="weak">Weak Button</Button>
<TextLink href="#">TextLink</TextLink>
</Actions>
standard
size from gutter
to medium
(#879)Published by seek-oss-ci over 3 years ago
Tabs: Add divider
prop, support full
and none
(#875)
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>
Published by seek-oss-ci over 3 years ago
Published by seek-oss-ci almost 4 years ago
Published by seek-oss-ci almost 4 years ago
Use JSDoc comments to flag deprecated components (#860)
You will now receive in-editor warnings and migration guidance when using deprecated components.
Autosuggest: Fix bug where async suggestions may not be visible (#862)
This fixes a bug where suggestions wouldn't become visible if the suggestions
prop was initially empty and then populated asynchronously, only becoming visible on the next user interaction, e.g. typing in the field.
Published by seek-oss-ci almost 4 years ago
MenuItem, MenuItemLink: Add support for critical
tone (#855)
For destructive actions (e.g. "Delete") you can now provide a tone
prop with a value of "critical"
.
EXAMPLE USAGE
<OverflowMenu label="Options">
<MenuItem tone="critical" onClick={() => {}}>
Delete
</MenuItem>
</OverflowMenu>
Published by seek-oss-ci almost 4 years ago
Box: Add "criticalActive"
and "criticalHover"
to background
prop (#851)
Button, ButtonLink, ButtonRenderer: Add support for critical
tone (#851)
For destructive actions (e.g. "Delete") you can now provide a tone
prop with a value of "critical"
.
EXAMPLE USAGE
<Button tone="critical">
<IconDelete /> Delete
</Button>
Box: Add "borderCriticalLarge"
to boxShadow
prop (#851)