30.1.4 (2026-04-08)
30.1.3 (2026-04-07)
30.1.2 (2026-04-03)
30.1.1 (2026-04-03)
- pass NPM_TOKEN to semantic-release in release workflow (#1026) (cc23af1)
- preserve spacing for loose lists in Prose component (#1025) (67d6aae)
- revert partial 30.1.1 release to allow clean re-release (#1027) (64c6447)
30.1.0 (2026-03-10)
- Add project conventions guide (CLAUDE.md) (#1019) (c06b0bc)
- convert menu.less to menu.module.css (#1007) (b63ce3a)
30.0.1 (2026-01-26)
30.0.0 (2026-01-24)
- Bump node version requirement to v22.22; integrate react-compiler-tracker (#994)
29.1.2 (2026-01-09)
29.1.1 (2025-12-01)
29.1.0 (2025-11-13)
29.0.0 (2025-11-04)
- Update Ariakit to 0.4.19 (#981)
- Bump eslint-related dependencies and fix errors (#982) (67d7d0d)
- Update TypeScript to 5.9 (#980) (389931a)
28.7.4 (2025-10-31)
28.7.3 (2025-10-31)
28.7.2 (2025-10-24)
28.7.1 (2025-10-24)
28.7.0 (2025-10-16)
28.6.0 (2025-09-16)
28.5.4 (2025-09-16)
28.5.3 (2025-09-08)
28.5.2 (2025-08-12)
28.5.1 (2025-08-12)
28.5.0 (2025-08-05)
- implement overlay scroll functionality in Box component with custom scrollbar styles (#937) (ace2ef0)
28.4.0 (2025-06-23)
28.3.2 (2025-06-16)
28.3.1 (2025-05-27)
28.3.0 (2025-05-27)
28.2.2 (2025-05-20)
28.2.1 (2025-05-09)
28.2.0 (2025-05-05)
28.1.2 (2025-04-30)
28.1.1 (2025-04-22)
28.1.0 (2025-04-17)
28.0.0 (2025-04-17)
- Tabs: Add support for additional customization settings (#903)
27.5.0 (2025-03-12)
27.4.0 (2025-02-19)
27.3.6 (2025-02-05)
27.3.5 (2025-02-05)
- allow publish workflow to run from workflow_dispatch event (#894) (4204756)
- fix version of upload-pages-artifact action (#892) (d9dba34)
27.3.4 (2025-02-05)
27.3.3 (2025-02-05)
27.3.2 (2025-02-05)
27.3.1 (2025-02-05)
27.3.0 (2025-01-31)
- deploy storybook only when publishing package (#878) (1668f8c)
- fix dependabot config syntax (#879) (89ddb9a)
27.2.2 (2025-01-22)
- change dependabot commit prefix (#871) (f2e786f)
- deps: bump decode-uri-component from 0.2.0 to 0.2.2 (#721) (e4e0c3f)
- deps: bump loader-utils from 1.4.0 to 1.4.2 (#713) (c21c8a8)
- deps: bump shelljs from 0.8.4 to 0.8.5 (#627) (436747f)
- implement release-please to automate release creation (#863) (7f5f754)
- include all changes in release creation (#870) (da74067)
- migrate to latest release-please action (#874) (7ab6aec)
- set target-branch to release-please action (#872) (dde0fff)
- unify existing changelog content format (#876) (9cc1be2)
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.
27.2.1:
- [Fix] ensure TextLink styles are applied to nested elements #860
27.2.0:
- [Feat] Document
TextLinkcomponent in Storybook and change default styling.
27.1.0:
- [Feat] Expose CSS variables for customizng the icon color of the
Bannercomponent system types.
27.0.1:
- [Docs] Document the
maxLengthprop for theTextFieldcomponent.
27.0.0:
- [BREAKING] Remove
Alertcomponent. - [BREAKING] Update
BannerUI, mergingAlertuse cases.
26.2.5:
- [Fix] Add top and bottom paddings to the
Tabcomponent. - [Fix]
SubMenuwill only render at the bottom when there isn't enough space in either side of the parent menu.
26.2.4:
- [Fix] The
Prosecomponent's horizontal rule color is now properly set to the primary divider color.
26.2.3:
- [Fix] The
Tabcomponent's line height is now properly set to 21px.
26.2.2:
- [Fix] Vertically align the
Noticecomponent's icon with the first line of text
26.2.1:
- [Fix] Export
TooltipProvideras a component
26.2.0:
- [Feat] Add
TooltipContextto allowshowTimeoutandhideTimeoutto be set globally
v26.1.0:
- [Feat] Expose
showTimeoutandhideTimeoutprops forTooltip - [Fix] The center alignment between the
Alertcomponent's icon and message is now more accurate when the message is only one-line long. - [Fix] Render submenus at the bottom when there isn't enough space
v26.0.0:
- [BREAKING] Remove unused
secondaryLabelfromTexTfield,PasswordField,SelectField,TextArea, andSwitchField. - [BREAKING] Remove
hintfrom fromTextfield,PasswordField,SelectField,TextArea, andSwitchField.- Please use
messageinstead.
- Please use
- [Feat] Update read only style for
TextFieldandTextAreawhenreadOnlyistrue. - [Feat] Add
disableResizeoption toTextAreato disallow manual resizing. - [Feat] Add character count (with limit) to
TextFieldandTextArea.- Will show a character count indicator below the field when
maxLengthis set.
- Will show a character count indicator below the field when
- [Feat] Add
endSlotsupport toPasswordField. - [Chore] Deprecate
auxiliaryLabelfromTexTfield,PasswordField,SelectField, andTextArea.
v25.2.0:
- [Feat] Add
refsupport toModalBodycomponent
v25.1.1:
- [Fix] Restrict focus locking in the
Modalcomponent to its containing document/iframe.
v25.1.0:
- [Feat] Add
xsmallsize to theModalcomponent
v25.0.0:
- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
- [BREAKING] Remove unsupported
onPointerEnterCaptureandonPointerLeaveCaptureprops fromheading-,input-, andtextarea-based components. - [BREAKING] Removed the
ButtonLinkcomponent. - [BREAKING]
Buttonno longer accepts props that render it as an icon-only button. - [BREAKING] Use an explicit
renderprop for composition, instead of theasprop (in the menu, modal, tabs, toasts and tooltip components). - [BREAKING]
TabPanel's proprenderis renamed torenderMode. - [Feat] Introduce a new
IconButtoncomponent. - [Feat] The
ButtonandIconButtoncomponent can be rendered as a link using the `render={} prop.
v25.0.0-beta.3:
- [Fix] Allow more props to be forwarded to the
Tabcomponent. - [Fix] Properly fix CSS build in tsdx config.
- [Chore] Upgrade to
@ariakit/react@0.4.5.
v25.0.0-beta.2:
- [Fix] Pass
onClickto theTabcomponent.
v25.0.0-beta.1:
- [BREAKING] Use an explicit
renderprop for composition, instead of theasprop (in the menu, modal, tabs, toasts and tooltip components). - [BREAKING]
TabPanel's proprenderis renamed torenderMode.
v25.0.0-beta:
- [BREAKING] Removed the
ButtonLinkcomponent. - [BREAKING]
Buttonno longer accepts props that render it as an icon-only button. - [Feat] Introduce a new
IconButtoncomponent. - [Feat] The
ButtonandIconButtoncomponent can be rendered as a link using the `render={} prop.
v24.2.0-beta:
- [Fix] Include changes from v23.3.0 in the beta release
v24.1.5-beta:
- [Fix] Include changes from v23.2.2 in the beta release
v24.1.4-beta:
- [Fix] Include changes from v23.2.1 in the beta release
v24.1.3-beta:
- [Fix] Remove unsupported
onPointerEnterCaptureandonPointerLeaveCaptureprops 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.
v24.1.2-beta:
- [Fix] Reset anchor rect after context menu is closed.
- [Fix] Revert earlier attempt to auto-close menus when they lose focus.
v24.1.1-beta:
- [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.
v24.1.0-beta:
- [Feat] Include changes from v23.2.0 in the beta release
v24.0.0-beta:
- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
v23.3.0:
- [Feat] Add
warningas atoneoption forBadge.
v23.2.2:
- [Fix] Revert "Adjust modal alignment to the middle of the viewport at
800pxbreakpoint for improved UX". Turns out that this is not something that we want to do.
v23.2.1:
- [Fix] Adjust modal alignment to the middle of the viewport at
800pxbreakpoint for improved UX.
v23.2.0:
- [Feat] Add
mediumas aweightoption forHeader.
v23.1.0:
- [Feat] Add
--reactist-font-family-monospacewith updated font family for monospace elements
v23.0.0:
- [BREAKING] Remove unsupported
crossOriginattribute frominput- andtextarea-based components. - [BREAKING] Remove unsupported
placeholderattribute from heading components.
v22.3.3:
- [Fix] Vertical alignment of inline code elements inside a
Prosecomponent
v22.3.2:
- [Fix] Text inside a
Badgeno longer wraps into multiple lines.
v22.3.1:
- [Tweak] Increase showing tooltip delay to 1 second from 500ms
v22.3.0:
- [Build] Add support for Node v21
v22.2.0:
- [Feat] The
Alertcomponent now has a new design. Input based components will now also expose a--reactist-inputs-alertCSS variable to customize their border colours when put into an error state
v22.1.0:
- [Build] Add support for Node v20 and npm v10
v22.0.0:
- [BREAKING] Remove
DeprecatedModal.
v21.3.0:
- [Feat]
ToastProvideraccepts an optionalcontainerClassNameproperty, which let's you to add your own class for the container of all toasts.
v21.2.3:
- [Fix] Prevent horizontal expansion of
TextAreawithautoExpand={true}.
v21.2.2:
- [Docs] Fix links to Reactist components in storybook stories.
v21.2.1:
- [Docs] Fix links to Reactist components in storybook stories.
v21.2.0:
- [Feat]
Textfield,PasswordField,SelectField, andTextAreawill 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-primaryand--reactist-divider-secondary, they will continue to work as well.
v21.1.1:
- [Fix] Using a menu both triggered by a button and by right-click.
v21.1.0:
- [Feat] The
Prosecomponent now supports links applied to inline code.
v21.0.2:
- [Fix]
Tabslist's default spacespace='xsmall'is removed to get rid of unnecessary gap between tabs.
v21.0.1:
- [Fix]
TextAreawithautoExpand={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.
v21.0.0:
- [BREAKING]
TextField'sstartIconproperty is now renamedstartSlot. - [Feat] New
startSlotandendSlotprops on theTextFieldcomponent. These support rendering not only icons, but buttons too. - [Fix]
TextField'sstartSlotis now properly aligned when usingvariant="bordered". - [Fix]
TextFieldis now properly focused when clicking anywhere inside its bordered area. - [Tweak]
PasswordField's toggle visibility button is now implemented by using theTextField'sendSlotfeature.
v20.3.0:
- [Feat] Toasts wrapped in
ToastsProviderare now dismissed when their actiononClickhandler fires.
v20.2.0:
- [Feat] Expose CSS variables for theming the
SwitchFieldcomponent.
v20.1.0:
- [Feat] New
Prosecomponent to style free-form HTML content consistently.
v20.0.3:
- [Fix] Slightly tweak the height of the
Badgecomponent.
v20.0.2:
- [Fix] Slightly tweak the height of the
Badgecomponent.
v20.0.1:
- [Fix]
Badgecomponent content is now bold and the appropriate line-height is enforced.
v20.0.0:
- [BREAKING] Remove
usePrevioushook - [BREAKING] Remove
DeprecatedNotificationcomponent - [BREAKING] The
Menucomponent now uses Reactist CSS variables to style itself
v19.1.1:
- [Fix] Export new
Bannercomponent.
v19.1.0:
- [Feat] A new
Bannercomponent.
v19.0.1:
- [Fix]
Tooltips can now have its z-index customized using the--reactist-stacking-order-tooltipcustom property. - [Fix]
Tooltips now have a 300px max-width.
v19.0.0:
- [BREAKING] A new
Badgecomponent with various breaking changes- The prop
varianthas 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
labelprop instead of viachildren
- The prop
- [BREAKING] Update
ariakitto next.43 andariakit-utilsto next.27. Depending on your set up,node_modules/ariakit*dependencies may need to be transpiled. - [BREAKING]
Menuwill now render in modal mode by default. This can be turned off by passingmodal={false}toMenuList.
v18.0.0:
- [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
Tooltipcomponent no longer accepts generic props to be forwarded as generic HTML attributes to the tooltip content container. In particular, it no longer accepts aclassNameto 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.
v17.10.1:
- [Fix] Ensure that any element inside a
ButtonorButtonLinkis non-clickable, to facilitate event tracking with tools such as Google Analytics.
v17.10.0:
- [Feat] Passing
autoExpandto theTextAreacomponent makes it auto-expand its height to fit the content as you type. - [Feat] The
TextAreacomponent now supports receiving a ref that's forwarded to thetextareaelement.
v17.9.1:
- [Fix] Tabs layout got broken after the
Inlineelement switched to usegapfor spacing.
v17.9.0:
- [Feat] New
gapprop in theBoxcomponent, implementing support for the CSSgapproperty. - [Tweak] Use CSS
gapfor implementing spacing in theColumns,Inline, andStackcomponents.
v17.8.1:
- [Fix] When clicking inside a modal, holding and releasing the click outside the modal no longer closes the modal
v17.8.0:
- [Feat] New
ModalpropportalElement, to enable consumers of theModalcomponent to have some control on where the modal portal is rendered. - [Feat] The
Badgecomponent 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.
v17.7.0:
- [Feat] Add
startIconsupport toTextField
v17.6.0:
- [Tweak] Upgrade Ariakit version to 2.0.0-next.30
v17.5.0:
- [Feat] Add
variantprop support toSelectFieldcomponent.
v17.4.0:
- [Feat] Add support for controlling whether a
Modalcan be dismissed by pressingEscapeor with a click event on the modal overlay.
v17.3.0:
- [Fix] Enforce standard padding in the
CheckboxFieldcomponent and accept aniconattribute
v17.2.0:
- [Feat] Add support for providing a class to a
Modaloverlay
v17.1.0:
- [Feat] Add support for
Menuas a context menu - [Fix] Allow
SubMenus to be rendered and support keyboard navigation
v17.0.1:
- [Fix] Enforce minimum width for the checkbox icon in the
CheckboxFieldcomponent
v17.0.0:
- [Breaking] Allow to customize the TextLink styles (color and text-decoration) via CSS variables
v16.1.0:
- [Build] Add support for Node v18 and npm v9
v16.0.0:
- [Breaking] The
Notificationcomponent is renamed asDeprecatedNotification - [Feat] The
Boxcomponent now supports a newbackground="toast" - [Feat] A new
Toastcomponent anduseToastshook - [Fix] Sets
Badgeto semibold
v15.3.0:
- [Feat] Introduces a
Badgecomponent
v15.2.0:
- [Feat] Enhance the
labelproperty inCheckboxFieldto be of typeReact.ReactNode
v15.1.0:
- [Feat] Fields without label show no spacing above the field
- [Fix]
TextAreacan now be hidden - [Fix]
TextAreanow 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.
v15.0.0:
- [Breaking] The
Modalhas its internals replaced with Ariakit. This should not introduce any user-facing changes, but the old modal will be available asDeprecatedModalto help with the transition. - [Fix] Set
min-heightandmax-heighton.reactist_menulist.
v14.1.1:
- [Fix] Pins the ariakit dependencies.
v14.1.0:
- [Feat]
Tabsby default have a shorter height, but this can be customized by overriding an exposed css variable
v14.0.0:
- [Breaking] The
colorprop has been removed fromTabs, andvariantnow only supportsthemedandneutralas options. - [Fix]
Tooltipwill now correctly use an anchor component with anasprop
v13.0.0:
- [Breaking] Button's
tooltipGapSizeprop 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,DeprecatedLoadingandDeprecatedModal. - [Breaking] Remove
Popover - [Breaking] The following components have been renamed and will be removed in a future major release:
Dropdown->DeprecatedDropdownInput->DeprecatedInput, useTextFieldinstead.Select->DeprecatedSelect, useSelectFieldinstead.
- [Feat] Allow buttons to have fully rounded/circular corners.
- [Fix] Only apply full width labels when the button is full width
v12.1.1:
- [Fix] Reset input padding for
variant="bordered"TextField.
v12.1.0:
- [Feat] New
messageandtoneprops that allow to associate a visual and semantic message to various field components. Supported inTextField,PasswordField,TextAreaandSelectField. - [Feat] New
variant="bordered"supported inTextField,PasswordFieldandTextArea. It renders the field and its labels enclosed in an outer border, rather than having a border around the editing area only.
v12.0.4:
- [Fix] Better default alignment between the
MenuListand theMenuButton
v12.0.3:
- [Fix] Missing styling for
MenuListin Safari
v12.0.2:
- [Fix]
Tooltipwas overriding its anchor'sref, preventing it from successfully forwarding its ref
v12.0.1:
- [Fix] Fix publishing flow
v12.0.0:
- [Breaking] Dropped support for React 16
- Internally, Reactist will now use React 17 and TypeScript v4.6. Targets for
@babel/preset-envhave 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 theselectedIdprop is provided, it becomes a controlled component and will no longer switch tabs on its own. To retain the old behaviour,defaultSelectedIdcan be used instead.
- This includes a breaking change for
v11.6.0:
- [Fix] Apply TextLink color through
--reactist-text-link-color - [Feat] Add
positivetone toText - [Feat] Add
xsmallsize toLoading
v11.5.1:
- [Fix] Modal header's min-height is now applied when header has no button
v11.5.0:
- [Build] Update peer dependencies to include React v18
v11.4.0:
- [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)
v11.3.0:
- [Feat] Added
alignSelfprop toBox
v11.2.0:
- [Fix] Hiding
ModalHeaderclose button no longer renders the button wrapper column - [Fix] Using
startas a value forBox'stextAlignnow adds a class to properly set thetext-alignvalue - [Fix]
TextArea'srowsprop is not added to the component's type definition - [Feat] Updates
Buttonto supportgapSizefromTooltip(astooltipGapSize)
v11.1.0:
- [Tweak] Tabs now are styled with medium font-weight
- [Tweak] Updates the default medium font-weight from
500to600 - [Fix]
ModalActionsnow ignoresnullchild elements - [Fix]
ModalActionsno longer wraps each child element inside a wrapperdiv - [Fix]
ModalActionsflattens children inside React fragments - [Fix]
Inlineno longer adds an unneeded extra wrapperdivaround it - [Fix] Adds margin to Menu's viewport positioning
- [Feat] Updates Avatar to support responsive patterns
v11.0.0:
- [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
ButtonandButtonLinkcomponents, replacing the oldButtoncomponent. - [Breaking] Old set of modal components are now exported as
DeprecatedModalinstead of asModal. - [Breaking] Old
Buttoncomponent is now exported asDeprecatedButtoninstead of asButton. - [Breaking] Old
Loadingcomponent is now exported asDeprecatedLoadinginstead of asLoading. - [Breaking] Removes the
RangeInputcomponent - [Breaking] Removes the
Tipcomponent - [Breaking] Removes the
Iconcomponent - [Breaking] Removes the
ErrorMessagecomponent - [Docs] Adds a11y badges to component stories
- [Docs] Adds
jest-axepackage 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
v10.0.0-beta.12:
- [Tweak] Upgrade Storybook to version v6.3.10
- [Tweak] Limit node version to <=16.10.0
v10.0.0-beta.11:
- [Feat] More modal widths:
- Previous width
largeis now calledxlarge - New width
largesitting in betweenmediumandxlarge - New width
full, that always fill the entire viewport width (keeping the standard margin around).
- Previous width
v10.0.0-beta.10:
- [Fix] Reduce specificity of the Tab component's CSS variables
v10.0.0-beta.9:
- [Tweak] Divider weight now defaults to "tertiary"
- [Fix] Modal dividers (in the header or footer) are tertiary dividers.
v10.0.0-beta.8:
- [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.
v10.0.0-beta.7:
- [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.
v10.0.0-beta.6:
- [Feature] Add a new
loadingprop forButtonandButtonLink, 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
Buttoncomponent 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.
v10.0.0-beta.5:
- [Breaking] The various
Menu*components props no longer considerclassNameas a valid prop. - [Breaking] The
Stackcomponent'salignprop 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
Menucomponents. - [Fix] Modal focus lock is now working correctly.
- [Fix] Modals are now aligned to the top of the viewport.
- [Fix] The labels of the
SwitchFieldandCheckboxFieldcomponents now follow the standardTextstyling.
v10.0.0-beta.4:
- [Breaking] The new
Loadingcomponent now supportsaria-labeloraria-labelledby, and it also forwards all other props to the container element. - [Feature] Reintroduce the legacy
Loadingcomponent asDeprecatedLoadingto ease the migration in apps using it.
v10.0.0-beta.3:
- [Breaking] The
Loadingcomponent has been reimplemented based on the betaLoadingSpinner. - [Breaking] The
LoadingSpinnerwas renamed asLoading, and significantly changed. - [Breaking] The
Modalhas been renamedDeprecatedModal. - [Feature] A new
Modalcomponent 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
ButtonasDeprecatedButton. - [Feature] New
Buttoncomponent following the latest standards of the design system. - [Docs] The storybook examples now open the "Docs" tab by default.
v10.0.0-beta.2:
- [Feature] All the tab components are now polymorphic (i.e. they can use the
as="element"prop). - [Feature] The
Boxcomponent now has a newtextAlignprop to control itstext-alignstyle. - [Feature] The
TextandHeadingcomponents now have aalignprop to align its content horizontally.
v10.0.0-beta.1:
- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
10.0.0:
- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
v9.2.0-beta.18:
- [Breaking] Component composition changed to use prop
as="…"instead ofcomponent="…". - [Breaking] Most design system components no longer support receiving a
classNameattribute. - [Breaking] Some design system components now support a custom class name via a
exceptionallySetClassNameprop. - [Breaking] Responsive props are now provided via an object instead of an array.
- [Feature] The
Boxcomponent now has a variousmargin*props to provide its margins similar to paddings. - [Feature] The
Boxcomponent now has a newmaxWidthvaluefull(i.e.maxWidth="full"). - [Feature] The
Stackcomponent now has aalignprop to align its items horizontally. - [Feature] Add new component
Hiddento hide content under certain media conditions. - [Feature] Add new component
HiddenVisuallyto hide content visually while keeping it accessible. - [Feature] The
SwitchFieldandCheckboxFieldcomponents can now be controlled or uncontrolled. - [Fix] The
SwitchFieldhover state is no longer flaky. - [Fix] The hint text in various field components (
TextField,PasswordField,SelectField) now renders outside the max-width container.
v9.2.0-beta.17:
- [Feature] Introduces a new
Tabscomponent based on Reakit/Tab
Also included are changes from https://github.com/Doist/reactist/releases/tag/v9.1.6
v9.2.0-beta.16:
- [Fix] Allows classname to be passed through on ButtonLink.
v9.2.0-beta.15:
- [Fix] Add default padding to
Textcomponent when used withlineClampprop, in order to prevent emojis from being cutoff - [Fix] Allow the
Columncomponent to leverage thecomponentprop to render as another element other than the defaultdiv
v9.2.0-beta.14:
- [Fix] Add support for
baselinealignment
v9.2.0-beta.13:
- [Fix] Allow nested
Columnscomponents to retain their own inner spacing
v9.2.0-beta.12:
- New tag to include the fix from
v9.1.5
v9.2.0-beta.11:
- [Fix] Incorrect styles in
Buttonwhich affected dark mode themes - [Fix] Incorrect styles in
SelectFieldwhich affected dark mode themes
v9.2.0-beta.10:
- [Breaking]
Textcomponent now has itssizeattribute changed to acceptcaption,copy,body, andsubtitle. - [Fix]
Columnscomponent will now stretch within a flex container
v9.2.0-beta.9:
- [Docs] Upgraded all beta storybook docs to work with Storybook 6
9.1.6:
- [Feature] Change
KeyboardShortcutto treatSuperas a key to be translated
9.1.5:
- [Fix] Prevent menu items with
aria-disabledset tofalsefrom being disabled
9.1.4:
- [Perf] Make the disabled Button component visible to screen readers by swapping
disabledforaria-disabled
9.1.3:
- [Tweak] Upgrade Storybook to version v6.2.1. Migrate stories to new version.
v9.2.0-beta.8:
- Fix
Columnsstyles, broken by the changes toStackstyling. This release now removes the interdependency ofColumn's styles relying onStack` styles.
v9.2.0-beta.7:
Various fixes to the new experimental components
- Adds a right padding to the
SelectFieldto make sure the chevron never appears on top of theselectcontent. - Use for the checked
CheckboxFieldthe same colour variable we use for theSwitchField. - Add a wrapper
divaround whatInlinerenders, to avoid conflicts with margin applied from the outside byStack(whenInlineis nested inStack). - Simplify the CSS for
Stackleveraging the:not(:first-child)selector. - Add one more story to each of
StackandInlineto showcase that these new changes did not break their expected behaviour.
v9.2.0-beta.6:
Various fixes to the new experimental components
- Add explicit link styles to
TextLink SwitchFieldnow properly animates the handle moving left or right.- Style fixes to the
PasswordField. - Added ref forwarding to
TextField,PasswordFieldandHeading.
v9.2.0-beta.5:
- Change Stack and Inline elements to not generate one container element per child element.
- Fix ButtonLink styling
- Adds a new
display="inlineFlex"value to thedisplayproperty ofBox. This makes theBoxusedisplay: inline-flex.
v9.2.0-beta.4:
Various fixes to the new experimental components
- The
SelectFieldnow has its native appearance reset (i.e.appearance: none). - Fixed a typo in an internal css variable in the
SelectFieldthat made it not have the proper height. - Text in
AlertandNoticeis now properly aligned vertically with the icon. - Fixed some css module classes that were incorrect in the JS code.
Alertcolours did not have the transparency properly set.- The
SwitchFieldnow has a new dedicated css variable for theming its background when checked.
v9.2.0-beta.3:
- [Fix]
Textcomponent was not receiving its ref correctly
v9.2.0-beta.2:
- [Feature] New components
Alert,LoadingSpinner,Notice,Heading,Text,ButtonLink,TextLink,CheckboxField,PasswordField,SelectField,SwitchField,TextArea,TextField. - [Feature] New prop
tonefor componentHeading(just like that forText). - [Feature] New prop
positionfor componentBox. - [Feature] New props
flexShrinkandflexGrowfor componentBox. - [Feature] New props
borderandborderRadiusfor componentBox. - [Feature] New
minWidth={0}in componentBox. - [Feature]
Textnow supports receiving aref. - [Fix] Changed
Boxvalue for propbackground. Former valueshadeis now calledaside. - [Fix]
Columnwithwidth="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]
StackandInlinenow generatespaninstead ofdivelements if the html element they use for the container does not allow to containdivelements.
9.1.2:
- [Fix] Call a MenuItem component's onClick handler if provided; ignore the select action if event.defaultPrevented.
v9.2.0-beta.1:
- [Feature] Add
xxlargeoption to variouspaddingandspaceprops forBox,Columns,Inline, andStackcomponents
v9.2.0-beta:
- [Feature] Add
largestsize increase support forHeadingcomponent - [Feature] Add
lineClampfor text truncation toHeadingandTextcomponents - [Fix] Export the
Columncomponent in the main entry point - [Fix] Add missing colour variables
- [Docs] Add Storybook demos for
Heading,Text, and colour swatches
v9.1.0-beta.2:
- [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
cssprop from polluting the exported type definitions
v9.1.0-beta.1:
- [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.
v9.1.0-beta:
- [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.
9.1.1:
- [Fix] Prevent
Loadingcomponent from spinning off-centre
9.1.0:
- [Feature] Adds support for
aria-labelto theLoadingcomponent - [Docs] This also fixes our gh-pages-hosted Storybook to load the proper stylesheets again
9.0.0:
- [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
v7.2.1:
- [Tweak] Adds
defaultValueand ensures additional props are carried forward on theSelectcomponent.
v7.2.0:
- [Feature] A new
Notificationcomponent has been added.
v7.1.9:
- [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).
v7.1.8:
- [Tweak] Upgraded Reakit dependency
v7.1.7:
- [Tweak] Separates
ButtonVariantandButtonSizeas actual types.
v7.1.6:
- [Tweak] Upgrade some dependencies.
v7.1.5:
- [Tweak] Adds a backdrop/overlay to dropdown menus.
- [Fix] Removes the peer dependency on dayjs, adding it as a direct dependency instead.
v7.1.4:
- [Tweak] Prevents the
Tooltipcomponent from getting triggered by keyboard interactions performed in other components
v7.1.3:
- Dummy release created for publishing purposes
v7.1.2:
- [Tweak] Removes the arbitrary
max-widthvalue of the Tooltip component - [Tweak] Adds a
z-indexvalue for the Tooltip component so that it appears ontop of other content
v7.1.1:
- [Bugfix] Fixes an improperly configured
sideEffectsproperty in package.json that prevented importing CSS files from reactist.
v7.1.0:
- [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.
v7.0.0:
- [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
Popovercomponent 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
MenuButtonandMenuButtonItemcomponents are no longer available. Moreover we now have aMenuButtonthat is nothing like the one before. Check their code and examples in storybook. (#278)
v6.0.1:
- [Fix] This fixes a bug in v6.0.0 where the lib/ directory was unbundled.
v6.0.0:
- [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
Buttoncomponent'scloseprop, which was deprecated back in v5, is now no longer supported.
v5.2.0:
- [Feature]
Buttoncan now be unstyled if you omit thevariantprop. This resets the styles to be even less than default styles of the web browser (e.g. removes all border, padding and background).
v5.1.0:
- [New] A
KeyboardShortcutcomponent will take one or several keyboard shortcut specified as string, and will parse them and render them in a nice semantic markup using thekbdelement. Each key part of a key combination gets its own container so you can style things nicely.
v5.0.0:
The Button component's big renovation.
- [BREAKING CHANGE] The
Buttoncomponent changed its outer interface entirely.- Instead of individual boolean props for setting its visual style (
primary,secondary, etc.) it has a single propvariantwhich 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
whiteprop now does not even exist as avariant. It is replaced byvariant="secondary". - Instead of individual boolean props for setting its size (
small,large),Buttonnow has a single propsizethat can receive either'small'or'large'as its value. If omitted the button has its default size. - The
Buttonnow useschildrenas the prop in which it receives the content inside the button, as opposed to using thenameprop. So now<Button name="Hello" />becomes<Button>Hello</Button>. - The
Buttonpropdata_tipis now calledtooltip. - The css class names for the
Buttoncomponent 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,.secondaryis now.reactist_button--secondary.
- Instead of individual boolean props for setting its visual style (
- [BREAKING CHANGE] The
LinkButtoncomponent 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 possiblevariantprop 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.
4.1.5:
- [Fix] Tightens up type definitions for the
KeyCapturerprops.
4.1.4:
- [Fix] Reinstalled @doist/prettier-config from the npm registry and removed the authentication needed when pulling down dependencies.
4.1.3:
- [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. 🤞
4.1.0:
- [New] The
eventobject is now forwarded to the on* handler in theKeyCapturercomponent. TheonEnterevent will also no longer fire when it's in the middle of an IME composition session.
4.0.2:
- [New] Brings back individual JS and CSS files so that applications can do selective import in an ES6 build.
4.0.1:
- [Fix] Modal.Actions now can have empty or null children again
4.0.0:
- [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"
3.1.2:
- [Tweak] Removes unused (legacy) context from
<Time />constructor
3.1.1:
- [Tweak] Better typing for the checkbox label
3.1.0:
- [Feature] Adds typings for all components and utilities
3.0.1:
- [Fix] Formatting in the
<Time />component wasn't working as expected, this is now fixed.
3.0.0:
- [Breaking] Changed namespacing from
.reactist.popover {}to.reactist_popover {}. Customizing components' styling need to update accordingly.
2.0.2:
- [Tweak] Changed time formatting from
yesterdayto1d
2.0.1:
- Empty release
2.0.0:
- [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.
1.22.06:
- [New] Added a
refreshprop 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.
1.22.05:
- [Fix] Fixed the
display: intialCSS rule for IE11 users (affects the<Popover />component)
1.22.04:
- [Tweak] Fixed unsupported
display: initialin IE11
1.22.04:
- [Tweak] Fixed broken styles for
<Modal>on small screens
1.22.03:
- [Tweak]
<Popover />content can now be a function which will only be lazily evaluated
1.22.02:
- [Tweak]
<Popover />content is now rendered lazily (i.e. only ifvisibleistrue)
1.22.01:
- [Tweak]
<Modal.Body />now starts to scroll instead of requiring the whole window to scroll.
1.22.00:
- [Tweak]
<Dropdown.Body />can now be a function which allows for lazy evaluation (i.e. content is only rendered when dropdown is opened).
1.21.00:
- [Tweak] introduced
.npmignorefile to keep released package smaller and only include the essentials. This also fixes a bug in v1.20.00 where parts of the.gitdirectory ended up in the file package.
1.20.00:
-
[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.
1.19.00:
- [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
1.18.15:
- [Tweak] Using a 3px border-radius everywhere instead of a mixture of 3px and 4px
1.18.14:
- [Tweak] Updated the
<CloseIcon />(used in<Modal.Header>) to new icon style
1.18.13:
- [Tweak] Decreased top and bottom margins of
<Modal />to 40px
1.18.12:
- [Tweak] Increase left and right padding of
<Input />to 10px to match<Select />
1.18.11:
- [Tweak]
<ColorPicker />no longer shows the dropdown arrow and it's styling no longer includes margins - [New]
<ColorPicker />now comes in asmallversion which is only 18px squared instead of 24px
1.18.10:
- [Tweak] Switched separators (
<hr />) in<Dropdown />to border gray to unify colors more
1.18.09:
- [Tweak] No longer force no text-decoration on
<LinkButton />
1.18.08:
- [New] When providing a className to
<Input />it no longer overrides reactist' native styles
1.18.07:
- [New] Allowing to attach a ref to
<Input />
1.18.06:
- [Bug] Centering the text of
<Tooltip />
1.18.05:
- [Bug] Set visibility of
<Popover />tononeto avoid click jacking
1.18.04:
- [New] Added
withArrowproperty to<Tooltip />to support arrow-less tooltips
1.18.03:
- [Tweak]
allowVaguePositioningnow also takes the vertical positioning into account instead of only the horizontal one
1.18.02:
- [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.
1.18.01:
- [Tweak] Reset margins on
<Input />so it's visually aligned in Safari (and all other browsers) by default
1.18.00:
- [New] Added the utility component
<KeyCapturer>. Use it to wrap arbitrary elements and act on keyboard events happening while it is focussed
1.17.04:
- [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
1.17.03:
- [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
1.17.02:
- [New] Added
size,spinnerColorandbgColorproperties to<Loading />for a fully customizable loading experience
1.17.01:
- [Tweak] Unified all border colors across all components
1.17.00:
- [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.
1.16.08:
- [New] Added support for
disabledproperty to<Checkbox />
1.16.07:
- [Tweak] We now update the styles of
<Input />when supplying thedisabledproperty
1.16.06:
- [New] Added
mediumproperty to<Modal.Box />as a new size constant. It will produce modals that are 680px wide - [New] Added
plainproperty to<Modal.Body />which removes all styling from the body for custom modals
1.16.05:
- [Tweak] Darkened border color of
<Select />to border color constant
1.16.04:
- [Bug] Changed class name of loading
<Button />fromloadingtobusyto avoid clash with theloadingclass name of<Loading />
1.16.03:
- [Tweak] Darkened font and border color of secondary button to improve readability
1.16.02:
- [Tweak] Relaxed prop types of most components which render strings to also accept component(s)
1.16.01:
- [Tweak] Updated icon of
<Select />to fit our iconography
1.16.00:
- [Tooling] Updated to webpack 4, babel 7 and fixed some problems in our build process.
moment,classnamesandprop-typesare 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 ⚡️
1.15.24:
- [Bug] When closing a modal by pressing esc we now prevent the browser's default behaviour (e.g. leaving fullscreen mode)
1.15.23:
- [Bug] Clicking on the inner overlay of
<Modal />(aka left or right of the modal) whencloseOnOverlayClickwas set totruethe modal wouldn't close
1.15.22:
- [Bug] Changing the
rightprop of<Dropdown />didn't have any effect as it was "cached" in internal state upon first construction
1.15.21:
- [Tweak] Added rounded corners to the blue line indicating an active tab
1.15.20:
- [Bug] Setting
useCapturetotrueto catch scroll events of all elements of a page to correctly hide the tooltip
1.15.19:
- [New] Added
gapSizeto<Tooltip />
1.15.18:
- [Redesign] The
<Loading />indicator is now a spinning circle instead of three bouncing dots
1.15.17:
- [Tweak] Inactive tabs use the secondary font color instead of custom gray
1.15.16:
- [Tweak] Darkened primary and secondary font colors for improved readability
1.15.15:
- [New] Added support for the
styleproperty to<Modal.Box />and<Modal.Body />for when a className is not enough
1.15.14:
- [Tweak] Sets the default value of the
delayShowof the<Tooltip />component to 500ms (0.5s) instead of 1s
1.15.13:
- [Tweak] Set the margin of
<Select />to 0 to avoid browser inconsistencies in Safari
1.15.12:
- [Tweak] Instead of using the default delay of 1s (1000ms) for tooltips when hovering the
<Time />component we now use 500ms (0.5s)
1.15.11:
- [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
colorprop to the<ColorPicker />it would crash. Now it selects the first color in thecolorList.
1.15.10:
- [Tweak] Increased the size of the white inner ring that appears when hovering a color item of the
<ColorPicker />
1.15.9:
- [Redesign] New design for the
<ColorPicker />- It now shows the color name on hover – when supplied through the
colorListprop
- 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!