@rocket.chat/fuselage-ui-kit

@rocket.chat/fuselage-ui-kit

UiKit elements for Rocket.Chat Apps built under Fuselage design system

Install

Firstly, install the peer dependencies (prerequisites):

npm i @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons @rocket.chat/styled react react-dom

# or, if you are using yarn:

yarn add @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons @rocket.chat/styled react react-dom

Add @rocket.chat/fuselage-ui-kit as a dependency:

npm i @rocket.chat/fuselage-ui-kit

# or, if you are using yarn:

yarn add @rocket.chat/fuselage-ui-kit

Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues.

Building

As this package dependends on others in this monorepo, before anything run the following at the root directory:

yarn build

Linting

To ensure the source is matching our coding style, we perform linting. Before commiting, check if your code fits our style by running:

yarn lint

Some linter warnings and errors can be automatically fixed:

yarn lint-and-fix

Component stories

We develop and describe our visual components in the form of stories, manage by a tool called Storybook. To start developing with Storybook, run:

yarn storybook

Changelog

0.31.23 (2023-05-05)

Features

• (icons) Add compass icon (#950) (fd52af7)
• Attachment File new design (#932) (f61bd08), closes #927
• fuselage: Modal wrapper & wrapperFunction prop (#959) (4493328)
• fuselage: Add linkTarget prop for Banner component (#971) (f4e9645)
• fuselage: add aria-disabled prop to Option component (#942) (e7366fb)
• fuselage: add disabled variant to option (#939) (052c1b4)
• fuselage: Avatar Emoji (#930) (8f9fae1)
• fuselage: Sidebar theme (#923) (410befb)
• fuselage: SidebarBanner component (#975) (377000b)
• fuselage: Skeleton Circle Variant (#1006) (bad19d5)
• fuselage: Tag Featured Variant (#935) (634a97d)
• icons: Add desktop-text icon (#972) (0183bbd)
• Loading state on creating first member form (0d0f4ef)
• message-parser: custom domains whitelist (#1010) (dcd05f0)
• onboarding-ui: remove type field in company data section (#1002) (8dad809)

Bug Fixes

• enabling emphasis inside link label (b1fece0)
• fuselage-hooks: Fix usePosition (#967) (6098687)
• fuselage: SidebarItem menu glitch on hover (#991) (c92cfad)
• fuselage: Add missing types to PaginatedMultiselect / Filtered (#988) (102d97e)
• fuselage: Adjusted PaginatedMultiSelect to keep received/returned values consistent (#994) (057b036)
• fuselage: Avatar element excending container width (#1017) (94fbb72)
• fuselage: Badge bg token colors (#945) (461ecf6)
• fuselage: button var prefix (#938) (2181514)
• fuselage: Chevron vertical position (#910) (f086df2)
• fuselage: colors (#980) (cf26af6)
• fuselage: Correct tokens usage (#940) (b1292b5)
• fuselage: Fix scrolling issues due menu button wrapper (#987) (4e0bcff)
• fuselage: InputBox addon click (#982) (d00d0ea)
• fuselage: MessageBody word break (#1018) (59fee60)
• fuselage: Multiselect won't update if value changes (#983) (77a3b9c)
• fuselage: Pagination number (#936) (e421970)
• fuselage: selected-messages color (#1004) (83ef093)
• fuselage: token refactor (#943) (5bead65)
• fuselage: word break in rcx-message-body (#1028) (0c70a1d)
• message-parser: Differ link, autoLink, and autoEmail helpers (#993) (db343e0)
• message-parser: Inline Code with mention and/or mail pattern (#1021) (00fb041)
• message-parser: Link parser issues (#962) (3377d6b)