All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and adheres to Semantic Versioning.
- fix
PropertyBasefor small screen sizes to wrap its content
FilterListto allow limiting the used operators
FlexibleDateTimeInputnot having a correct default time and throwing warnings on mode change
SortingList
ColumnSwitchericonTableHeaderto truncateTableColumnSwitcherdoes not show pinning icon anymore when pinning is disabled
FlexibleDateTimeInputcomponent forDateTimeInputfor easy switching between Date and DateTime input- actions attribute to
DateTimeInputfor displaying action buttons - Tests for
useMultiSelectionanduseSingleSelectionhooks
FilterList- Height of chips and buttons is not consistent with the standard height
- Allows the addition of children
- The structure of
IdentifiedFilterValueis now the same asColumnFilterfrom@tanstack/react-tableto allow for easy integration
- Search for
SelectandMultiSelect - Type ahead support for
SelectandMultiSelectnpm ComboboxcomponentFilterListcomponent for dynamically choosing and setting filtersuseSelectState,useMultiSelectState,useCombobox,useSingleSelection,useMultiSelectionuseTypeAheadSearchfor getting the value of a timed type ahead search
useSearchto require less parameter and only do a simple search and caching the result
- imports in
TimePickerandDateTimeInput
- update packages
DateTimePickerDialogto correctly manage its state
- Seconds and Milisecond input to
TimePicker
DateUtils.toInputStringto allow for different precision levels
DateUtils.toInputStringto have the wrong format for dateTime
DateTimeInputto triggeronValueChangeandonEditCompleteas expected
- uncontrolled and controlled state management to
TabSwitcher initiallyActiveattribute toTabPanels
- removed unused
tooltipClassNameattribute fromTooltipand adddisplayProps
Expandablenot propagating its attributes to the root element
useUpdatingDateStringrelative time not showing the month amount as years
useUpdatingDateStringrelative time not showing the smallest relative unit for months
useUpdatingDateStringbeing capitalized
useUpdatingDateTimetouseUpdatingDateString
useUpdatingDateStringoptional parameters to actually be optional
useUpdatingDateStringto show absolute or relative Date strings- time input to
DateTimeInput
DateTimeInputto allow for writing input
DateTimeInputnot using its stylinguseControlledStatenot propagating the correct value for onChange
- keyboard controls to
DayPicker focus-style-shadowfor a shadow around the focused element- CSS variable for styling elements uniformly
Switchcomponent- disable option for
TabPanels
- all components now use a hybrid approach for hybrid and controlled state management
- use
data-name=<name>for all components for easily overridable styling instead of classnNames Drawernow is modularized and provides a contextTooltipdoes not open on focus anymore, and provides its tooltip always to screen readers- styling of several components
- removed all disable react-hooks/exhaustive-deps lint warning and fix them appropriately
IconButtonnot reacting to blur for closing the tooltip
focusFirstfromuseFocusTrapdue to the availability ofinitialFocuslayoutattribute fromButton- Geometry Components such as
RingandCircleas these can be CSS only solutions
ColumnSizingWithTargetFeatureandAutoColumnOrderFeatureto Table for column size fixing and column orderingTooltiptoTableColumnSwitcherforceMountattribute toDrawerTooltipRoot,TooltipTrigger, andTooltipDisplayto make it decomposableuseResizeObserveranduseScrollObserverto react to resize and scroll events on HTMLElements- added these to the
AnchoredFloatingContaineras options
- added these to the
IconButtonto better capture the different accessibility requirements of both button types- use
IconButtoninstead of buttons withlayout="icon"
- use
useLocalStorageto be calleduseStorageand allow for listing to storage changesThemeDialogis now split intoThemeSelectandThemeIconuseTransitionStateuses the window to get animations if no valid ref is provided, and it warns if a ref is provided and its value is null- names for Tablefilters
tagsis nowmultiTagstagsSingleis nowsingleTag
- Table column sizing when toggling visibility and changing order
TextFilterpopup having 2 case-sensitive checkboxes
Tooltipnow closes on click
TableProviderto use a Partial state for controlled state management
datetimetodateTimefor TableFilter
dateTimeandtagsSingleand now part of theFilterFnsobject on table
TableFilterfor date time and single tagsToolTipstoTableFilterButtonandTableSortButtonlabelmeta attribute to column defs to allow for omitting the header name but still showing one for theColumnSwitcher
FormObserverKeyusing the restrictedkeyproperty
useCreateForms update method in its return type now accepts a boolean to indicate whether an update should be triggerd
TablePaginationfor smaller screensNumberPropertyandTextPropertyto not useonRemove
FormStoreto return stable copies to prevent infinite loops
TableBodynot showing filler row cells ifcolumnOrderdoes not exist
onFillerRowClickforTables to react to such clicksuseFormObserverandFormObserverto listen to form updates
DateTimeInputnow only exposes its triggering elements ref- Moved
ValidationBehavoirfrom theFormStoreto theFormField
DateTimeInputalways showing the value as a placeholderTableBodyfiller rows reacting to sorting and visibility
- The body rows of a
TableBodynow have data attributedata-clickableif a definedonRowClickis provided
Checkboxnot enforcing its sizingTableHeadercells not being relative to allow for proper positioning of the resize indicator
- inconsistent usage of
default-style-noneon some classes by removing it entirely asall: unsetis available through css
Tableas a default implementation of a table with a provider pagination, title and actionsTablePaginationan opinionated component for Table paginationTableColumnSwtichera button with a pop-up for changing the column sorting and visibility
TablePaginationbuttons now show a tooltip- Table element styling now uses classNames and no longer data-attributes
- Table Context updates not triggering on sorting or other changes
- A bug in
useTransitionStatethat caused it to
- Paginated Loading of Table entries
TableColumnPickerfor choosing the displayed columnsTableContextTableColumnfor defining the columns through the table contextPopUpfor simplifying the usage of theAnchoredFloatingContainerwith conditional hiding logic and aFocusTrap- Add
DialogRootandDialogOpener - Add several new
TableFilter
TableFilterButtonnow uses theDateTimeInputcomponent- the folder name for global contexts to
global-contextsinstead of the previouscontextto be more verbose about its purpose FocusTrapby splitting it intoFocusTrapwhich takes a ref of the element to entrap andFocusTrapWrapperwhich directly provided this element as a<div>OverlayRegistrynow returns the unsubscribes as a return function of the subscribe function- several components to now use interfaces instead of types
- impure calls and hooks for
useTransitionState
usePopOverPositionin favor ofuseAnchoredPosition
FillerCells not having their padding on the table component- type in
expandable-content-h-*utitlity class
SelectandMultiSelectto have different types for their options
Tooltipnot closingSelects in dialogs
useFormCreatenow returns the functionsonUpdate()- Functionality to form handling to differentiate local changes and updates that should be sent to the server
SelectandMultiSelectto have different types for their options
MultiSelectnot triggeringonEditCompleteExpandableto only show one expansion icon
useFormCreatenow returns the functionsgetErrors()andgetIsValid()
useFormCreatenow returns the functionsgetValues()and allows update to receive anupdaterfunction
HightideConfigContextfor storing Look and Feel VariablesHightideProviderto bundle all hightide contexts in one provider- Added Code panel to storybook
Drawercomponent that alows for stacking- autoprefixer for CSS backwards compatability
useTransitionStatehook to keep track of transition changesFormandFormStorefor form handlingInifinteScrollcomponent for infinitly scrolling listsPropertyFieldtype for enforcing the same interface for all properties
Tablesto no longer round their column size- Split
Expandableinto 3 componentsExpandableRoot,ExpandableHeader,ExpandableContent - storybook folder structure and removed title from stories to allow for dynamic folder structure
- Component styling to be CSS and data-attribute based instead of relying on in component classNames
- Moved
ExpansionIconout ofExpandablefile and into its own - Changed internal folder structure
- Replaced
ZIndexRegistrywithOverlayRegistryto allow for saving more information about overlays then just their zIndex FormElementWrapperto clone children and give them the required props when not using the bag- Input elements such as
Input,TextArea,Select, etc. now all useonValueChangeandonEditCompleteinstead of other alternative names - Date- and Time-Picker to use the
value,onValueChange,onEditCompletepattern
useOverwritableStatepropagating the old instead of the updated stateTablebackground to overflow on the edges
Labelcomponent due to it having no functionality
useFloatingElementcalculating when no container exists yet
DateTimeInputmissing translation- a bug where changing days caused the minutes to change as well
- the many
Tooltips story
LoadingAndErrorComponentandVisibilityto always return aJSX.Element
- fixed race condition in tooltip
- VisibilityComponent
- Upgrade to Storybook 10.0.0
- Disable
ButtonsonClickevent propagation by default- This can be reactivated with the
allowClickEventPropagationflag
- This can be reactivated with the
- Change DateTimePicker styling and arrangement
- deprecated
MutableRefObjecttoRefObject TableSortButtonshow the index at which it currently is applied- Changed Tooltip to be position based on anchor an not relative
- tooltips not disappearing if mouseleave happens too fast
- .arb variable typing not set
- Tests for translation parser which are now in @helpwave/hightide
- Update dependencies
- A conventions document
- A
input-elementstyle for all user-input elements
- All user-input elements now provide
data-disabled,data-invalidanddata-valueattributes for styling - Focus styling now uses these tailwind utilities
focus-style-outlineprovided also asfocus-style-defaultfor every element (deactivatable withfocus-style-none)focus-style-borderfocus-style-none
- Styling location of several user-input elements to component.css
- CSS exports to differentiate better between utilities and theming
coloring-<solid | text | outline>CSS class uses the colors below to color the element according to the colorprmiary,secondary,positive,negative,warning,disabledCSS classes to set the variables forcoloring-*useZIndexRegistryhook to manage zIndex of elements that pop in and out of the viewport likeSelect,Dialog,Tooltip
- Consolidated
SolidButton,TextButton,OutlinedButton,IconButtoninto on componentButtonwith four attributesButtonSize,ButtonColoringStyle,ButtonLayout,ButtonColor - Split css classes into theming and utility
SelectOptions now only use marker padding when there is a selected value- Changed styling of
DayPickerto make the currently selected day more easily visible
- Fixed
Carouselhaving negative indexes for when left button is used
SolidButtonTextButtonOutlinedButtonIconButtoncolor-tag-*are removed andChipnow uses the button colors- Dependency on
react-custom-scrollbars-2andtinycolor2 - Removed
shadingutilities
PromiseUtilswith asleepanddelayedfunction
CheckBoxnow propagates value changes withonCheckedChange
- Removed
rowandcolcss utilities useflex-row-2andflex-col-2instead- Regex for checking usage
("|'|`| )col("|'|`| )or("|'|`| )row("|'|`| )
- Regex for checking usage
- Removed dependency on
radix-ui
- Allow Tables to be sorted by multiple columns
- Pagination max Page count now has the same size as the Input for the current page
- Update and pin all dependencies
- Added
TabViewandTabfor easily changing between tabs
"@helpwave/internationalization": "0.4.0"
tsupnow only uses one entrypoint- Merged
buildandbuild-productioninto onebuildscript
- fix commonJS and module exports
- Fix build to properly recognize external packages
- Remove unused dependencies
- Increase version of
@helpwave/internationalizationto0.3.0
- Change the name of the translations to
HightideTranslationto be easier to integrate with other translations
- Changed translation to use the arb format and ICU string replacements
- Moved translations to the locales folder
- Locales are now used instead of Languages
- translations are now split into 2 translation functions
useTranslation: directly usable and uses the preferred localeuseICUTranslation: parses every input with a ICU interpreter (less efficient)
- fixed padding on the
InsideLabelto be properly aligned
- Fixed
NavigationItemWithSubItemto make all links have the same length int the menu - Fixed
<li>elements inNavigation
- Fixed
ThemeDialogandLanguageDialogto properly show select options
- Fixed
Carouselhaving more than one focusable item
- Changed
Carouselto have an eventonSlideChangedwhen the slide changes
- Removed
TextImagecomponent
- Changed
Dialogs to only be part of the DOM-Tree when open
- Fixed
SelectButtonnot reacting correctly to arrow keys when determining the highlighted value - Fixed
ThemeProviderandLanguageProviderto consider thesystemvalue as an overwrite - Fixed
ConfirmDialogstory using a wrong initial state
- Exported and renamed
NavigationItemtoNavigationItemType
- Fixed
Dialognot being client side by default
- Changed
useLocalStorageto remove values that produce an error on load
- Fixed closing animation for
Dialog - Fixed
LanguageProviderandThemeProviderto not set undefined values into storage
- Added
--cleanoption to barrel script - Added
useOverwritableStateto wrapuseStateanduseEffectin uncontrolled components - Added
FormElementWrapperonTouched callback and aria-attributes - Added
ValidatorErrors and translation for selection items
- Changed
barrelscript location to a dedicated scripts folder - Split
buildscript inbuildandbuild-production - Stopped saving of system theme and language values and instead load them if value is not found
- Removed index.ts files from version control to force direct imports
- Removed usages of
noop
- Changed Dialog z-index to 100
- Fix
FormElementWrapperlabelledBy misspelling
- Change
Dialogto only use fixed positions
- Changed the default background for surfaces and inputs to create higher contrasts
- Fix a
Dialogs description rendering a div when not set - Fix initial misalignment of
Dialogs in some cases
- Make
SingleSelectPropertyandMultiSelectPropertyuseSelectOptions for styling
- Changed
SingleSelectPropertyandMultiSelectPropertyto accept a label
- HTML elements now use
color-scheme: darkwhen in dark mode - Add invalid state styling to Selects
- Add a placeholder color called
placeholder - Add a hook for localized validation translation
useTranslatedValidators
disabledandrequiredare now optional inFormElementWrapper- changed focus to draw an outline instead of a ring
- removed several typography entries that only change the
font-weight(e.g.typography-label-md-bold->typography-label-md font-bold)
- Fix disabled color for
Select
- added barreling script and barrel files
- pin dependencies
- Fix css export path
- Add a theme preference listener to
useThemehook - Add icons to the Theme dialog
- Add a config attribute to the
SelectRootcomponent - Add
NavigationandNavigationListcomponents for reusable Navigation menus - Add accessibility for carousel
- move
isMultiSelectattribute ofSelectRootinto the configSelectConfiguration - split
layout-and-navigationintolayoutandnavigation(same for stories)
- Add
FloatingContaineranduseFloatingElementfor aligning a floating element - Add
ListBoxfor selecting a value from a list - Added accessibility for
Select,MultiSelect,Expandable,Avatar FormElementWrapperto label and validate inputs- Add size options for
Expandable - Add
ScrollArea - Add
FocusTrapanduseFocusTrapfor focus trapping - Add
useIsMountedfor checking when a component is rendered
- Renamed
textstyletotypographyfor ClassNames - Changed css folder to style folder
- Changed
HelpwaveBadge,HelpwaveLogoto allow for different sizes - Merged
DialogandModaland made modal a configuration option - Adjust
LanguageDialog,ThemeDialog,ConfirmDialog,InputDialog,DiscardChangeDialogfor changes toDialog - Updated Stories
- Changed
rangefunction syntax: (new)range(value, [lower, higher]) - Changed relative to absolute imports (only partial)
- removed typographies (full list below)
typography-title-3xltypography-title-2xltypography-title-xltypography-title-smtextstyle-title-normaltextstyle-accenttextstyle-descriptiontextstyle-table-nametextstyle-table-headertextstyle-navigation-itemtextstyle-form-errortextstyle-form-description
- Removed Label from base input components. (full list below)
InputSelectMultiSelectTextarea
- Removed
InputModal,LanguageModal,ThemeModal
- Added a story for a form example
- Fixed
ThemeProviderto correctly use the stored theme in the context - Fixed disabled state and styling on
Checkbox,Input,Select,MultiSelect
- Fixed
useThemeandThemeProviderto correctly load the theme
- Changed
Avatarto show backup icon when no name or image supplied - Changed component to use next
ImageandLink - Changed CSS to use referential values
- Changed
LoadingAndErrorComponentto have a minimum loading time - Changed design of
BreadCrumbs - Update multiple storybook stories
- Added
coloredHoverBackgroundoption toTextButton - Added colors for input elements to css instead of using surface
- Change
Avatarcomponent to allow for name displays - Change color for
Modals andMenus
- Fixed
MenuandOverlayz-Indexes
- Save theme choice to local storage
- Changed storybook background
- Changed color on dark surface to be brighter
- Fixed
MenuandOverlayz-Indexes
- Added
LoadingContainerfor showing a loading animation
- Changed
Expandableto allow for styling the expansion container
- Add animations for
Expandable,Select,MultiSelect,Menu,Modal,Dialog - Add utility for defining a flex-column or flex-row with its gap directly
- Add hook
usePopoverPositionto easily define the position of a popover based on a trigger element
- Changed the disabled color for dark and light mode
- Changed overlay background color to be configurable
- Changed
SelectandMultiSelectto now be variants ofMenu - Made
SelectandMultiSelectscrollable - Menu now allows for defining the direction in which the PopOver is openend
- Changed the design of
SingleSelectPropertyandMultiSelectProperty
- fix console logging in
useDelay - fix helpwave icon animation for safari
- fix
TableWithSelectionaccess tobodyRowClassName
- Added a
useDelaystory - Added a
CopyToClipboardWrapperto allow for easy copy to clipboard buttons
TableWithSelectionnow allows for disabling row selection
- Added a
TableCellcomponent which is used to display all unspecified table cells
TableStateis now optional on the table
- Fixed
Tablestories to only use known properties
- Added filtering, resizing and filler rows for the
Table - Added transparent background option for
IconButtons - tailwind utilities for spacing scalable rounding
- Added a page input to the pagination component
- Added a
resolveSetStatefunction to easily get the value that result from aSetStatein aDispatch - Added
useRerenderhook to allow for easy rerendering - Added
useFocusMangement,useFocusOnceVisible.useResizeCallbackWrapper
- Changed hardcoded
px, orremvalue in components to spacing scalable alternatives - Split uncompiled CSS into many different files for easier readability
- Changed
rangeutility to be configurable and end-exclusive
- Fixed
CheckBoxdisabled state
- change negative color in dark mode
Selectcomponent selection indicator to the suffix rather than prefix- changed
Selectcomponent stories to display them with less width
- fixed
LanguageModalandThemeDialognot displaying their text in the Select
useChipDisplayis now optional forMultiSelect- increased shadows for
Menu,SelectandMultiSelect - Update
PropsForTranslationto not assume a props type
- Changed localization
- added separate localization packages
- added a
TranslationPluralobject to make pluralization easy - make every translation a function
- added formatting
MenustoryCarouselstory
- Changed
SelectandMultiSelctto have an inbuild search and close when clicked outside - Changed
Menuto have no negative margin - Changed css to reduce duplications and instead use variable
- Removed
SearchableSelect-> now inbuild inSelect
- Changed
StepperBarto have a simplified state and more options - Update colors and adapt borders to dark-mode for
Select-based components
- removed default exports
- removed next from dependencies and replace next image with img
- removed
TileWithImageforTextImage
StepperBarstory
- Differentiate between
ExpandableandExpandableUncontrolled - Differentiate between
StepperBarandStepperBarUncontrolledand an option to disable steps - Removed gap between the title and description of a
Tileand added a default title style
InputDialogis now a modal and not a dialog- Button now have the not-allowed cursor when disabled
- Removed gap in
BreadCrumbcomponents
Expandablestory
Expandablegraphically and to allow for disabling
ConfirmModal
ConfirmDialogto not include a cancel option -> use theConfirmModalinstead- Change dark mode colors in
globals.css
- .editorconfig
IconButtonThemeDialogstorybookThemeOverride.css
- Update README.md to hold more information on publishing
- Update controllable Components to also offer an uncontrolled version (controlled stays the default)
- Update file structure
- Update imports to allow for absolute imports with
@ - Update Storybook to version
9.0.10 - Differentiate
Overlay,ModalandDialog - Update the
Tooltipappearance
- examples which are now part of their corresponding story