Skip to content
Added
==========================================

**CSS**

- Added missing `-text--xlarge` and `-text--xxlarge` helpers.
- Added new CSS variables for negative spacers : `--spacer-*-n`.
- Added `-flex-column` and `-inline-flex-column` helpers
- Completed `-h*` helpers: `-h1` to `-h6` are now available to look like their corresponding header.
- Add text helper `-text--nowrap` which prevents line breaks
- Added new colors and alternatives colors as CSS variables (see the docs for "CSS variables > Colors")
- Created new `-bg--color-*` variants for new colors
- Created new `-text--color-*` variants for new colors
- Added `-text--<state>-alt` variants for state colors
- Added `-bg--color-<state>-alt` and `-bg--color-<state>-alt` helpers
- Added `-b*`, `-b*--alt`, `-b*--none` border helpers
- Added helpers for flexboxes and grids:
  - `-flex-none`
  - `-align-self-start`,
  - `-align-items-start`, `-align-items-baseline`,
  - `-justify-content-start`, `-justify-content-center`, `-justify-content-right`, `-justify-content-left`
- Added `-grid-1-3` helper
- Added new visibility helpers:
  - `-inline`, `-sm:inline`, `-md:inline`, ...
  - `-inline-block`, `-sm:inline-block`, `-md:inline-block`, ...
- Added `-text--weight-*` helpers for font weights
- Added `-link--text` helper to display links like text
- Added breakpoints CSS variables: `--bp-small`, `--bp-medium` and `--bp-large`
- Added more input-related CSS variables: `--input-placeholder-opacity` and `--input-font-size`

**Components**

- `RuiTag`: Added `color` prop that accepts hexadecimal value (transparency not supported)
- `RuiEmpty`: Added an `actions` slot to display optional buttons
- `RuiSearchForm`: Emits `submit` on form submission
- `RuiSearchForm`: Add a default placeholder
- `RuiSearchForm`: Add a button to clear input
- `RuiSearchForm`: Add a `submittable` prop to control display of the submit button (false by default)
- `RuiDateTimePicker`: Add all props applicable to the `RuiField` wrapper
- `RuiDateTimePicker`: Add `clearable` prop: adds a button to clear the field
- `RuiDropdown`: Added `arrowIcon` prop to replace the arrow on the trigger
- `RuiDropdown`: Add `variant` prop to change trigger color. Uses the same variants as the `RuiButton`
- `RuiButton`: Add `*-text` variants. It displays a normal button with the colored text only.
- `RuiErrors`: Add a slot for additional content or actions

**Library**

- New CSS files variants are available in `dist` directory.

**Documentation system**

- Catch errors when generating metadata
- Add support for `@propsGroup` tag, usable on component definition to group props together in API and Playground pages
- Add support for a list of components to ignore

Changed
==========================================

**CSS**

- Most of the size units are now in `rem` unit. Change the `--font-size-base` variable to adapt all the components.
- Slightly changed `mute` color and its alternative color to better fit with other states
- Slightly decreased font size in `pre` blocks
- [BREAKING] Rename all `-text--<color>` helpers to `-text--color-<color>`.
- [BREAKING] Rename `-flex--center` by `-justify-content-center`
  [BREAKING] Rename `-flex--right` by `-justify-content-right`
- Desaturate inputs backgrounds on dark theme
- Rename variable `--input-color-placeholder` to `--input-placeholder-color`

**Components**

- [BREAKING] `RuiToolbar`: Removed the `help` prop and slot. It's replaced by a `right` slot only, without integration of the
  `RuiHelpButton` to minimize dependency on external libraries.
- `RuiListItem`: Remove paddings
- `RuiEmpty`: Change default icon
- [BREAKING] `RuiFormErrors`: Renamed component to `RuiErrors`
- [BREAKING] `RuiCollapsibleListItem`: Component now uses `details` tag; its template has been simplified, as its CSS classes.
- `RuiField`: Handle arrays of errors
- [BREAKING] Replaced deprecated prop `hasFooter` on `RuiModal` by its inverse `noFooter` which defaults to `false`.
- `RuiToolbar`: Remove extra padding in buttons
- `RuiErrors`: Decrease title size
- `RuiTagSelector`: Rework CSS of the whole component to make it more compact and complete some missing overrides.

