Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
# [5.0.0](v4.8.0...v5.0.0) (2023-08-03) ### breaking * replace the underpinning framework with MUI 5 ([54efe9f](54efe9f)) ### Bug Fixes * add a hidden `input` element in `ComboBoxField` and `LookupField` to assign their selected key to their field name ([d2bf7ba](d2bf7ba)), closes [#20](#20) [#56](#56) * add missing `useDebouncedState` hook export ([948ffe6](948ffe6)) * add missing `useStyleSystemProps` export ([4aa8316](4aa8316)) * add missing export of `Lookup` ([405eee2](405eee2)) * added `cursor-not-allowed` attribute to stop the cursor rendering as a pointer when it's disabled ([b9a602d](b9a602d)), closes [#6](#6) * **Arrow:** alignment issue in tooltips ([7f5de3e](7f5de3e)) * **Avatar:** renders broken image placeholders in Safari and Chrome ([4b626c9](4b626c9)), closes [#3](#3) * **Badge:** uniform vertical alignment and gap for children ([0c0b47e](0c0b47e)) * **Badge:** vertically center content ([fdd59f8](fdd59f8)) * **build:** reconfigure tsc to target ES5 and DOM ([51d2fda](51d2fda)) * **build:** remove bundling of react-hook-form and internationalized/date ([317613b](317613b)) * **build:** resolve a number of issues around the build process for d.ts files ([57ef153](57ef153)) * **Button:** bad Omit prop type ([dd6e706](dd6e706)) * **Button:** incorrect display mode when used as a polymorphed element ([a8af1f1](a8af1f1)) * **Button:** incorrect display mode when used as a polymorphed element ([b586474](b586474)) * **Button:** omit hover styles while disabled ([b9566e6](b9566e6)) * **Button:** omit hover styles while disabled ([299437a](299437a)) * **Button:** subtle variant missing text contrast for dark mode ([1d23a3f](1d23a3f)) * **Callout:** using the wrong type for `placement` prop ([0d51958](0d51958)) * **Center:** switch to CSS Grid for simpler alignment ([4a209f9](4a209f9)) * **CheckboxIcon and RadioIcon:** prevent the icons from being compressed when their following text is very long ([a5d655c](a5d655c)), closes [#25](#25) [#45](#45) * **CheckboxIcon and RadioIcon:** prevent the icons from being compressed when their following text is very long ([e5e3406](e5e3406)), closes [#25](#25) [#45](#45) * **CheckboxIcon:** incorrect ARIA role ([74430e7](74430e7)) * **CheckboxIcon:** incorrect colors when disabled ([3e1d462](3e1d462)) * **CheckboxSetField:** detect change to `undefined` while in controlled mode ([8c02dfc](8c02dfc)) * **Chip:** isRemovable prop is optional ([cc17cb7](cc17cb7)) * **Chip:** mismatched padding ([8b75cdb](8b75cdb)) * **ci:** add missing publishConfig key ([44d19ea](44d19ea)) * **ci:** lock semantic-release to v19 due to Node 18+ requirements in v20 ([71edfb1](71edfb1)) * clipping issues for focus indicators on multiple components ([9a1ab32](9a1ab32)) * **CloseButton:** pass down padding to the icon ([3bf3f18](3bf3f18)) * **ComboBoxField:** add missing label to inner list ([08324f7](08324f7)) * **ComboBoxField:** icon size to match the rest ([1013587](1013587)) * **ComboBoxField:** misaligned dropdowns ([99fa9cf](99fa9cf)) * **ComboBoxField:** use string over key for value types ([be0c34a](be0c34a)) * **DateField:** change exposed form field type from `DateValue` to `string` ([2f628c5](2f628c5)), closes [#66](#66) * **DateField:** low text contrast ([0a1285d](0a1285d)) * **deps:** `react-hook-form` is an optional dependency ([e454ea6](e454ea6)) * **deps:** drop unecessary import of tailwind utilities to cut build size in half ([aebe361](aebe361)) * **Details:** add missing ref and prop spread ([6c45531](6c45531)) * **Details:** hide the detail marker in Safari ([4326081](4326081)), closes [#1](#1) [#43](#43) * **Details:** hide the detail marker in Safari ([3a6352c](3a6352c)), closes [#1](#1) [#43](#43) * **Details:** missing focus ring ([937f077](937f077)) * disable prettier errors when using the VSCode plugin ([62c68ce](62c68ce)) * **Divider:** incorrect width ([cd04e3e](cd04e3e)) * **Divider:** increase line width to match BUX ([e073397](e073397)) * **Divider:** invalid width when in a flex-grow container ([19606a5](19606a5)) * **docs:** add forced rerender of uncontrolled form components for a form's `onReset` ([753b53f](753b53f)), closes [#59](#59) * **DocumentPagination:** add missing forwarded ref ([c4acdb1](c4acdb1)) * duplicate `LookupOption` type export ([4f62373](4f62373)) * **eslint:** no longer creates false reports of unused variables on typescript types ([05d1268](05d1268)) * **FormErrors:** compatibility with RHF 7 ([cc964d9](cc964d9)), closes [#58](#58) * **FormErrors:** incorrect type for errorMessage keys ([2819ad4](2819ad4)) * **FormErrors:** incorrect type for errorMessage keys ([44603a9](44603a9)) * **FormField:** do not render label element when using `aria-label` ([79ae72f](79ae72f)), closes [#67](#67) * **FormField:** propagate error state down to MUI ([e937cec](e937cec)) * **Grid:** make props optional ([469a14a](469a14a)) * hide default buttons on webkit browers for `input[type="search"]` ([c4ff676](c4ff676)) * **Icon:** `aria-label` not propagating down to the DOM attributes ([14aacfa](14aacfa)) * **Icon:** `style` prop should not be passed down to inner component ([c98f338](c98f338)) * **Icon:** add missing forwarded ref ([ce00264](ce00264)) * **Icon:** add role for aria labeling ([8287cb8](8287cb8)) * **IconButton:** icon did not center within larger button surfaces ([602f865](602f865)) * **IconButton:** use theme breaks instead of exact pixel values ([4927c05](4927c05)) * **Icon:** missing aria-label when role is img ([56e28ac](56e28ac)) * **Image:** standardize broken image placeholder across browsers ([2facb72](2facb72)), closes [#5](#5) * improve CSS cascading issues with theme tokens, now RUI Providers may be nested safely ([1f6b141](1f6b141)) * inconsistent value and onChange types behaviour across form fields ([70a6d02](70a6d02)) * incorrect type for `overlayProps` in Modal and Popover ([352157c](352157c)) * **Indicator:** size requires pixels instead of spacing units ([d95466a](d95466a)) * **InputField:** add missing necessity indicator ([a77d1a0](a77d1a0)) * **Interview:** hide Q+A labels from screen readers ([e455b76](e455b76)) * **Link:** add missing ref ([07b6d9c](07b6d9c)) * **LookupField:** close icon alignment ([607713b](607713b)) * **mergeProps:** type conflict for newer TS ([782c7e4](782c7e4)) * missing focus ring on icon slot components ([39a746c](39a746c)) * missing hook export ([9d843c8](9d843c8)) * missing TS declarations path ([f56317f](f56317f)) * **NecessityIndicator:** set `aria-label` instead of label ([b558ddd](b558ddd)) * **NumberField:** add a hidden `input` element to tie a `NumberField`'s numberValue to its name in `FormData` ([3c2dc46](3c2dc46)), closes [#55](#55) [#60](#60) * **NumberField:** incorrect base type for props ([ca58a26](ca58a26)), closes [#21](#21) * **NumberField:** reference to missing component ([2a799bf](2a799bf)) * **NumberField:** use larger click areas for increment/decrement buttons ([0f42e9b](0f42e9b)) * **OhioStateFooter:** do not use semantic `footer` element ([dd5001c](dd5001c)), closes [#46](#46) * **OhioStateNavbar:** links are not typed ([d3956f5](d3956f5)) * **PaginationButtons:** prev/next buttons do not disable when on the first/last page ([c839bdf](c839bdf)) * polymorphics incompatible with components with `as` props ([4536326](4536326)), closes [#83](#83) * **polymorphics:** compile-time prop checking and support for non-ReactNode children - required by React Aria components ([d0bf92b](d0bf92b)) * **Popover:** keyboard focus will no longer leave the popover' ([4ab509e](4ab509e)) * **PrimaryButton:** match BUX's button padding ([379af43](379af43)) * **ProgressBar:** incompatibility with React Aria upgrade ([9502118](9502118)) * **RadioIcon:** `className` causes built-in styles to be dropped ([80bde26](80bde26)) * **RadioIcon:** incorrect border color when disabled ([328a841](328a841)) * **RadioIcon:** incorrect colors when disabled ([39293f0](39293f0)) * **RadioSetField:** detect change to `undefined` while in controlled mode ([02d0469](02d0469)) * **RadioSetField:** prevent react-aria warnings ([9f24b80](9f24b80)), closes [#61](#61) * react-aria warnings when children or aria-label were not provided to the hook ([c4a7acd](c4a7acd)) * read only state not supported by multiple components ([e2c99cf](e2c99cf)) * remove array spread from collection iterators ([d67da70](d67da70)), closes [#23](#23) * remove BackToTop and Markdown components. Neither were fully implemented ([d21fa93](d21fa93)) * remove cyclic dependencies that slow down builds ([745d639](745d639)) * remove unneeded dependency on react-transition-group ([68e6f61](68e6f61)) * rename all slot props to have a `render` prefix to improve compatibility with the eslint rule `react/no-unstable-nested-components` ([924de55](924de55)) * rename LinkButton to TextLink to conform to BUX's conventions ([b09aff9](b09aff9)) * **ScrollArea:** adaptive height when the viewport is smaller than the area limits ([62c416f](62c416f)) * **SelectField:** add check for the placeholder prop ([9a7b2cb](9a7b2cb)) * **SelectField:** disabled state not propagated down to the `Interactive` ([37665be](37665be)) * **SelectField:** missing chevron icon ([3d2b96a](3d2b96a)) * **Stack:** match Groups defaults for align and justify ([f2facd9](f2facd9)) * state not correctly passed down for checkbox and radio sets ([7d30870](7d30870)), closes [#50](#50) * **storybook:** automatic detection of component doc pages ([aab8ab8](aab8ab8)) * **storybook:** build does not reference correct SVG path ([844518e](844518e)) * **storybook:** include props from React Aria and React Stately in docs ([1415402](1415402)) * **storybook:** Safari does not render `backdrop-filter` (closes [#4](#4)) ([af415e1](af415e1)) * **style system:** resolve CSSProperties instead of spacing tokens for size props w, h, miw, mih, maw, and mah ([30b15ad](30b15ad)) * **SwitchField:** incorrect value, defaultValue, and onChange types ([6e67ef6](6e67ef6)), closes [#24](#24) * **SwitchIcon:** `className` causes built-in styles to be dropped ([02ffb50](02ffb50)) * **SwitchIcon:** set a min width to prevent resizing ([70b499f](70b499f)) * **Table:** width should be 100% of the content ([a287269](a287269)) * **TabPanel:** disabled state is still interactive ([839ee4d](839ee4d)) * **TabPanel:** remove panel background for simple variant ([7b93b34](7b93b34)) * **tailwind:** add missing min-width and min-height spacing tokens ([29fa6e7](29fa6e7)) * **tailwind:** add missing patterns for xxs spacing ([8dd413e](8dd413e)) * **tailwind:** reduce intensity of ping animation ([d788d13](d788d13)) * **tailwind:** remove Tailwind forms to better support our own UX ([7867288](7867288)) * **TextAreaField:** extraneous rows rendered ([d3ba156](d3ba156)), closes [#26](#26) * **theme tokens:** wrong dimmed-contrast for dark theme ([f64d9f4](f64d9f4)) * **ToggleButton:** `variant` prop should be optional ([0f0f991](0f0f991)) * **Tooltip:** absolute positioning relative to the trigger ([e649c77](e649c77)) * typography and tokens are not built into the generated dist/index.css ([0fa9ed1](0fa9ed1)) * **UnstyledButton:** block usage of native `onClick` to force developers to use `onPress` for better a11y ([974222b](974222b)) * **UnstyledButton:** force prop coercion to work around rollup issue ([3c1a5aa](3c1a5aa)) * **UnstyledButton:** merge forwarded ref with button ref ([065d8b5](065d8b5)) * **UnstyledButton:** react-aria button props override passed down props ([deb668b](deb668b)) * **UnstyledToggle:** add missing focus ring ([d9ca6b9](d9ca6b9)) * **UnstyledToggleButton:** remove polymorphism to avoid conflict with base button props ([cf45d30](cf45d30)), closes [#31](#31) * **useRUIForm:** use correct type for `onBlur` ([a6199df](a6199df)), closes [#69](#69) * **useScreenSize:** screens larger than xxl do not get correct breakpoints applied ([f7fe24c](f7fe24c)), closes [#48](#48) * **useScreenSize:** screens larger than xxl do not get correct breakpoints applied ([41edc92](41edc92)), closes [#48](#48) * **useStyleSystem:** responsive font props are not resolved ([d05b8a2](d05b8a2)) * **utils:** handle responsive props that resolve to undefined ([1d42b85](1d42b85)) * **YesNoField:** fix exposed types in value/onChange ([9540655](9540655)) * **YesNoField:** fix exposed types in value/onChange ([18ee1ad](18ee1ad)) ### Features * UI 5 rewrite 📝 ([f5f0f28](f5f0f28)) * add `LazyLoaded` component from UI 4 ([061c69e](061c69e)) * add `position: relative` as default behaviour for Group and Stack ([027896e](027896e)) * add `Prose` component that applies Tailwind Typography to content ([14e6cbf](14e6cbf)) * Add `Section` component to avoid needing to expose react-stately to consumers ([c449b18](c449b18)) * add `SliderField` component ([7f83742](7f83742)) * add `SplitButton` component ([26379ff](26379ff)) * add a factory method to generate a placeholder component on required slots ([535afa1](535afa1)) * add a11y and badge addons to Storybook and wrap redundant story code with factories ([4a3c1e5](4a3c1e5)) * add Admonition component for non-alert content ([a892060](a892060)), closes [#39](#39) * add Arrow component ([2bbdaee](2bbdaee)) * add AvatarGroup component ([e491057](e491057)) * add BUX-style Back to Top button ([b908123](b908123)) * add Callout and Popover components ([83b6d42](83b6d42)) * add Chip component ([89bc66c](89bc66c)) * add Code component ([143a65b](143a65b)) * add components for checkboxes and checkbox groups ([6e91322](6e91322)) * add constants and types for style system prop groups ([96490aa](96490aa)) * add contrast tokens for accent colors ([c4b591a](c4b591a)) * add CSS Grid layout component ([a3db432](a3db432)) * add DateField component ([8e8fd0c](8e8fd0c)) * add DateRangeField ([1a5c7e9](1a5c7e9)), closes [#70](#70) * add edit icon ([5a93e43](5a93e43)), closes [#27](#27) * add External Link, Missing Slot, and Necessity Indicator components ([8655803](8655803)) * add Figma token file for use with Tokens Studio ([a24c203](a24c203)) * add Focus Ring, Underlay, Unstyled Toggle, RUI Provider, and Radio Icon components ([68d5920](68d5920)) * add FormDialog, InformationDialog, ConfirmDialog, Modal, and ConfirmButton components ([86df804](86df804)) * add FormErrors component for standardizing a list of errors and a11y focus links ([b44c3f0](b44c3f0)) * add HashLink component ([f5c900c](f5c900c)) * add illustrations for content empty states and brand SVGs ([8fcc05f](8fcc05f)) * add Image component ([98a0ba7](98a0ba7)) * add input field abstractions ([ebf624e](ebf624e)) * add Item component based on Adobe's React Stately ([4c5ad9e](4c5ad9e)) * add Kbd component ([902fac7](902fac7)) * add LinkList, TextLink, ConfirmButton, and CloseButton from 5.0-alpha ([62f574d](62f574d)) * add logo ([6b601e6](6b601e6)) * add LookupField, ComboBoxField, and NumberField components ([4b8607b](4b8607b)) * add Menu component ([7c8b4e7](7c8b4e7)) * add more flexible `MenuButton` component to replace old `Menu` ([67dd24d](67dd24d)) * add new `Admonition` ([d12e953](d12e953)) * add new `Interactive` base component for handling all stateful styling of interactive fields (inputs, selects, etc) ([146b060](146b060)) * add new LookupField that supports any object shape ([06e8fea](06e8fea)) * add new Section Title component to replace the Title variant ([a8c1649](a8c1649)) * add new UnstyledList component ([84f20fe](84f20fe)) * add Ohio State Footer component ([0bc4e63](0bc4e63)) * add Ohio State Navbar ([6caad37](6caad37)) * add our own mergeRefs function with polymorphic ref support ([28ac028](28ac028)) * add PaginationButtons components ([c0dfa4a](c0dfa4a)), closes [#78](#78) * add ProgressBar component ([0eef567](0eef567)), closes [#13](#13) * add RadioSetField ([b716d95](b716d95)) * add ScrollArea component ([a2a92a7](a2a92a7)) * add SelectField for single option selection ([7a345f7](7a345f7)) * add source files to distribution bundle ([8a271ac](8a271ac)) * add support for `full` and `auto` spacing values ([03a099c](03a099c)) * add SwitchIcon and SwitchField components ([80420c0](80420c0)) * add Table component ([14e9116](14e9116)) * add TabPanel component ([df81faf](df81faf)) * add Tailwind preset for apps that use their own Tailwind runtimes may include and extend RUI's config ([b395c49](b395c49)) * add TextField and TextAreaField components ([ca24e91](ca24e91)) * add the full brand color palette ([1f96f93](1f96f93)) * add ToggleButton and HamburgerButton components ([e54060e](e54060e)) * add ToggleField for abstracting boolean and keyword atomic fields ([19b22aa](19b22aa)) * add Tooltip component ([308a843](308a843)) * add type checks for responsive and theme map types ([153095f](153095f)) * add useRUIForm hook to support react-hook-form integration across all field components ([5af4f7f](5af4f7f)) * add useScreenSize hook ([ab1326a](ab1326a)) * add useStyleSystem and useSlots hooks ([9c56645](9c56645)) * add useStyleSystemProps hook for reducing props to only StyleSystemProps ([8ea785b](8ea785b)) * add useTabularData hook to support typical use cases for data tables ([7075183](7075183)) * add YesNoField component ([a12fcc2](a12fcc2)) * **Admonition:** add style system prop support ([ed8318f](ed8318f)) * **Alert:** improve dark mode colors ([60e59d8](60e59d8)) * **Arrow:** add `size` prop ([286cfd7](286cfd7)) * **Avatar:** improve edge anti-aliasing and add polymorphism ([f9d7dd3](f9d7dd3)) * **Badge:** add support for accent colors ([407a546](407a546)) * **Box:** add bgc prop ([9ae46f0](9ae46f0)) * **Button:** add accented variant for usage against accent backgrounds ([f620aad](f620aad)) * **Button:** add leftSlot and rightSlot props ([54976af](54976af)) * **Callout:** add support for accent backgrounds ([cefa606](cefa606)) * **CheckboxIcon:** match BUX for disabled state ([fb5a0e4](fb5a0e4)) * **CheckboxSetField:** add `placeholder` prop and compatibility with React Stately lists ([9ba9ffc](9ba9ffc)) * **Code:** add block display mode ([c5935f3](c5935f3)) * **FormField:** add `data-field` and `data-label-for` for a11y focus control without a context ([ad71c50](ad71c50)) * **Group:** add support for wrapping content ([3e76a92](3e76a92)) * **Heading:** add className, id, and style props ([c61e912](c61e912)), closes [#28](#28) * **Icon:** add `blank` for a placeholder that renders no content ([fc77be8](fc77be8)) * **Icon:** add inline support ([56abecb](56abecb)) * **Icon:** add optional `label` prop to set role to `img` when defined ([9269141](9269141)) * **Icon:** add rotate and flip props ([3eed6a9](3eed6a9)) * **IconButton:** add background shade on hover ([0490585](0490585)) * **Icon:** improve alignment and add support for passing down props to the svg ([63b45e0](63b45e0)) * **Image:** add support for theme responsive `src` ([03e33cc](03e33cc)) * **Indicator:** add style system support ([0d9c1fc](0d9c1fc)) * **InputField:** add left and right slots ([31132bb](31132bb)) * **ListBox:** add style system control props to the parent and all items ([48bff36](48bff36)) * **ListBox:** add support for sections ([dc2770a](dc2770a)) * **LookupField:** add support for a custom icon and using the item renderer for the selection ([3efde0c](3efde0c)) * **Menu:** add `isDisabled` prop ([9dd8b2b](9dd8b2b)), closes [#54](#54) * **Menu:** add support for sections ([e4c6d58](e4c6d58)) * **OhioStateNavbar:** add light and dark variants ([3d20cca](3d20cca)) * **Paper:** add support for accents ([0e06027](0e06027)) * **Popover:** add arrow and accented background support ([06d42e3](06d42e3)) * **Popover:** add option to disable the arrow ([4fe5717](4fe5717)) * **Popover:** add support for manually defining placement ([bf3ff03](bf3ff03)) * **RadioSetField:** support custom item renderers ([9f4be1d](9f4be1d)) * **RadioSetField:** support custom item renderers ([4ff9340](4ff9340)) * refactor Ohio State brand components into MUI ([4016acc](4016acc)) * **RUI Provider:** add theme control ([2bb8a8d](2bb8a8d)) * **scripts:** add index rebuilding as part of the new component script ([9e9fb5b](9e9fb5b)) * simplify and standardize focus ring styles ([c7a69af](c7a69af)) * standardize on `value` and `onChange` props for collection fields CheckboxSet, ComboBox, Lookup, and Select ([ad5e833](ad5e833)) * **storybook:** add live demo for each breakpoint ([148412d](148412d)) * **storybook:** add support for automatically embedding component diagram SVGs ([4573772](4573772)) * **style system:** add standard grid layout props and theme-resolved props ([95a782a](95a782a)) * **style system:** add support for that occassionally useful negative pixel ([e64343e](e64343e)) * switch to newer, more consistent, semantics for color tokens ([8f4df30](8f4df30)) * **Table:** add sort icons to columns ([886d15b](886d15b)) * **Table:** add support for style system props ([7f128c3](7f128c3)) * **Table:** add variants and striped flag ([e8abe86](e8abe86)) * **TabPanel:** add controlled component support ([5740db4](5740db4)) * **TabPanel:** add variants, focus rings, and button semantics for tab buttons ([8685eae](8685eae)) * **tailwind:** add box shadow underline variants ([957c8ca](957c8ca)) * **TextField:** add `autoFocus` and `type` props ([ba8d953](ba8d953)) * **Title:** add BUX's responsive font sizes ([ba48854](ba48854)) * **Tooltip:** add placement and offset props ([e5b6b06](e5b6b06)) * **Underlay:** add variants ([6c53892](6c53892)) * **UnstyledButton:** add `data-disabled` when the disabled state is passed down ([e8ed19b](e8ed19b)) * **UnstyledButton:** add `data-disabled` when the disabled state is passed down ([7fc4859](7fc4859)) * **UnstyledButton:** add `data-pressed` attribute during pressed states - active pseudo is not used via React Aria's useButton ([35cbbfd](35cbbfd)) ### Performance Improvements * refactoring dependencies to reduce bundle size ([fe24bff](fe24bff)) * refactoring dependencies to reduce bundle size ([85dea0a](85dea0a)) * **storybook:** resolve lag issue when a component has too many event handler props, specifically inputs ([bec0e69](bec0e69)) ### Reverts * Revert "chore(release): 1.0.0 [skip ci]" ([cb49643](cb49643)) ### BREAKING CHANGES * Dropped use of TailwindCSS in favor of Material UI 5. This removes redundant components (Box, Stack, Text, etc) and introduces a TSS styling system to replace the previous CSS bundling. Form components have been refactored to take advantage of new MUI base fields and several components have been introduced to wrap MUI components to be always-accessible. Components that are not an immediate need for the Office of Research applications (e.g. Interview, Listicle) have been dropped from the beta. * Overhaul of the entire framework for v5 - Switch from Styleguidist to Storybook for the design system reference - Switch from Bootstrap to Tailwind for styling and colocated styles - Switch to microbundle for bundling ESM/CJS/etc distributions - Refactor the base of all components to introduce standardized style props - Complete visual rework to align with the BUX design system - Accessibility-first component development process
- Loading branch information