feat(fuselage): New paginated Selects/Options #447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

tiagoevanp merged 12 commits into develop from new-paginated-selects

May 18, 2021

...uselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Default.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...selage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../.loki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_No_Placeholder.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

.../reference/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ce/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

..._iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered_disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered_error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect_Disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ence/chrome_iphone7_Forms_Inputs_SelectPaginated_PaginatedMultiSelect_Error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ki/reference/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ce/chrome_iphone7_Forms_Inputs_SelectPaginated_Select_with_filter_and_error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ge/.loki/reference/chrome_iphone7_Misc_Options_OptionsPaginated_CheckOption.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...selage/.loki/reference/chrome_iphone7_Misc_Options_OptionsPaginated_Default.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...uselage/.loki/reference/chrome_iphone7_Misc_Options_OptionsPaginated_Option.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Default.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...uselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...s/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e/.loki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_No_Placeholder.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...i/reference/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...nce/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...e_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered_disabled.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...rome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelectFiltered_error.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

...ce/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect_Disabled.png

...rence/chrome_laptop_Forms_Inputs_SelectPaginated_PaginatedMultiSelect_Error.png

...oki/reference/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter.png

.../chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_disabled.png

.../chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_ellipses.png

...nce/chrome_laptop_Forms_Inputs_SelectPaginated_Select_with_filter_and_error.png

...age/.loki/reference/chrome_laptop_Misc_Options_OptionsPaginated_CheckOption.png

...uselage/.loki/reference/chrome_laptop_Misc_Options_OptionsPaginated_Default.png

...fuselage/.loki/reference/chrome_laptop_Misc_Options_OptionsPaginated_Option.png

