rocketchat/fuselage

React port of Rocket.Chat's design system, Fuselage

Fuselage Monorepo

Package	Description	Version	Dependencies
📦 @rocket.chat/css-in-js	Toolset to transpile and use CSS on runtime
📦 @rocket.chat/css-supports	Memoized and SSR-compatible facade of CSS.supports API
📦 @rocket.chat/emitter	Event Emitter by Rocket.Chat
📦 @rocket.chat/eslint-config-alt	ESLint configuration for Rocket.Chat repositories
📦 @rocket.chat/fuselage	Rocket.Chat's React Components Library
📦 @rocket.chat/fuselage-hooks	React hooks for Fuselage, Rocket.Chat's design system and UI toolkit
📦 @rocket.chat/fuselage-polyfills	A bundle of useful poly/ponyfills used by fuselage
📦 @rocket.chat/fuselage-toastbar	Fuselage ToastBar component
📦 @rocket.chat/fuselage-tokens	Design tokens for Fuselage, Rocket.Chat's design system
📦 @rocket.chat/icons	Rocket.Chat's Icons
📦 @rocket.chat/layout	Shared Application Layout Components
📦 @rocket.chat/logo	Rocket.Chat logo package
📦 @rocket.chat/memo	Memoization utilities
📦 @rocket.chat/mp3-encoder	A LAME encoder to be used in web workers
📦 @rocket.chat/onboarding-ui	Set of components and functions for the onboarding experience on Rocket.Chat
📦 @rocket.chat/peggy-loader	Peggy loader for webpack
📦 @rocket.chat/prettier-config	Prettier configuration for Rocket.Chat repositories
📦 @rocket.chat/string-helpers	Helper functions for string manipulation
📦 @rocket.chat/styled	A simple styled API for React components
📦 @rocket.chat/stylis-logical-props-middleware	Stylis middleware to handle CSS Logical Properties and their fallbacks

fuselage's Issues

Multiselect: wrap and oveflow

Description

expected

current

Steps to reproduce

Insert an image/gif

TextInput

Select, SelectFiltered, MultiSelect, MultiSelectFiltered: Option dragged by page

Description
When scrolling the page, if any kind of Select is open, scrolling to the top of the page drags the select.

The same doesn't happen when scrolling down.

Steps to reproduce
Open Select, scroll up past the select.

Insert an image/gif

UI kit

Components

• IMAGE
• BUTTON
• STATIC_SELECT
• MULTI_STATIC_SELECT
• CONVERSATION_SELECT
• CHANNEL_SELECT
• USER_SELECT
• OVERFLOW
• DATEPICKER
• PLAIN_TEXT_INPUT
• SECTION
• DIVIDER
• ACTIONS
• CONTEXT
• INPUT

FEATURES

• export interfaces to help different implementations
• Loki regression

livechat -> omnichannel icon

🤷

Tags and Badges states

Describe the behavior
Hover, focus, and we need the "black option" or at least a custom option
Insert an image

Why can't I see any documentation describing how the component is used?

I'm surprised you all use this component.
If anyone knows, please let me know. Thank you.

Docs and types

provide a good way to document and export component types

Onboarding plugin

Describe the behavior

Insert an image

FilterDropdown

TextAreaInput: Addon not aligned, can't break line

Description
The addon (usually an icon) for the TextAreaInput component is aligned to top. Should it be this way?

Also, the behaviour of the component does not match a regular textarea

Steps to reproduce
Write in a TextAreaInput until you see a horizontal scroll bar (HTML textarea breaks the line when you reach the end of the box). Try to break the line (Enter key). Nothing happens.

Insert an image/gif

AutoComplete: Storybook

Description
The variables which aren't exported are visible in HTML of the story document.
Resulting in empty in dropdown options instead of test 1,2,3...

Steps to reproduce
Go to https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage/master/?path=/docs/forms-inputs-autocomplete--example

Insert an image/gif

Check IE11 compatibility

provide rules to use flex

TopBar

Pagination - Mobile

too small

Button + Icon: Check align

Sidebar

Modal

Select, SelectFiltered: Can't select same option

Description
If you try and select the option that is already selected, it doesn't work

Steps to reproduce
Open select, Select an option, Open it again, Select same option.

Insert an image/gif

Scrollbar

https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react

Position children as a render prop

Describe the behavior

Insert an image

MultiSelect UI/UX issues

Description:

The new roles dropdown has some weird UI/UX.

Steps to reproduce:

1. Type in a new role
2. Click the role

Expected behavior:

The text you have typed should go away and hitting X should dismiss the dropdowns.

Actual behavior:

Server Setup Information:

• Version of Rocket.Chat Server: 3.3.0 a9872957180059094e50678ec311b2fcef8f61ad

Edit profile status buttons could use some padding

Edit profile status buttons could use some padding

Select, SelectFiltered, MultiSelect, MultiSelectFiltered: Laggy scroll

Description
When scrolling, the options lag behind the select

Steps to reproduce
Open the select, scroll the page

Insert an image/gif

Documentation on Usage

Add documentation of the different components and how to use in README.md

Tag: Padding

Padding block for Tag, should be 0 instead of 2px... :/

TextInput: does not "accept" margin properly

<TextInput mi='x18' placeholder={searchPlaceholder} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />

Insert an image/gif

readme.md: Homepage link is 404

Description
Readme.md in this repo contains link homepage:
https://rocket.chat/Rocket.Chat.Fuselage
But it returns 404

Steps to reproduce

1. Open repo's main page with readme.
2. Click to Homepage link

Insert an image/gif

Pagination

use ... to large ranges

Tabs

Expand collapse IE11

https://open.rocket.chat/channel/support?msg=uM7f27Hn6Gye3FjcN

hi, we arwe observing in IE 11, the administation menu, expand/collapse icon is not working

useLocalStorage and useSessionStorage

Define CI Tests

Define lint rules

Form fields and buttons focus

We need a definition of how buttons, checkboxes, radio buttons, text fields, etc. should react to focus. Browser's default outline doesn't have well for custom elements.

TableView

Auto publish storybook to github pages

sync the github pages every time we merge something on master.
should we create subfolders for special branches?

Visual Regression Tests

apply and install https://loki.js.org/getting-started.html

SelectFiltered: Wrong keyboard navigation

Description
Choosing an option with the arrow keys selects the wrong one when filter is applied.

Steps to reproduce
Open select, filter results, select option with keyboard and press enter.

Insert an image/gif

Tabs: Wrong height

Description

Steps to reproduce

Insert an image/gif

AnimatedVisibility children as a render prop

Describe the behavior

Insert an image

TagsInput

Form and subcomponents

• Form
• FormItem
• FormLabel
• State and validation

Popover

SelectFiltered: Blank text input

Description
When an element is selected, the text input inside the SelectFiltered loses the placeholder (opacity:0) but is still inside the Select, appearing to be a massive white space.

Steps to reproduce
Select an option on a 'SelectFiltered' component

Insert an image/gif

Icons package

Grid

• Grid container
• Grid item
• Breakpoints

Box text transform

Button

Select looks weird without placeholder or value

The arrow should be fixed at the end direction (right in LTR), which is not the case as shown below: