Skip to content
StudioCMS
UI
Docs

Release Notes

This document contains release notes for the @studiocms/ui package. For more information, see the CHANGELOG file ⤴

1.0.0-beta.3

'Read the “', 1.0.0-beta.3, '” section'
  • #130 ⤴ 57f900d ⤴ Thanks @RATIU5 ⤴! - Fixes toggle colors, adds new “gray” color for toggle circles, and adds a light variant for the default flat colors.

1.0.0-beta.2

'Read the “', 1.0.0-beta.2, '” section'

  • #125 ⤴ 9473be8 ⤴ Thanks @RATIU5 ⤴! - Colors have been adjusted to look better for all components. Badge variants now default to “outlined” and the “default” value has been deprecated. The deprecation was due to the badges failing WGAG AAA guidelines. All projects using the “default” variant should be updated to use “outlined” instead.

  • #118 ⤴ 1779190 ⤴ Thanks @RATIU5 ⤴! - Updates the Tabs components to optionally use a custom ID

  • #119 ⤴ 6bdc0ee ⤴ Thanks @louisescher ⤴! - Fixes an issue where the toaster HTML Element would have an unnecessary comma attribute due to a typo.

  • #124 ⤴ 8a2f606 ⤴ Thanks @Adammatthiesen ⤴! - Improve icon handling and processing, allowing icon sets defined in the config to also use - in their name (e.g. ‘simple-icons’)

1.0.0-beta.1

'Read the “', 1.0.0-beta.1, '” section'

1.0.0-beta.0

'Read the “', 1.0.0-beta.0, '” section'

  • #88 ⤴ b96fe4d ⤴ Thanks @Adammatthiesen ⤴! - Update Icon component to utilize all iconifyJSON icons that have been passed through into the config

    Breaking Changes

    'Read the “', Breaking Changes, '” section'
    • Default Icon names are now prefixed with heroicons: instead of just the icons name. This allows user-defined icons to be used without conflicting with the pre-shipped icons.

  • #106 ⤴ 613830e ⤴ Thanks @Adammatthiesen ⤴! - Introduce individual component virtual exports alongside the bundled barrel virtual export 'studiocms:ui/components'

    You can now import for example Button component from studiocms:ui/components/button

  • #89 ⤴ ce1f6fc ⤴ Thanks @Adammatthiesen ⤴! - Migrate from injected types to ambient types for static virtual modules

  • #86 ⤴ 63e3b9e ⤴ Thanks @RATIU5 ⤴! - Adds a skeleton loading state component

  • #87 ⤴ 80d1970 ⤴ Thanks @Adammatthiesen ⤴! - Removes ThemeToggle as it was causing a error when added to the virtual module, it is now recommended to use the ThemeHelper directly

  • #92 ⤴ bd47caf ⤴ Thanks @RATIU5 ⤴! - Fixes #91, alert type is respected and shows appropriate colors

  • #103 ⤴ 111e685 ⤴ Thanks @RATIU5 ⤴! - Fixes Select components UI bug, where list items had no background and showed bullet points

  • #104 ⤴ f708d9d ⤴ Thanks @RATIU5 ⤴! - - Refactored the accordion component so it works with the Tabs component, and with nested accordions

    • Refactored the Tabs component to support nested tabs
    • Added a new active prop to the Tabs component to set the initial active tab

  • #96 ⤴ ddf67da ⤴ Thanks @louisescher ⤴! - Changes the way colors are declared to allow for a better customization experience.

    Before, we would use raw HSL values in order to be able to modify them later on:

    :root {
      --background-base: 0 0% 6%;
    }

    This introduces an unnecessary hurdle to customization, since most other libraries ship with either their own color values and spaces or a different approach entirely. Thus, the goal of this PR is to replace this approach with a simpler one. We will now default to HSL functions instead of the raw values:

    :root {
      --background-base: hsl(0 0% 6%);
    }

    Migrating from this can be a little tedious if the old system was used in custom components. You can use this regular expression with VSCode’s (or any other IDE’s) search & replace feature to replace all instances of the old syntax with the new:

    Search Value: hsl[a]?\((var\([A-Za-z-\d]+\))\) Replace Value: $1

    Please make sure to manually search for hsl(var( and hsla(var( after running the above to make sure all previous values have been replaced.

  • #101 ⤴ 12eba39 ⤴ Thanks @RATIU5 ⤴! - adds the tooltip component

  • #93 ⤴ bb5ab5a ⤴ Thanks @RATIU5 ⤴! - Adds StudioCMS Typography using a .prose class

0.4.17

'Read the “', 0.4.17, '” section'
  • #94 ⤴ 2b89d92 ⤴ Thanks @RATIU5 ⤴! - prevents overflow select dropdowns with a scrollable container and enables toggling the dropdown via svg icon click

0.4.16

'Read the “', 0.4.16, '” section'

0.4.15

'Read the “', 0.4.15, '” section'

0.4.14

'Read the “', 0.4.14, '” section'

0.4.13

'Read the “', 0.4.13, '” section'

0.4.12

'Read the “', 0.4.12, '” section'

0.4.11

'Read the “', 0.4.11, '” section'

0.4.10

'Read the “', 0.4.10, '” section'

0.4.9

'Read the “', 0.4.9, '” section'

0.4.8

'Read the “', 0.4.8, '” section'

0.4.7

'Read the “', 0.4.7, '” section'

  • #56 ⤴ 40ae2ea ⤴ Thanks @Adammatthiesen ⤴! - Add option to disable global CSS injection and allow users to import the global css themselves.

    Basic Example of how to import:

    ---
    import "studiocms:ui/global-css";
    ---

0.4.6

'Read the “', 0.4.6, '” section'

0.4.5

'Read the “', 0.4.5, '” section'

0.4.4

'Read the “', 0.4.4, '” section'

  • #48 ⤴ 4a43e03 ⤴ Thanks @Adammatthiesen ⤴! - Fix Icon component requiring functions from Iconify Utils lib during runtime as well as extend usage possibilities.

    NEW:

    • IconBase component exported from studiocms:ui/components which allows passing custom image collections from Iconify.

    Updated:

    • Icon component to use this new system.

0.4.3

'Read the “', 0.4.3, '” section'

0.4.2

'Read the “', 0.4.2, '” section'

0.4.1

'Read the “', 0.4.1, '” section'

0.4.0

'Read the “', 0.4.0, '” section'

  • #36 ⤴ 07e2d9e ⤴ Thanks @louisescher ⤴! - Implement Build step and migrate all exported components into virtual modules

    Instead of @studiocms/ui/components use studiocms:ui/components

    For more information see https://ui.studiocms.dev ⤴

  • #36 ⤴ 07e2d9e ⤴ Thanks @louisescher ⤴! - Add a few new components:

    • Accordion
    • Badge
    • Breadcrumbs
    • Group
    • Progress
    • Sidebar

    Add two new colors

    • info (Blue)
    • monochrome (Black/White)

    Add the ability to pass a CSS file for customization of all colors

0.3.2

'Read the “', 0.3.2, '” section'

0.3.1

'Read the “', 0.3.1, '” section'

0.3.0

'Read the “', 0.3.0, '” section'

0.1.0

'Read the “', 0.1.0, '” section'

0.0.1

'Read the “', 0.0.1, '” section'
  • Initial Testing release