packages/fuselage/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,8 @@ @@
         "@rocket.chat/fuselage-polyfills": "*",
         "@rocket.chat/icons": "*",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-virtuoso": "1.2.4"
       },
       "dependencies": {
         "@rocket.chat/css-in-js": "^0.24.0",
@@ Expand Down Expand Up / @@ -115,6 +116,7 @@ @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-live": "^2.2.3",
+        "react-virtuoso": "1.2.4",
         "rimraf": "^3.0.2",
         "sass": "^1.32.12",
         "sass-loader": "^11.0.1",
@@ Expand Down @@

packages/fuselage/src/components/OptionsPaginated/Option/Option.stories.mdx

-Original file line number
+Diff line change
@@ -0,0 +1,154 @@
+    import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
+    import LinkTo from '@storybook/addon-links/react';
+    import { Option } from '.';
+    import { Box, Avatar, Menu, StatusBullet } from '../..';
+    import { exampleAvatar, menuOptions } from '../../../../.storybook/helpers.js';
+    <Meta title='Misc/Options/Option' parameters={{ jest: ['Option/spec'] }} />
+    # Option
+    The generic <LinkTo kind='Misc/Options/Option' story='Default'>`Option`</LinkTo> item of options. Can be freely used or inside the <LinkTo kind='Misc/Options/Options' story='Default'>`Options`</LinkTo> as well.
+    <Canvas>
+      <Story name='Default'>
+        <Box position='relative' maxWidth={250}>
+          <Option>
+            <Option.Content>Lorem Ipsum Lorem</Option.Content>
+          </Option>
+          <Option>
+            <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+          </Option>
+          <Option>
+            <Option.Content>Lorem Ipsum Lorem <Option.Description>Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Description></Option.Content>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## With avatar
+    <Canvas>
+      <Story name='withAvatar'>
+        <Box position='relative' maxWidth={250}>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Content>Lorem Ipsum Lorem</Option.Content>
+          </Option>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+          </Option>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Content>Lorem Ipsum Lorem <Option.Description>Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Description></Option.Content>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## With presence
+    <Canvas>
+      <Story name='withPresence'>
+        <Box position='relative' maxWidth={250}>
+          <Option>
+            <Option.Column><StatusBullet /></Option.Column>
+            <Option.Content>Lorem Ipsum Lorem</Option.Content>
+          </Option>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Column><StatusBullet /></Option.Column>
+            <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## With menu
+    <Canvas>
+      <Story name='withMenu'>
+        <Box position='relative' maxWidth={250}>
+          <Option>
+            <Option.Content>Lorem Ipsum Lorem</Option.Content>
+            <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+          </Option>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Column><StatusBullet /></Option.Column>
+            <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+            <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## With Icon
+    <Canvas>
+      <Story name='withIcon'>
+        <Box position='relative' maxWidth={250}>
+          <Option>
+            <Option.Icon name='bell'/>
+            <Option.Content>Lorem Ipsum Lorem</Option.Content>
+            <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+          </Option>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Icon name='bell'/>
+            <Option.Column><StatusBullet /></Option.Column>
+            <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+            <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## As UserItem
+    <Canvas>
+      <Story name='asUserItem'>
+        <Box maxWidth={330}>
+          <Option>
+            <Option.Avatar>
+              <Avatar url={exampleAvatar} size='x28' />
+            </Option.Avatar>
+            <Option.Column><StatusBullet status='online' /></Option.Column>
+            <Option.Content>
+              <Box withTruncatedText fontScale='p1'>carla.culhane <Box is='span' color='neutral-500'>(carla hune)</Box></Box>
+            </Option.Content>
+            <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+          </Option>
+        </Box>
+      </Story>
+    </Canvas>
+    ## As Skeleton
+    <Canvas>
+      <Story name='Skeleton'>
+        <Box position='relative' maxWidth={330}>
+          <Option.Skeleton />
+        </Box>
+      </Story>
+    </Canvas>
+    <ArgsTable of={Option} />

packages/fuselage/src/components/OptionsPaginated/Option/index.js

-Original file line number
+Diff line change
@@ -0,0 +1,85 @@
+    import React from 'react';
+    import { Icon } from '../../Icon';
+    import { Skeleton } from '../../Skeleton';
+    const OptionColumn = (props) => (
+      <div className='rcx-option__column' {...props} />
+    );
+    const OptionContent = (props) => (
+      <div className='rcx-option__content' {...props} />
+    );
+    const OptionAvatar = (props) => (
+      <div className='rcx-option__avatar' {...props} />
+    );
+    const OptionDescription = (props) => (
+      <div className='rcx-option__description' {...props} />
+    );
+    const OptionIcon = ({ name }) => (
+      <OptionColumn>
+        <Icon size='x20' name={name} />
+      </OptionColumn>
+    );
+    const OptionSkeleton = (props) => (
+      <Option {...props}>
+        <Option.Avatar>
+          <Skeleton variant='rect' width={28} height={28} />
+        </Option.Avatar>
+        <Option.Content>
+          <Skeleton width='100%' />
+        </Option.Content>
+      </Option>
+    );
+    export const OptionMenu = (props) => (
+      <div className='rcx-box--animated rcx-option__menu-wraper' {...props} />
+    );
+    export const Option = React.memo(
+      ({
+        is: Tag = 'li',
+        id,
+        presence,
+        children,
+        label,
+        focus,
+        selected,
+        className,
+        ref,
+        icon,
+        avatar,
+        ...options
+      }) => (
+        <Tag
+          key={id}
+          id={id}
+          ref={ref}
+          aria-selected={selected}
+          {...options}
+          className={[
+            'rcx-option',
+            className,
+            focus && 'rcx-option--focus',
+            selected && 'rcx-option--selected',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <div className='rcx-option__wrapper'>
+            {avatar && <Option.Avatar>{avatar}</Option.Avatar>}
+            {icon && <Option.Icon name={icon} />}
+            {label && <Option.Content>{label}</Option.Content>}
+            {label !== children && children}
+          </div>
+        </Tag>
+      )
+    );
+    Option.Description = OptionDescription;
+    Option.Skeleton = OptionSkeleton;
+    Option.Avatar = OptionAvatar;
+    Option.Menu = OptionMenu;
+    Option.Icon = OptionIcon;
+    Option.Column = OptionColumn;
+    Option.Content = OptionContent;

packages/fuselage/src/components/OptionsPaginated/Option/spec.js

-Original file line number
+Diff line change
@@ -0,0 +1,10 @@
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+    import { Option } from '.';
+    it('Option renders without crashing', () => {
+      const div = document.createElement('div');
+      ReactDOM.render(<Option />, div);
+      ReactDOM.unmountComponentAtNode(div);
+    });