**Library**

- [BREAKING] The library stylesheet is no more included with the `RiseUI` plugin, you will need to import it yourself.
- [BREAKING] The library stylesheet has been split into different flavors:
  - `minimal.scss`: only the reset, helpers and theme colors. Perfect to build your own components
  - `with_css_components.scss`: ...well... the minimal set _plus_ the few CSS-only components
  - `rise_ui.scss`: Everything above _plus_ the VueJS component styles
  - `full.scss`: Everything above plus the styles for the supported external libraries. You will need these libs for the
    styles to work.
  - `fonts.scss`: The font declaration. Extracted from the styles so it can be changed without having unused fonts around.
- [BREAKING] The components relying on external libraries are removed from the components index: `RuiSearchForm`,
  `RuiHelpButton`, `RuiHelpButtonContent`, `RuiRgbaPicker` and `RuiTagSelector`.
- [BREAKING] `RiseUI` plugin won't load all the components anymore. Import them individually in your
  components/views, or import them globally in your entrypoint.
- [BREAKING] JS files are not compiled anymore. Only CSS files are:
  - `dist/minimal.scss`
  - `dist/with_css_components.scss`
  - `dist/rise_ui.scss`
  - `dist/full.scss`
  - `dist/fonts.scss`
- [BREAKING] Fonts declarations are extracted from the SCSS file for more control and smaller generated CSS files.
- [BREAKING] Rework of library exports (paths that bundlers - at least Vite - will follow when importing files).

**Documentation system**

- [BREAKING] `DocumentationSystem` plugin won't load all the documentation system components anymore. Import them
  individually in your documentation components/views or import them globally in your documentation entrypoint.

Removed
==========================================

**Library**

- Remove previously deprecated `randomString()` from `/path/to/RandomString.js`. Change import to the same paths, but
  to `String.js` instead.

**Dependencies**
- [BREAKING] Removed "toaster-js" dependency as it only was used for the styles overrides. If you don't use toaster-js,
  remove the dependency; If you used it and the RiseUI CSS copy and use the overrides
  [from the previous version](https://gitlab.com/experimentslabs/garden-party/rise-ui/-/blob/f5a26f322560c1bdca911431ea89ed36dee6862c/src/stylesheets/lib/_toast-js.scss).

**CSS**

- Remove previously deprecated `-grid--gap` an `-flex--gap` helpers

Fixed
==========================================

**CSS**

- Reworked reset for `<select>` to be better displayed in WebKit browsers
- Changed the orange color for something brighter
- Improved styling of _color_ inputs
- `code`: Prevent wrapping
- `-grid-*` helpers now have a minimum width, preventing some rendering issues
- Fixed display of Rails UJS "button_to" in `RuiField` appended controls
- `_writing`: Remove top margin on first paragraph, bottom margin on the last

**Components**

- `RuiModal`: Fix footer height on "large" variant
- `RuiDropdown`: Fix the case when clicking on a menu entry makes the component disappear (expectedly), leading to console
  errors.
- `RuiMenuItem`: Only display a cursor pointer when item is a link or a button
- `RuiItem`: Use correct color for disabled state
- `RuiLoading`: Use the right animation (animation from a dependency was used by error)
- `RuiTag`: Prevent wrapping
- `RuiIcon`: Prevent icon to resize in flexboxes
- `RuiButton`: Prevent wrapping
- `RuiIconText`: Prevent icon to downsize
- Active `RuiButton`'s background changed to be more distinguishable from other components
- `RuiButton`: Remove icon margin on small size

**Documentation system**

- Improved display of prop controls
- Improve markdown renderer component layout for long lines
- `@preset` names now support any character except `{`
- Separate allowed values with a comma in the API view
- Remove dependency to `vue-i18n` in documentation. If you use the documentation system in your project but not `vue-i18n`,
  you can now remove it.