Reactist follows semantic versioning and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
- [Feat] Add
ref
support toModalBody
component
- [Fix] Restrict focus locking in the
Modal
component to its containing document/iframe.
- [Feat] Add
xsmall
size to theModal
component
- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
- [BREAKING] Remove unsupported
onPointerEnterCapture
andonPointerLeaveCapture
props fromheading
-,input
-, andtextarea
-based components. - [BREAKING] Removed the
ButtonLink
component. - [BREAKING]
Button
no longer accepts props that render it as an icon-only button. - [BREAKING] Use an explicit
render
prop for composition, instead of theas
prop (in the menu, modal, tabs, toasts and tooltip components). - [BREAKING]
TabPanel
's proprender
is renamed torenderMode
. - [Feat] Introduce a new
IconButton
component. - [Feat] The
Button
andIconButton
component can be rendered as a link using the `render={} prop.
- [Fix] Allow more props to be forwarded to the
Tab
component. - [Fix] Properly fix CSS build in tsdx config.
- [Chore] Upgrade to
@ariakit/[email protected]
.
- [Fix] Pass
onClick
to theTab
component.
- [BREAKING] Use an explicit
render
prop for composition, instead of theas
prop (in the menu, modal, tabs, toasts and tooltip components). - [BREAKING]
TabPanel
's proprender
is renamed torenderMode
.
- [BREAKING] Removed the
ButtonLink
component. - [BREAKING]
Button
no longer accepts props that render it as an icon-only button. - [Feat] Introduce a new
IconButton
component. - [Feat] The
Button
andIconButton
component can be rendered as a link using the `render={} prop.
- [Fix] Include changes from v23.3.0 in the beta release
- [Fix] Include changes from v23.2.2 in the beta release
- [Fix] Include changes from v23.2.1 in the beta release
- [Fix] Remove unsupported
onPointerEnterCapture
andonPointerLeaveCapture
props fromheading
-,input
-, andtextarea
-based components. - Normally, this would be considered a breaking change, but the v24 version is still pre-release and already contains breaking changes.
- [Fix] Reset anchor rect after context menu is closed.
- [Fix] Revert earlier attempt to auto-close menus when they lose focus.
- [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue.
- [Fix] Auto-close menus when they lose focus to elements other than their own content or their sub-menus.
- [Feat] Include changes from v23.2.0 in the beta release
- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
- [Feat] Add
warning
as atone
option forBadge
.
- [Fix] Revert "Adjust modal alignment to the middle of the viewport at
800px
breakpoint for improved UX". Turns out that this is not something that we want to do.
- [Fix] Adjust modal alignment to the middle of the viewport at
800px
breakpoint for improved UX.
- [Feat] Add
medium
as aweight
option forHeader
.
- [Feat] Add
--reactist-font-family-monospace
with updated font family for monospace elements
- [BREAKING] Remove unsupported
crossOrigin
attribute frominput
- andtextarea
-based components. - [BREAKING] Remove unsupported
placeholder
attribute from heading components.
- [Fix] Vertical alignment of inline code elements inside a
Prose
component
- [Fix] Text inside a
Badge
no longer wraps into multiple lines.
- [Tweak] Increase showing tooltip delay to 1 second from 500ms
- [Build] Add support for Node v21
- [Feat] The
Alert
component now has a new design. Input based components will now also expose a--reactist-inputs-alert
CSS variable to customize their border colours when put into an error state
- [Build] Add support for Node v20 and npm v10
- [BREAKING] Remove
DeprecatedModal
.
- [Feat]
ToastProvider
accepts an optionalcontainerClassName
property, which let's you to add your own class for the container of all toasts.
- [Fix] Prevent horizontal expansion of
TextArea
withautoExpand={true}
.
- [Docs] Fix links to Reactist components in storybook stories.
- [Docs] Fix links to Reactist components in storybook stories.
- [Feat]
Textfield
,PasswordField
,SelectField
, andTextArea
will now use two new CSS variables to define their border colors:--reactist-inputs-focus
,--reactist-inputs-idle
. If they were previously set using--reactist-divider-primary
and--reactist-divider-secondary
, they will continue to work as well.
- [Fix] Using a menu both triggered by a button and by right-click.
- [Feat] The
Prose
component now supports links applied to inline code.
- [Fix]
Tabslist
's default spacespace='xsmall'
is removed to get rid of unnecessary gap between tabs.
- [Fix]
TextArea
withautoExpand={true}
applies it initially, acknowledging any initial value that the field may have. - [Fix] Avoid tooltip re-creating the anchor element when the tooltip content switches being present or not.
- [BREAKING]
TextField
'sstartIcon
property is now renamedstartSlot
. - [Feat] New
startSlot
andendSlot
props on theTextField
component. These support rendering not only icons, but buttons too. - [Fix]
TextField
'sstartSlot
is now properly aligned when usingvariant="bordered"
. - [Fix]
TextField
is now properly focused when clicking anywhere inside its bordered area. - [Tweak]
PasswordField
's toggle visibility button is now implemented by using theTextField
'sendSlot
feature.
- [Feat] Toasts wrapped in
ToastsProvider
are now dismissed when their actiononClick
handler fires.
- [Feat] Expose CSS variables for theming the
SwitchField
component.
- [Feat] New
Prose
component to style free-form HTML content consistently.
- [Fix] Slightly tweak the height of the
Badge
component.
- [Fix] Slightly tweak the height of the
Badge
component.
- [Fix]
Badge
component content is now bold and the appropriate line-height is enforced.
- [BREAKING] Remove
usePrevious
hook - [BREAKING] Remove
DeprecatedNotification
component - [BREAKING] The
Menu
component now uses Reactist CSS variables to style itself
- [Fix] Export new
Banner
component.
- [Feat] A new
Banner
component.
- [Fix]
Tooltip
s can now have its z-index customized using the--reactist-stacking-order-tooltip
custom property. - [Fix]
Tooltip
s now have a 300px max-width.
- [BREAKING] A new
Badge
component with various breaking changes- The prop
variant
has been renamed totone
- The new possible set of tones is different from the variants previously supported
- New CSS custom properties to control the
Badge
's component appearance (tones and font size) - The badge label is now provided via a
label
prop instead of viachildren
- The prop
- [BREAKING] Update
ariakit
to next.43 andariakit-utils
to next.27. Depending on your set up,node_modules/ariakit*
dependencies may need to be transpiled. - [BREAKING]
Menu
will now render in modal mode by default. This can be turned off by passingmodal={false}
toMenuList
.
- [BREAKING] Renames the CSS variable for primary text content inside toasts and tooltip. Previous name was
--reactist-content-toast
, now replaced with the new name--reactist-toast-content-primary
. - [Feat] New CSS variable to control the color of secondary text inside toasts and tooltip:
--reactist-toast-content-secondary
. - [BREAKING] The
Tooltip
component no longer accepts generic props to be forwarded as generic HTML attributes to the tooltip content container. In particular, it no longer accepts aclassName
to customize its appearance. - [Tweak] Modernizes the implementation of the tooltip, specifically by making it based on the new styling approach based on CSS variables.
- [Feat] Adds the ability to render tooltips with an arrow-like element pointing to the trigger element.
- [Fix] The tooltip content is set as the accessible description of the trigger element.
- [Fix] Ensure that any element inside a
Button
orButtonLink
is non-clickable, to facilitate event tracking with tools such as Google Analytics.
- [Feat] Passing
autoExpand
to theTextArea
component makes it auto-expand its height to fit the content as you type. - [Feat] The
TextArea
component now supports receiving a ref that's forwarded to thetextarea
element.
- [Fix] Tabs layout got broken after the
Inline
element switched to usegap
for spacing.
- [Feat] New
gap
prop in theBox
component, implementing support for the CSSgap
property. - [Tweak] Use CSS
gap
for implementing spacing in theColumns
,Inline
, andStack
components.
- [Fix] When clicking inside a modal, holding and releasing the click outside the modal no longer closes the modal
- [Feat] New
Modal
propportalElement
, to enable consumers of theModal
component to have some control on where the modal portal is rendered. - [Feat] The
Badge
component now renders as an inline element, which makes it more versatile in common situations when it's needed. For instance, to render it inside other elements such as buttons, links, etc.
- [Feat] Add
startIcon
support toTextField
- [Tweak] Upgrade Ariakit version to 2.0.0-next.30
- [Feat] Add
variant
prop support toSelectField
component.
- [Feat] Add support for controlling whether a
Modal
can be dismissed by pressingEscape
or with a click event on the modal overlay.
- [Fix] Enforce standard padding in the
CheckboxField
component and accept anicon
attribute
- [Feat] Add support for providing a class to a
Modal
overlay
- [Feat] Add support for
Menu
as a context menu - [Fix] Allow
SubMenu
s to be rendered and support keyboard navigation
- [Fix] Enforce minimum width for the checkbox icon in the
CheckboxField
component
- [Breaking] Allow to customize the TextLink styles (color and text-decoration) via CSS variables
- [Build] Add support for Node v18 and npm v9
- [Breaking] The
Notification
component is renamed asDeprecatedNotification
- [Feat] The
Box
component now supports a newbackground="toast"
- [Feat] A new
Toast
component anduseToasts
hook - [Fix] Sets
Badge
to semibold
- [Feat] Introduces a
Badge
component
- [Feat] Enhance the
label
property inCheckboxField
to be of typeReact.ReactNode
- [Feat] Fields without label show no spacing above the field
- [Fix]
TextArea
can now be hidden - [Fix]
TextArea
now properly support receiving an explicit alternative aria-describedby attribute - [Fix] TextArea is changed to only allow resizing vertically. This ensures that the consumer of the component can control the width via the maxWidth prop.
- [Breaking] The
Modal
has its internals replaced with Ariakit. This should not introduce any user-facing changes, but the old modal will be available asDeprecatedModal
to help with the transition. - [Fix] Set
min-height
andmax-height
on.reactist_menulist
.
- [Fix] Pins the ariakit dependencies.
- [Feat]
Tabs
by default have a shorter height, but this can be customized by overriding an exposed css variable
- [Breaking] The
color
prop has been removed fromTabs
, andvariant
now only supportsthemed
andneutral
as options. - [Fix]
Tooltip
will now correctly use an anchor component with anas
prop
- [Breaking] Button's
tooltipGapSize
prop is no longer supported. When wanting to customize the tooltip appearance, consumers should take ownership of rendering the tooltip manually. - [Breaking] Icon-only buttons can have their implicit "aria-label as tooltip" behaviour suppressed by passing
tooltip={null}
. Useful when wanting to get full control over rendering the tooltip manually. - [Breaking] Remove deprecated components
Checkbox
,DeprecatedLoading
andDeprecatedModal
. - [Breaking] Remove
Popover
- [Breaking] The following components have been renamed and will be removed in a future major release:
Dropdown
->DeprecatedDropdown
Input
->DeprecatedInput
, useTextField
instead.Select
->DeprecatedSelect
, useSelectField
instead.
- [Feat] Allow buttons to have fully rounded/circular corners.
- [Fix] Only apply full width labels when the button is full width
- [Fix] Reset input padding for
variant="bordered"
TextField
.
- [Feat] New
message
andtone
props that allow to associate a visual and semantic message to various field components. Supported inTextField
,PasswordField
,TextArea
andSelectField
. - [Feat] New
variant="bordered"
supported inTextField
,PasswordField
andTextArea
. It renders the field and its labels enclosed in an outer border, rather than having a border around the editing area only.
- [Fix] Better default alignment between the
MenuList
and theMenuButton
- [Fix] Missing styling for
MenuList
in Safari
- [Fix]
Tooltip
was overriding its anchor'sref
, preventing it from successfully forwarding its ref
- [Fix] Fix publishing flow
- [Breaking] Dropped support for React 16
- Internally, Reactist will now use React 17 and TypeScript v4.6. Targets for
@babel/preset-env
have also been set, reducing the total build size by about 8-10%.
- Internally, Reactist will now use React 17 and TypeScript v4.6. Targets for
- [Breaking] Replace Reakit with Ariakit
- This includes a breaking change for
Tabs
, where if theselectedId
prop is provided, it becomes a controlled component and will no longer switch tabs on its own. To retain the old behaviour,defaultSelectedId
can be used instead.
- This includes a breaking change for
- [Fix] Apply TextLink color through
--reactist-text-link-color
- [Feat] Add
positive
tone toText
- [Feat] Add
xsmall
size toLoading
- [Fix] Modal header's min-height is now applied when header has no button
- [Build] Update peer dependencies to include React v18
- [Feat] Button can now have a width set (except icon-only buttons). When having a width, the label aligment can also be customized
- [Fix] Button focus styles should only be shown when interacting with the button via keyboard (using CSS's
:focus-visible
)
- [Feat] Added
alignSelf
prop toBox
- [Fix] Hiding
ModalHeader
close button no longer renders the button wrapper column - [Fix] Using
start
as a value forBox
'stextAlign
now adds a class to properly set thetext-align
value - [Fix]
TextArea
'srows
prop is not added to the component's type definition - [Feat] Updates
Button
to supportgapSize
fromTooltip
(astooltipGapSize
)
- [Tweak] Tabs now are styled with medium font-weight
- [Tweak] Updates the default medium font-weight from
500
to600
- [Fix]
ModalActions
now ignoresnull
child elements - [Fix]
ModalActions
no longer wraps each child element inside a wrapperdiv
- [Fix]
ModalActions
flattens children inside React fragments - [Fix]
Inline
no longer adds an unneeded extra wrapperdiv
around it - [Fix] Adds margin to Menu's viewport positioning
- [Feat] Updates Avatar to support responsive patterns
- [Feat] New approach to styling components based on CSS variables
- [Feat] New approach to supporting rendering some components as another HTML element or as another component.
- [Feat] New components for layout (
Box
,Columns
,Column
,Inline
,Stack
) - [Feat] New field components (
TextField
,PasswordField
,SelectField
,CheckboxField
,SwitchField
,TextArea
) - [Feat] New tabs components (
Tabs
,Tab
,TabList
,TabPanel
,TabAwareSlot
) - [Feat] New components for typography (
Text
,Heading
,TextLink
) - [Feat] Various other new components (
Alert
,Notice
,Hidden
,HiddenVisually
) - [Feat] New set of modal component (
Modal
,ModalHeader
,ModalBody
,ModalFooter
,ModalActions
) replacing the old set ofModal.*
components. - [Feat] New
Button
andButtonLink
components, replacing the oldButton
component. - [Breaking] Old set of modal components are now exported as
DeprecatedModal
instead of asModal
. - [Breaking] Old
Button
component is now exported asDeprecatedButton
instead of asButton
. - [Breaking] Old
Loading
component is now exported asDeprecatedLoading
instead of asLoading
. - [Breaking] Removes the
RangeInput
component - [Breaking] Removes the
Tip
component - [Breaking] Removes the
Icon
component - [Breaking] Removes the
ErrorMessage
component - [Docs] Adds a11y badges to component stories
- [Docs] Adds
jest-axe
package and automated a11y checks - [Tweak] Makes a11y improvements to
Menu
- [Tweak] Makes a11y improvements to
ProgressBar
- [Tweak] Makes a11y improvements to
Notification
- [Build] Updates peer deps to include React v17.0
- [Tweak] Upgrade Storybook to version v6.3.10
- [Tweak] Limit node version to <=16.10.0
- [Feat] More modal widths:
- Previous width
large
is now calledxlarge
- New width
large
sitting in betweenmedium
andxlarge
- New width
full
, that always fill the entire viewport width (keeping the standard margin around).
- Previous width
- [Fix] Reduce specificity of the Tab component's CSS variables
- [Tweak] Divider weight now defaults to "tertiary"
- [Fix] Modal dividers (in the header or footer) are tertiary dividers.
- [Breaking] Standardize box borders and divider colors under a new primary/secondary/tertiary system.
- [Fix] Better adjust spacing inside buttons, so that the side with an icon has a similar padding than the side with no icon.
- [Tweak] Button hover styles are now also used when the button is focused, or it is expanded (e.g. in the case of menu buttons).
- [Tweak] Make button colors transition smoothly.
- [Tweak] Adjust modal widths to the new design system defaults.
- [Tweak] Buttons with a visual text label (i.e. buttons that are not icon-only buttons) now have a minimum width set, so they don't get too small for extremely short labels.
- [Fix] Modals that fit their content's height now expand their height only downwards, and are not kept vertically centered, but slightly towards the top of the screen.
- [Fix] Modal close button alignment is no longer inconsistent.
- [Breaking] Button icon size is no longer controlled based on the button size. It is your responsibility to make sure your SVG icons have the proper size and alignment to fit in a button depending on its size.
- [Fix] Button labels are now clamped when they do not fit inside the button. Buttons will never be wider than the width of their container.
- [Feature] Add a new
loading
prop forButton
andButtonLink
, to set them as busy, and visually show a loading indicator. - [Fix] Fully support secondary destructive buttons in a way that is customizable via CSS variables.
- [Fix] Use the
Button
component to power the default modal close button. This makes it possible for consumer apps to have these buttons follow their customized button styles. - [Feature] Improves the ability to fully customize all sizing and spacing by apps via CSS variables.
- [Docs] New storybook examples showcasing how to customize buttons for dark mode.
- [Breaking] The various
Menu*
components props no longer considerclassName
as a valid prop. - [Breaking] The
Stack
component'salign
prop type is now'start' | 'center' | 'end'
instead of'left' | 'center' | 'right'
. - [Fix] Colour of quaternary button is now correct.
- [Docs] Improvements to the storybook examples for the
Menu
components. - [Fix] Modal focus lock is now working correctly.
- [Fix] Modals are now aligned to the top of the viewport.
- [Fix] The labels of the
SwitchField
andCheckboxField
components now follow the standardText
styling.
- [Breaking] The new
Loading
component now supportsaria-label
oraria-labelledby
, and it also forwards all other props to the container element. - [Feature] Reintroduce the legacy
Loading
component asDeprecatedLoading
to ease the migration in apps using it.
- [Breaking] The
Loading
component has been reimplemented based on the betaLoadingSpinner
. - [Breaking] The
LoadingSpinner
was renamed asLoading
, and significantly changed. - [Breaking] The
Modal
has been renamedDeprecatedModal
. - [Feature] A new
Modal
component is introduced, that replaces the old one, with much better accessibility features and integrated into the new styling approach of the new design system components. - [Breaking] Rename the
Button
asDeprecatedButton
. - [Feature] New
Button
component following the latest standards of the design system. - [Docs] The storybook examples now open the "Docs" tab by default.
- [Feature] All the tab components are now polymorphic (i.e. they can use the
as="element"
prop). - [Feature] The
Box
component now has a newtextAlign
prop to control itstext-align
style. - [Feature] The
Text
andHeading
components now have aalign
prop to align its content horizontally.
- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
- [Breaking] Component composition changed to use prop
as="…"
instead ofcomponent="…"
. - [Breaking] Most design system components no longer support receiving a
className
attribute. - [Breaking] Some design system components now support a custom class name via a
exceptionallySetClassName
prop. - [Breaking] Responsive props are now provided via an object instead of an array.
- [Feature] The
Box
component now has a variousmargin*
props to provide its margins similar to paddings. - [Feature] The
Box
component now has a newmaxWidth
valuefull
(i.e.maxWidth="full"
). - [Feature] The
Stack
component now has aalign
prop to align its items horizontally. - [Feature] Add new component
Hidden
to hide content under certain media conditions. - [Feature] Add new component
HiddenVisually
to hide content visually while keeping it accessible. - [Feature] The
SwitchField
andCheckboxField
components can now be controlled or uncontrolled. - [Fix] The
SwitchField
hover state is no longer flaky. - [Fix] The hint text in various field components (
TextField
,PasswordField
,SelectField
) now renders outside the max-width container.
- [Feature] Introduces a new
Tabs
component based on Reakit/Tab
Also included are changes from https://github.com/Doist/reactist/releases/tag/v9.1.6
- [Fix] Allows classname to be passed through on ButtonLink.
- [Fix] Add default padding to
Text
component when used withlineClamp
prop, in order to prevent emojis from being cutoff - [Fix] Allow the
Column
component to leverage thecomponent
prop to render as another element other than the defaultdiv
- [Fix] Add support for
baseline
alignment
- [Fix] Allow nested
Columns
components to retain their own inner spacing
- New tag to include the fix from
v9.1.5
- [Fix] Incorrect styles in
Button
which affected dark mode themes - [Fix] Incorrect styles in
SelectField
which affected dark mode themes
- [Breaking]
Text
component now has itssize
attribute changed to acceptcaption
,copy
,body
, andsubtitle
. - [Fix]
Columns
component will now stretch within a flex container
- [Docs] Upgraded all beta storybook docs to work with Storybook 6
- [Feature] Change
KeyboardShortcut
to treatSuper
as a key to be translated
- [Fix] Prevent menu items with
aria-disabled
set tofalse
from being disabled
- [Perf] Make the disabled Button component visible to screen readers by swapping
disabled
foraria-disabled
- [Tweak] Upgrade Storybook to version v6.2.1. Migrate stories to new version.
- Fix
Columns
styles, broken by the changes toStack
styling. This release now removes the interdependency ofColumn's styles relying on
Stack` styles.
Various fixes to the new experimental components
- Adds a right padding to the
SelectField
to make sure the chevron never appears on top of theselect
content. - Use for the checked
CheckboxField
the same colour variable we use for theSwitchField
. - Add a wrapper
div
around whatInline
renders, to avoid conflicts with margin applied from the outside byStack
(whenInline
is nested inStack
). - Simplify the CSS for
Stack
leveraging the:not(:first-child)
selector. - Add one more story to each of
Stack
andInline
to showcase that these new changes did not break their expected behaviour.
Various fixes to the new experimental components
- Add explicit link styles to
TextLink
SwitchField
now properly animates the handle moving left or right.- Style fixes to the
PasswordField
. - Added ref forwarding to
TextField
,PasswordField
andHeading
.
- Change Stack and Inline elements to not generate one container element per child element.
- Fix ButtonLink styling
- Adds a new
display="inlineFlex"
value to thedisplay
property ofBox
. This makes theBox
usedisplay: inline-flex
.
Various fixes to the new experimental components
- The
SelectField
now has its native appearance reset (i.e.appearance: none
). - Fixed a typo in an internal css variable in the
SelectField
that made it not have the proper height. - Text in
Alert
andNotice
is now properly aligned vertically with the icon. - Fixed some css module classes that were incorrect in the JS code.
Alert
colours did not have the transparency properly set.- The
SwitchField
now has a new dedicated css variable for theming its background when checked.
- [Fix]
Text
component was not receiving its ref correctly
- [Feature] New components
Alert
,LoadingSpinner
,Notice
,Heading
,Text
,ButtonLink
,TextLink
,CheckboxField
,PasswordField
,SelectField
,SwitchField
,TextArea
,TextField
. - [Feature] New prop
tone
for componentHeading
(just like that forText
). - [Feature] New prop
position
for componentBox
. - [Feature] New props
flexShrink
andflexGrow
for componentBox
. - [Feature] New props
border
andborderRadius
for componentBox
. - [Feature] New
minWidth={0}
in componentBox
. - [Feature]
Text
now supports receiving aref
. - [Fix] Changed
Box
value for propbackground
. Former valueshade
is now calledaside
. - [Fix]
Column
withwidth="content"
did not shrink entirely to zero if empty. - [Fix] Other fixes to columns so that it did not expand more than expected, so it allows truncated text to truncate.
- [Fix] Correct font sizes for the various levels of
Heading
. - [Fix]
Stack
andInline
now generatespan
instead ofdiv
elements if the html element they use for the container does not allow to containdiv
elements.
- [Fix] Call a MenuItem component's onClick handler if provided; ignore the select action if event.defaultPrevented.
- [Feature] Add
xxlarge
option to variouspadding
andspace
props forBox
,Columns
,Inline
, andStack
components
- [Feature] Add
largest
size increase support forHeading
component - [Feature] Add
lineClamp
for text truncation toHeading
andText
components - [Fix] Export the
Column
component in the main entry point - [Fix] Add missing colour variables
- [Docs] Add Storybook demos for
Heading
,Text
, and colour swatches
- [Fix] Move patch-package to dependencies to allow it to run (on nothing since we're patching a dev-dependency) after being installed as a package.
- [Fix] Prevent emotion's
css
prop from polluting the exported type definitions
- [Fix] The previous beta release had an issue where all components' stylesheets were being treated as CSS modules. This will now build with the correct class name selectors again.
- [Feature] A set of base design system components have been added:
Box
,Columns
,Divider
,Heading
,Inline
,Stack
, andText
. Since we're still experimenting with their API, they will be packaged under beta releases until they become more concrete.
- [Fix] Prevent
Loading
component from spinning off-centre
- [Feature] Adds support for
aria-label
to theLoading
component - [Docs] This also fixes our gh-pages-hosted Storybook to load the proper stylesheets again
- [Build] The project now requires node v14.5.5+ and npm v6.14.11+ to install and run.
- We're skipping right over v8.0.0 as its tag has already been created previously
- [Tweak] Adds
defaultValue
and ensures additional props are carried forward on theSelect
component.
- [Feature] A new
Notification
component has been added.
- [Fix] We're only rendering menu lists into the DOM when the menu is opened. This should result in measurable performance gains if you're rendering a lot menus (e.g. as part of a list).
- [Tweak] Upgraded Reakit dependency
- [Tweak] Separates
ButtonVariant
andButtonSize
as actual types.
- [Tweak] Upgrade some dependencies.
- [Tweak] Adds a backdrop/overlay to dropdown menus.
- [Fix] Removes the peer dependency on dayjs, adding it as a direct dependency instead.
- [Tweak] Prevents the
Tooltip
component from getting triggered by keyboard interactions performed in other components
- Dummy release created for publishing purposes
- [Tweak] Removes the arbitrary
max-width
value of the Tooltip component - [Tweak] Adds a
z-index
value for the Tooltip component so that it appears ontop of other content
- [Bugfix] Fixes an improperly configured
sideEffects
property in package.json that prevented importing CSS files from reactist.
- [Feature] The tooltip content now can be provided as a function that will be called to generate its content. This function will only be called when the tooltip needs to be shown. This allows to have more control on tooltip content that is potentially expensive to generate, so that it only happens when needed.
- [Fix] The tooltip content is now rendered to the DOM only when the tooltip is shown. This is regardless of wether the content is provided directly or via a function. The React tree won't be comitted to the DOM unless the tooltip needs to become visible.
- [Tweak] The tooltip delay to appear is now extended from 100ms to 500ms which was our earlier standard with the previous implementation of the tooltip.
- [BREAKING CHANGE] A new Tooltip component is introduced. It is keyboard and screen reader friendly, more compliant with accessibility recommendations about tooltips. It does not provide all the features of the previous Tooltip, and its props change quite a bit. Additionally, it now has a new restriction where it expects its children to consist of a single element. This element is the one used as a trigger for the tooltip. (#276)
- [BREAKING CHANGE] The
Popover
component now has a new restriction where it expects its children to consist of a single element. (#276) - [BREAKING CHANGE] A new set of components for building menus is introduced. The new menus are keyboard and screen reader friendly, more compliant with accessibility recommendations about menus. The old
MenuButton
andMenuButtonItem
components are no longer available. Moreover we now have aMenuButton
that is nothing like the one before. Check their code and examples in storybook. (#278)
- [Fix] This fixes a bug in v6.0.0 where the lib/ directory was unbundled.
- [BREAKING CHANGE] Reactist now generates a build more aligned to antd's best practices. It generates a clean ES6 build, a CommonJS build, as well as an unpkg build. It also adds built-in support for future CSS module integration. This is a breaking change because importing modules has changed slightly. See README.md.
- [BREAKING CHANGE] The
Button
component'sclose
prop, which was deprecated back in v5, is now no longer supported.
- [Feature]
Button
can now be unstyled if you omit thevariant
prop. This resets the styles to be even less than default styles of the web browser (e.g. removes all border, padding and background).
- [New] A
KeyboardShortcut
component will take one or several keyboard shortcut specified as string, and will parse them and render them in a nice semantic markup using thekbd
element. Each key part of a key combination gets its own container so you can style things nicely.
The Button
component's big renovation.
- [BREAKING CHANGE] The
Button
component changed its outer interface entirely.- Instead of individual boolean props for setting its visual style (
primary
,secondary
, etc.) it has a single propvariant
which receives the styling/variant as a string value. - This prop is now required so if you were not adding any of these boolean props, you now need to add
variant="primary"
. - The
white
prop now does not even exist as avariant
. It is replaced byvariant="secondary"
. - Instead of individual boolean props for setting its size (
small
,large
),Button
now has a single propsize
that can receive either'small'
or'large'
as its value. If omitted the button has its default size. - The
Button
now useschildren
as the prop in which it receives the content inside the button, as opposed to using thename
prop. So now<Button name="Hello" />
becomes<Button>Hello</Button>
. - The
Button
propdata_tip
is now calledtooltip
. - The css class names for the
Button
component are now all following a BEM-like naming convention. Instead of having classes such as.loading
,.secondary
, etc. it now has all of these prefixed by.reactist_button--
. That is,.secondary
is now.reactist_button--secondary
.
- Instead of individual boolean props for setting its visual style (
- [BREAKING CHANGE] The
LinkButton
component has been removed entirely. The main reason being it is not accessible to use a link as a button. You can achieve a visually similar button with a new possiblevariant
prop on the regularButton
. So now<LinkButton name="Click me" />
becomes<Button variant="link">Click me</Button>
. This new link-like button is semantically a button, as opposed to being a link posing as a button.
- [Fix] Tightens up type definitions for the
KeyCapturer
props.
- [Fix] Reinstalled @doist/prettier-config from the npm registry and removed the authentication needed when pulling down dependencies.
- [Fix] We have a dev dependency being on the GiHub package registry and we had problems with our Github actions pulling it. This is hopefully all fixed. 🤞
- [New] The
event
object is now forwarded to the on* handler in theKeyCapturer
component. TheonEnter
event will also no longer fire when it's in the middle of an IME composition session.
- [New] Brings back individual JS and CSS files so that applications can do selective import in an ES6 build.
- [Fix] Modal.Actions now can have empty or null children again
- [New] The library is now fully Typescript, provides an ES6 module export, and provides native type bindings.
- [Tweak] To support tree-shaking, we've switched to the Rollup bundler
- [Breaking Change] All imports are now ES6 relative imports, change
import Loading from "@doist/reactist/lib/loading"
toimport { Loading } from "@doist/reactist"
- [Tweak] Removes unused (legacy) context from
<Time />
constructor
- [Tweak] Better typing for the checkbox label
- [Feature] Adds typings for all components and utilities
- [Fix] Formatting in the
<Time />
component wasn't working as expected, this is now fixed.
- [Breaking] Changed namespacing from
.reactist.popover {}
to.reactist_popover {}
. Customizing components' styling need to update accordingly.
- [Tweak] Changed time formatting from
yesterday
to1d
- Empty release
- [Breaking] Styles are no longer included automatically but need to be loaded manually. See the readme for a detailed instruction on how to achieve that.
- [New] Added a
refresh
prop to<Time />
component in order to keep the information shown up-to-date when the component displays "time ago". By default, the component will re-render every 60 seconds.
- [Fix] Fixed the
display: intial
CSS rule for IE11 users (affects the<Popover />
component)
- [Tweak] Fixed unsupported
display: initial
in IE11
- [Tweak] Fixed broken styles for
<Modal>
on small screens
- [Tweak]
<Popover />
content can now be a function which will only be lazily evaluated
- [Tweak]
<Popover />
content is now rendered lazily (i.e. only ifvisible
istrue
)
- [Tweak]
<Modal.Body />
now starts to scroll instead of requiring the whole window to scroll.
- [Tweak]
<Dropdown.Body />
can now be a function which allows for lazy evaluation (i.e. content is only rendered when dropdown is opened).
- [Tweak] introduced
.npmignore
file to keep released package smaller and only include the essentials. This also fixes a bug in v1.20.00 where parts of the.git
directory ended up in the file package.
-
[Tweak] Replaced Moment with Day.js
🚨 This introduces a new peerDependency (
dayjs
) and removes the need formoment
. If you're not using the<Time />
nothing should change for you.
- [Tweak] Changed the way the
<Time />
component formats it's time. You now have more control to influence the date and time format from the outside
- [Tweak] Using a 3px border-radius everywhere instead of a mixture of 3px and 4px
- [Tweak] Updated the
<CloseIcon />
(used in<Modal.Header>
) to new icon style
- [Tweak] Decreased top and bottom margins of
<Modal />
to 40px
- [Tweak] Increase left and right padding of
<Input />
to 10px to match<Select />
- [Tweak]
<ColorPicker />
no longer shows the dropdown arrow and it's styling no longer includes margins - [New]
<ColorPicker />
now comes in asmall
version which is only 18px squared instead of 24px
- [Tweak] Switched separators (
<hr />
) in<Dropdown />
to border gray to unify colors more
- [Tweak] No longer force no text-decoration on
<LinkButton />
- [New] When providing a className to
<Input />
it no longer overrides reactist' native styles
- [New] Allowing to attach a ref to
<Input />
- [Bug] Centering the text of
<Tooltip />
- [Bug] Set visibility of
<Popover />
tonone
to avoid click jacking
- [New] Added
withArrow
property to<Tooltip />
to support arrow-less tooltips
- [Tweak]
allowVaguePositioning
now also takes the vertical positioning into account instead of only the horizontal one
- [Tweak] When clicking on the trigger of a
<Tooltip />
(i.e. its children) we will close the Tooltip. This is helpful so tooltips no longer overlap menu. In case you need more finegrained control over this consider using a<Popover />
directly.
- [Tweak] Reset margins on
<Input />
so it's visually aligned in Safari (and all other browsers) by default
- [New] Added the utility component
<KeyCapturer>
. Use it to wrap arbitrary elements and act on keyboard events happening while it is focussed
- [Tweak] All additionally passed props to a
<Button />
are now applied to the underlying<button>
element. This allows you to make better use of the platform (e.gtype='submit'
) or adhere to accessibility best practices
- [Tweak] Moved some default styles from
<Tooltip />
to<Popover />
which should make it easier to build nice experiences with it as you no longer need to provide all the styles
- [New] Added
size
,spinnerColor
andbgColor
properties to<Loading />
for a fully customizable loading experience
- [Tweak] Unified all border colors across all components
- [New] Added new general purpose
<Popover />
component which also powers the<Tooltip />
component. This allows for more flexible popovers than overriding the styles of a tooltip.
- [New] Added support for
disabled
property to<Checkbox />
- [Tweak] We now update the styles of
<Input />
when supplying thedisabled
property
- [New] Added
medium
property to<Modal.Box />
as a new size constant. It will produce modals that are 680px wide - [New] Added
plain
property to<Modal.Body />
which removes all styling from the body for custom modals
- [Tweak] Darkened border color of
<Select />
to border color constant
- [Bug] Changed class name of loading
<Button />
fromloading
tobusy
to avoid clash with theloading
class name of<Loading />
- [Tweak] Darkened font and border color of secondary button to improve readability
- [Tweak] Relaxed prop types of most components which render strings to also accept component(s)
- [Tweak] Updated icon of
<Select />
to fit our iconography
- [Tooling] Updated to webpack 4, babel 7 and fixed some problems in our build process.
moment
,classnames
andprop-types
are now correctly treated as externals and are no longer included in our production bundle. This resulted in a reduced stat size from 703kb to 160kb ⚡️
- [Bug] When closing a modal by pressing esc we now prevent the browser's default behaviour (e.g. leaving fullscreen mode)
- [Bug] Clicking on the inner overlay of
<Modal />
(aka left or right of the modal) whencloseOnOverlayClick
was set totrue
the modal wouldn't close
- [Bug] Changing the
right
prop of<Dropdown />
didn't have any effect as it was "cached" in internal state upon first construction
- [Tweak] Added rounded corners to the blue line indicating an active tab
- [Bug] Setting
useCapture
totrue
to catch scroll events of all elements of a page to correctly hide the tooltip
- [New] Added
gapSize
to<Tooltip />
- [Redesign] The
<Loading />
indicator is now a spinning circle instead of three bouncing dots
- [Tweak] Inactive tabs use the secondary font color instead of custom gray
- [Tweak] Darkened primary and secondary font colors for improved readability
- [New] Added support for the
style
property to<Modal.Box />
and<Modal.Body />
for when a className is not enough
- [Tweak] Sets the default value of the
delayShow
of the<Tooltip />
component to 500ms (0.5s) instead of 1s
- [Tweak] Set the margin of
<Select />
to 0 to avoid browser inconsistencies in Safari
- [Tweak] Instead of using the default delay of 1s (1000ms) for tooltips when hovering the
<Time />
component we now use 500ms (0.5s)
- [Redesign] The
<ColorPicker />
can now show an optional active indicator on the selected color item.- Additionally, we no longer hide the active color from the selection. That means you might need to check in your code that an actual change occurred.
- [Bug] When supplying an invalid
color
prop to the<ColorPicker />
it would crash. Now it selects the first color in thecolorList
.
- [Tweak] Increased the size of the white inner ring that appears when hovering a color item of the
<ColorPicker />
- [Redesign] New design for the
<ColorPicker />
- It now shows the color name on hover – when supplied through the
colorList
prop
- It now shows the color name on hover – when supplied through the
- [Bug]
<Tooltip />
s are now correctly displayed in absolutely positioned elements (esp.<Dropdown />
s)
... we failed to write a changelog before that version you could probably scroll through the commit history to find out more. Sorry!