rocketchat/fuselage

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

fuselage's Issues

Pagination

use ... to large ranges

Define lint rules

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

Button + Icon: Check align

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

Edit profile status buttons could use some padding

Edit profile status buttons could use some padding

Auto publish storybook to github pages

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

Tabs: Wrong height

Description

Steps to reproduce

Insert an image/gif

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.

Modal

Popover

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

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

useLocalStorage and useSessionStorage

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:

Documentation on Usage

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

Sidebar

livechat -> omnichannel icon

🤷

FilterDropdown

Docs and types

provide a good way to document and export component types

Pagination - Mobile

too small

TableView

Scrollbar

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

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

Visual Regression Tests

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

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

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

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

Define CI Tests

Onboarding plugin

Describe the behavior

Insert an image

TextInput

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

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

Position children as a render prop

Describe the behavior

Insert an image

Tag: Padding

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

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.

Tags and Badges states

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

Form and subcomponents

• Form
• FormItem
• FormLabel
• State and validation

Grid

• Grid container
• Grid item
• Breakpoints

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

Button

AnimatedVisibility children as a render prop

Describe the behavior

Insert an image

TopBar

TagsInput

Multiselect: wrap and oveflow

Description

expected

current

Steps to reproduce

Insert an image/gif

Tabs

Check IE11 compatibility

provide rules to use flex

Icons package

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

Box text transform