diff --git a/README.md b/README.md index 196b4c3f52..4b3a10725b 100644 --- a/README.md +++ b/README.md @@ -13,29 +13,29 @@ ![Pull requests](https://img.shields.io/github/issues-pr/RocketChat/fuselage?style=flat-square) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/RocketChat/fuselage?style=flat-square) -| Package | Description | Version | Dependencies | -|---------|-------------|---------|--------------| -| 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) | -| 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) | -| 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) | -| 📦 [`@rocket.chat/eslint-config-alt`](/packages/eslint-config-alt) | ESLint configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/eslint-config-alt) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/eslint-config-alt?style=flat-square) | -| 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) | -| 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) | -| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) | -| 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) | -| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) | -| 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/fuselage-ui-kit) | UiKit elements for Rocket.Chat Apps built under Fuselage design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-ui-kit?style=flat-square) | -| 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) | -| 📦 [`@rocket.chat/layout`](/packages/layout) | Shared Application Layout Components | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/layout) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/layout?style=flat-square) | -| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/logo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/logo?style=flat-square) | -| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/memo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/memo?style=flat-square) | -| 📦 [`@rocket.chat/message-parser`](/packages/message-parser) | Rocket.Chat parser for messages | [![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/message-parser) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/message-parser?style=flat-square) | -| 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) | -| 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) | -| 📦 [`@rocket.chat/peggy-loader`](/packages/peggy-loader) | Peggy loader for webpack | [![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/peggy-loader) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/peggy-loader?style=flat-square) | -| 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) | -| 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) | -| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) | -| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) | -| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit) | Interactive UI elements for Rocket.Chat Apps | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/ui-kit?style=flat-square) | -| 📦 [`@rocket.chat/uikit-playground`](/packages/uikit-playground) | | [![npm](https://img.shields.io/npm/v/@rocket.chat/uikit-playground?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/uikit-playground) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/uikit-playground?style=flat-square) | +| Package | Description | Version | Dependencies | +| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) | +| 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) | +| 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) | +| 📦 [`@rocket.chat/eslint-config-alt`](/packages/eslint-config-alt) | ESLint configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/eslint-config-alt?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/eslint-config-alt) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/eslint-config-alt?style=flat-square) | +| 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) | +| 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) | +| 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) | +| 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) | +| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) | +| 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/fuselage-ui-kit) | UiKit elements for Rocket.Chat Apps built under Fuselage design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-ui-kit?style=flat-square) | +| 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) | +| 📦 [`@rocket.chat/layout`](/packages/layout) | Shared Application Layout Components | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/layout) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/layout?style=flat-square) | +| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/logo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/logo?style=flat-square) | +| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/memo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/memo?style=flat-square) | +| 📦 [`@rocket.chat/message-parser`](/packages/message-parser) | Rocket.Chat parser for messages | [![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/message-parser) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/message-parser?style=flat-square) | +| 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) | +| 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) | +| 📦 [`@rocket.chat/peggy-loader`](/packages/peggy-loader) | Peggy loader for webpack | [![npm](https://img.shields.io/npm/v/@rocket.chat/peggy-loader?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/peggy-loader) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/peggy-loader?style=flat-square) | +| 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) | +| 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) | +| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) | +| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) | +| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit) | Interactive UI elements for Rocket.Chat Apps | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/ui-kit) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/ui-kit?style=flat-square) | +| 📦 [`@rocket.chat/uikit-playground`](/packages/uikit-playground) | | [![npm](https://img.shields.io/npm/v/@rocket.chat/uikit-playground?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/uikit-playground) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/uikit-playground?style=flat-square) | diff --git a/packages/fuselage-tokens/colors.js b/packages/fuselage-tokens/colors.js index a44b7f1b09..367d549461 100644 --- a/packages/fuselage-tokens/colors.js +++ b/packages/fuselage-tokens/colors.js @@ -49,7 +49,6 @@ module.exports = { 's700': '#19AC7C', 's800': '#148660', 's900': '#106D4F', - 's1000': '#0D5940', 's1-100': '#FDE8D7', 's1-200': '#FAD1B0', 's1-300': '#F7B27B', diff --git a/packages/fuselage-tokens/colors.json b/packages/fuselage-tokens/colors.json index 5c4faaf46f..2c1ed52340 100644 --- a/packages/fuselage-tokens/colors.json +++ b/packages/fuselage-tokens/colors.json @@ -47,7 +47,6 @@ "s700": "#19AC7C", "s800": "#148660", "s900": "#106D4F", - "s1000": "#0D5940", "s1-100": "#FDE8D7", "s1-200": "#FAD1B0", "s1-300": "#F7B27B", diff --git a/packages/fuselage-tokens/colors.mjs b/packages/fuselage-tokens/colors.mjs index 450aaba146..f469c01ba3 100644 --- a/packages/fuselage-tokens/colors.mjs +++ b/packages/fuselage-tokens/colors.mjs @@ -47,7 +47,6 @@ export default { 's700': '#19AC7C', 's800': '#148660', 's900': '#106D4F', - 's1000': '#0D5940', 's1-100': '#FDE8D7', 's1-200': '#FAD1B0', 's1-300': '#F7B27B', diff --git a/packages/fuselage-tokens/colors.scss b/packages/fuselage-tokens/colors.scss index 598bd2eff6..26e511875f 100644 --- a/packages/fuselage-tokens/colors.scss +++ b/packages/fuselage-tokens/colors.scss @@ -47,7 +47,6 @@ $colors: ( s700: #19ac7c, s800: #148660, s900: #106d4f, - s1000: #0d5940, s1-100: #fde8d7, s1-200: #fad1b0, s1-300: #f7b27b, diff --git a/packages/fuselage/src/components/Sidebar/Item.tsx b/packages/fuselage/src/components/Sidebar/Item.tsx index 40f3071be4..9128c1bbf2 100644 --- a/packages/fuselage/src/components/Sidebar/Item.tsx +++ b/packages/fuselage/src/components/Sidebar/Item.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, ReactNode } from 'react'; +import type { AllHTMLAttributes, ComponentProps, ReactNode } from 'react'; import React from 'react'; import type Box from '../Box'; @@ -9,14 +9,16 @@ type SidebarItemProps = { selected?: boolean; highlighted?: boolean; clickable?: boolean; + featured?: boolean; is?: ComponentProps['is']; children?: ReactNode; -}; +} & AllHTMLAttributes; export const SidebarItem = ({ selected, highlighted, clickable, + featured, is: Tag = 'div', children, ...props @@ -27,6 +29,7 @@ export const SidebarItem = ({ highlighted && 'rcx-sidebar-item--highlighted', clickable && 'rcx-sidebar-item--clickable', selected && 'rcx-sidebar-item--selected', + featured && 'rcx-sidebar-item--featured', ] .filter(Boolean) .join(' ')} @@ -41,7 +44,7 @@ export const SidebarItem = ({ type SidebarItemContainerProps = { children?: ReactNode; -}; +} & AllHTMLAttributes; export const SidebarItemContainer = (props: SidebarItemContainerProps) => (
( type SidebarItemMenuProps = { children?: ReactNode; -}; +} & AllHTMLAttributes; export const SidebarItemMenu = (props: SidebarItemMenuProps) => (
( type SidebarItemContentProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemContent = ({ className = '', @@ -79,7 +82,7 @@ export const SidebarItemContent = ({ type SidebarItemTitleProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemTitle = ({ className = '', @@ -94,7 +97,7 @@ export const SidebarItemTitle = ({ type SidebarItemTimeProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemTime = ({ className, @@ -109,7 +112,7 @@ export const SidebarItemTime = ({ type SidebarItemBadgeProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemBadge = ({ className, @@ -124,7 +127,7 @@ export const SidebarItemBadge = ({ type SidebarItemSubtitleProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemSubtitle = ({ className, @@ -139,7 +142,7 @@ export const SidebarItemSubtitle = ({ type SidebarItemWrapperProps = { children?: ReactNode; className?: string; -}; +} & AllHTMLAttributes; export const SidebarItemWrapper = ({ className = '', @@ -156,7 +159,7 @@ type SidebarItemIconProps = { className?: string; highlighted?: boolean; icon: ComponentProps['name']; -}; +} & Omit, 'name' | 'is'>; export const SidebarItemIcon = ({ highlighted, @@ -180,7 +183,7 @@ export const SidebarItemIcon = ({ type SidebarItemAvatarProps = { children?: ReactNode; -}; +} & AllHTMLAttributes; export const SidebarItemAvatar = ({ ...props }: SidebarItemAvatarProps) => ( diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx index 7099300e16..8c1090197a 100644 --- a/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx +++ b/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx @@ -19,7 +19,7 @@ import Sidebar, { SidebarFooterHighlight, SidebarItemIcon, } from '.'; -import { Avatar } from '../..'; +import { Avatar, Icon, Box, Tag, Divider } from '../..'; export default { title: 'Sidebar/Sidebar', @@ -40,101 +40,47 @@ export default { export const Default: ComponentStory = () => ( <> - - - - - - - - - - - - Title - - - - - - - - CallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallss - - - - - - - - - - - - - - - ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia - ishdfiuashdfiuas iuashdfiausdh - - - - - - - - - - - - - - - - - - - - - ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia - ishdfiuashdfiuas iuashdfiausdh - - - - - - - - - - - - - - +
+ - - + + + + + + + + + + Title + + + + + + + + CallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallssCallss + + + + + + + + + + @@ -144,24 +90,80 @@ export const Default: ComponentStory = () => ( + + + + + + + + + + + + + - + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh - + - - - - - - - - - - + + + + + + + + + + + + + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia + ishdfiuashdfiuas iuashdfiausdh + + + + + + + ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia + ishdfiuashdfiuas iuashdfiausdh + + + + + + + + + + + + + +
); @@ -343,3 +345,41 @@ export const WithFooter: ComponentStory = () => ( ); + +export const Admin: ComponentStory = () => ( +
+ + + Administration + + + Development + + + + + + + Import + + + + + + Users + + + + + + Rooms + + + + + + Apps + + +
+); diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss index ca7b60d450..fb0e216a16 100644 --- a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss +++ b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss @@ -3,23 +3,45 @@ @use '../../styles/typography.scss'; @import '../../styles/mixins/all.scss'; -$sidebar-header-height: theme( - 'sidebar-header-height', - theme('header-height', lengths.size(64)) +$sidebar-color-surface-default: theme( + 'sidebar-color-surface-default', + colors.surface(tint) ); -$sidebar-section-height: theme( - 'sidebar-section-height', - theme('section-height', lengths.size(56)) +$sidebar-color-surface-hover: theme( + 'sidebar-color-surface-hover', + colors.surface(hover) +); + +$sidebar-color-surface-selected: theme( + 'sidebar-color-surface-selected', + colors.surface(selected) +); + +$sidebar-color-font-primary: theme( + 'sidebar-color-font-primary', + colors.font(annotation) +); + +$sidebar-color-font-secondary: theme( + 'sidebar-color-font-secondary', + colors.font(secondary-info) ); -$sidebar-item-background-color: theme( - 'sidebar-item-background-color', - colors.surface(light) + +$sidebar-color-stroke-default: theme( + 'sidebar-color-stroke-default', + colors.stroke(light) +); + +$sidebar-color-stroke-focus: theme( + 'sidebar-color-stroke-focus', + colors.stroke(medium) ); -$sidebar-item-color: theme('sidebar-item-color', colors.font(annotation)); + +$sidebar-item-color: theme('sidebar-item-color', colors.font(secondary-info)); $sidebar-item-color-highlighted: theme( 'sidebar-item-color-highlighted', - colors.font(white, true) + colors.font(pure-white) ); $sidebar-item-background-color-hover: theme( 'sidebar-item-background-color-hover', @@ -42,8 +64,35 @@ $sidebar-item-color-selected: theme( colors.font(annotation) ); +$sidebar-item-background-color-featured: theme( + 'sidebar-item-background-color-featured', + colors.surface(featured) +); +$sidebar-item-color-featured: theme( + 'sidebar-item-color-featured', + colors.font(pure-white) +); +$sidebar-item-background-color-featured-hover: theme( + 'sidebar-item-background-color-featured-hover', + colors.surface(featured-hover) +); +$sidebar-item-background-color-featured-selected: theme( + 'sidebar-item-background-color-featured-selected', + colors.surface(featured-hover) +); + $sidebar-title-color: theme('sidebar-title-color', colors.font(annotation)); +$sidebar-header-height: theme( + 'sidebar-header-height', + theme('header-height', lengths.size(64)) +); + +$sidebar-section-height: theme( + 'sidebar-section-height', + theme('section-height', lengths.size(56)) +); + $sidebar-footer-box-shadow: theme( 'sidebar-footer-box-shadow', rgba(0, 0, 0, 0.1) @@ -74,6 +123,16 @@ $sidebar-footer-highlight-color: theme( } .rcx-sidebar { + color: $sidebar-color-font-secondary; + background: $sidebar-color-surface-default; + + &--divider { + border-color: theme( + 'sidebar-color-stroke-extra-light', + colors.stroke(extra-light) + ); + } + &-topbar { display: flex; flex-direction: column; @@ -104,7 +163,7 @@ $sidebar-footer-highlight-color: theme( &__title { @include typography.use-font-scale(p2m); - color: $sidebar-title-color; + color: $sidebar-color-font-secondary; } } @@ -115,7 +174,7 @@ $sidebar-footer-highlight-color: theme( padding-block: lengths.padding(4); padding-inline: lengths.padding(16); - color: $sidebar-item-color; + color: $sidebar-color-font-secondary; &__wrapper { @extend %sidebar-base; @@ -128,26 +187,31 @@ $sidebar-footer-highlight-color: theme( &--clickable { @include clickable; - @include on-focus-visible { - color: $sidebar-item-color-hover; - background-color: $sidebar-item-background-color-hover; - } - @include on-hover { @include use-no-shadow; - color: $sidebar-item-color-hover; - background-color: $sidebar-item-background-color-hover; + // color: $sidebar-item-color-hover; + background-color: $sidebar-color-surface-hover; } @include on-focus-visible { - @include use-focus-shadow-inset($sidebar-item-color-focus); + border: 1px solid $sidebar-color-stroke-focus; + // @include use-focus-shadow-inset($sidebar-item-color-focus); } } &:active, &--selected { - color: $sidebar-item-color-selected; - background-color: $sidebar-item-background-color-selected; + background-color: $sidebar-color-surface-selected; + } + + &--featured { + color: $sidebar-item-color-featured; + background-color: $sidebar-item-background-color-featured; + + &:hover, + :active { + background-color: $sidebar-item-background-color-featured-hover; + } } &__avatar { @@ -245,7 +309,7 @@ $sidebar-footer-highlight-color: theme( @include typography.use-font-scale(c2); @include typography.use-with-truncated-text(); - color: $sidebar-title-color; + color: $sidebar-color-font-secondary; } &-section { diff --git a/packages/fuselage/src/components/Sidebar/SidebarDivider.tsx b/packages/fuselage/src/components/Sidebar/SidebarDivider.tsx new file mode 100644 index 0000000000..c488f699a5 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/SidebarDivider.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import { Divider } from '../Divider'; + +export const SidebarDivider = () => ( + +); diff --git a/packages/fuselage/src/components/Sidebar/TopBar.tsx b/packages/fuselage/src/components/Sidebar/TopBar.tsx index 9b03a58915..e385dacb89 100644 --- a/packages/fuselage/src/components/Sidebar/TopBar.tsx +++ b/packages/fuselage/src/components/Sidebar/TopBar.tsx @@ -2,8 +2,8 @@ import type { ComponentProps, ReactNode, Ref } from 'react'; import React, { forwardRef } from 'react'; import Box from '../Box'; -import { Divider } from '../Divider'; import { SidebarAction, SidebarActions } from './SidebarActions'; +import { SidebarDivider } from './SidebarDivider'; const Avatar: { size: 'x24' } = { size: 'x24' }; @@ -49,7 +49,7 @@ export const TopBarToolBox = ({ {...props} > - + ); @@ -70,7 +70,7 @@ export const TopBarSection = ({ {...props} > - + ); @@ -87,8 +87,6 @@ export const TopBarAction = forwardRef(function TopBarAction( return ; }); -export const TopBarDivider = () => ; - type TopBarTitleProps = { children?: ReactNode; }; @@ -104,6 +102,6 @@ export default Object.assign(TopBar, { Avatar: TopBarAvatar, Actions: TopBarActions, Action: TopBarAction, - Divider: TopBarDivider, + Divider: SidebarDivider, Title: TopBarTitle, }); diff --git a/packages/fuselage/src/components/Sidebar/index.tsx b/packages/fuselage/src/components/Sidebar/index.tsx index 57ce1f5740..dab370fb10 100644 --- a/packages/fuselage/src/components/Sidebar/index.tsx +++ b/packages/fuselage/src/components/Sidebar/index.tsx @@ -4,6 +4,7 @@ import React from 'react'; import Box from '../Box'; import SidebarItem from './Item'; import SidebarSection from './Section'; +import { SidebarDivider } from './SidebarDivider'; import SidebarTopBar from './TopBar'; type SidebarProps = ComponentProps; @@ -14,6 +15,7 @@ export default Object.assign(Sidebar, { TopBar: SidebarTopBar, Item: SidebarItem, Section: SidebarSection, + Divider: SidebarDivider, }); export { default as SidebarItem } from './Item'; @@ -24,3 +26,5 @@ export { default as SidebarTopBar } from './TopBar'; export * from './TopBar'; export * from './SidebarFooter'; + +export { SidebarDivider }; diff --git a/packages/fuselage/src/components/Tag/Tag.tsx b/packages/fuselage/src/components/Tag/Tag.tsx index 130ff087e3..2ee136e52a 100644 --- a/packages/fuselage/src/components/Tag/Tag.tsx +++ b/packages/fuselage/src/components/Tag/Tag.tsx @@ -6,7 +6,13 @@ import { prependClassName } from '../../helpers/prependClassName'; type TagProps = { medium?: boolean; large?: boolean; - variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'secondary-danger'; + variant?: + | 'primary' + | 'secondary' + | 'danger' + | 'warning' + | 'secondary-danger' + | 'featured'; disabled?: boolean; icon?: ReactNode; } & AllHTMLAttributes;