fix(fuselage): update optionTitle component styles (#790)

Co-authored-by: Douglas Fabris <[email protected]>

README.md

@@ -26,6 +26,7 @@
 | 📦 [`@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/icons)                 | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Ffuselage-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/icons)                 | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square)                 |
 | 📦 [`@rocket.chat/icons`](/packages/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/david/RocketChat/fuselage?path=packages%2Ficons&style=flat-square)                           |
+| 📦 [`@rocket.chat/layout`](/packages/layout)                                                   | layout                                                                       | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons)                          | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Flayout&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/icons)                            | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Flogo&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/icons)                            | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fmemo&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/icons)                  | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fmessage-parser&style=flat-square)                  |

packages/fuselage/src/components/Dropdown/Dropdown.stories.tsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 
 import { Box } from '..';
 import { IconButton } from '../Button';
-import Option from '../Options/Option/Option';
+import Option from '../Option';
 import { Dropdown } from './Dropdown';
 
 export default {

packages/fuselage/src/components/Dropdown/DropdownDesktop.tsx

@@ -32,7 +32,7 @@ export const DropdownDesktop = forwardRef(function DropdownDesktop<
       flexDirection='column'
       overflow='auto'
     >
-      <Box flexShrink={1} pb='x16'>
+      <Box flexShrink={1} pb='x12'>
         {children}
       </Box>
     </Tile>

packages/fuselage/src/components/MultiSelect/MultiSelect.tsx

@@ -20,7 +20,8 @@ import Box from '../Box';
 import Flex from '../Flex';
 import { Icon } from '../Icon';
 import Margins from '../Margins';
-import { Options, CheckOption, useCursor } from '../Options';
+import { CheckOption } from '../Option';
+import { Options, useCursor } from '../Options';
 import Position from '../Position';
 import SelectAddon from '../Select/SelectAddon';
 import MultiSelectAnchor from './MultiSelectAnchor';

packages/fuselage/src/components/Options/Option/Option.stories.tsx → packages/fuselage/src/components/Option/Option.stories.tsx

@@ -10,8 +10,8 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { Box, Menu, StatusBullet } from '../..';
-import { exampleAvatar, menuOptions } from '../../../../.storybook/helpers.js';
-import { Avatar } from '../../Avatar';
+import { exampleAvatar, menuOptions } from '../../../.storybook/helpers.js';
+import { Avatar } from '../Avatar';
 import Option from './Option';
 import OptionAvatar from './OptionAvatar';
 import OptionColumn from './OptionColumn';
@@ -22,7 +22,7 @@ import OptionMenu from './OptionMenu';
 import OptionSkeleton from './OptionSkeleton';
 
 export default {
-  title: 'Navigation/Options/Option',
+  title: 'Navigation/Option',
   component: Option,
   parameters: {
     docs: {

packages/fuselage/src/components/Option/Option.styles.scss

@@ -0,0 +1,128 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+$variants: (
+  'success': colors.success(700),
+  'danger': colors.danger(700),
+  'warning': colors.warning(700),
+  'primary': colors.primary(700),
+);
+
+%column {
+  flex: 0 0 auto;
+
+  margin-inline: lengths.margin(2);
+}
+
+.rcx-option {
+  @include clickable;
+  @include typography.use-font-scale(p2);
+
+  padding: lengths.padding(4) lengths.padding(16);
+
+  list-style: none;
+
+  color: colors.font(default);
+
+  &__title {
+    @include typography.use-font-scale(c1);
+
+    padding-block-start: lengths.padding(8);
+    padding-block-end: lengths.padding(4);
+    padding-inline: lengths.padding(16);
+
+    color: colors.font(default);
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+
+    margin-inline: lengths.margin(-2);
+  }
+
+  &__icon {
+    color: inherit;
+  }
+
+  &__avatar {
+    @extend %column;
+  }
+
+  &__content {
+    @include typography.use-text-ellipsis;
+    @extend %column;
+    flex: 1 1 100%;
+
+    text-align: start;
+
+    white-space: nowrap;
+  }
+
+  &__header {
+    @include typography.use-font-scale(micro);
+
+    padding-block: lengths.padding(8);
+    padding-inline: lengths.padding(16);
+
+    text-transform: uppercase;
+
+    font-weight: 400;
+  }
+
+  &__menu-wrapper {
+    flex-shrink: 0;
+
+    width: 0;
+
+    height: 100%;
+
+    opacity: 0;
+  }
+
+  .rcx-option__column {
+    @extend %column;
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    min-width: lengths.size(20);
+    min-height: lengths.size(20);
+  }
+
+  .rcx-option__description {
+    @include typography.use-font-scale(p2);
+    @extend %column;
+    display: inline;
+
+    color: colors.font(secondary-info);
+  }
+
+  &:hover,
+  &--focus {
+    background: colors.neutral(100);
+  }
+
+  &--selected {
+    background: colors.neutral(500);
+  }
+
+  &:hover &__menu-wrapper,
+  &.focus-within &__menu-wrapper,
+  &:focus-within &__menu-wrapper {
+    display: flex;
+    align-items: center;
+
+    width: lengths.size(28);
+
+    opacity: 1;
+  }
+
+  @each $name, $color in $variants {
+    &--#{$name} {
+      color: theme('option-color-variant-#{$name}', $color);
+    }
+  }
+}

packages/fuselage/src/components/Options/Option/Option.tsx → packages/fuselage/src/components/Option/Option.tsx

@@ -2,7 +2,7 @@ import type { Ref, ComponentProps, ReactNode, MouseEvent } from 'react';
 import React, { memo } from 'react';
 
 import type { Icon } from '../..';
-import type Box from '../../Box';
+import type Box from '../Box';
 import OptionAvatar from './OptionAvatar';
 import OptionContent from './OptionContent';
 import OptionIcon from './OptionIcon';

packages/fuselage/src/components/Options/Option/OptionIcon.tsx → packages/fuselage/src/components/Option/OptionIcon.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
-import { Icon } from '../../Icon';
+import { Icon } from '../Icon';
 import OptionColumn from './OptionColumn';
 
 type OptionIconProps = {

packages/fuselage/src/components/Options/Option/OptionSkeleton.tsx → packages/fuselage/src/components/Option/OptionSkeleton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Skeleton } from '../../Skeleton';
+import { Skeleton } from '../Skeleton';
 import Option from './Option';
 import OptionAvatar from './OptionAvatar';
 import OptionContent from './OptionContent';

packages/fuselage/src/components/Options/Option/index.tsx → packages/fuselage/src/components/Option/index.tsx

@@ -29,6 +29,7 @@ export default Object.assign(Option, {
   Content: OptionContent,
 });
 
+export * from './CheckOption';
 export { OptionAvatar };
 export { OptionColumn };
 export { OptionContent };

packages/fuselage/src/components/Options/Options.stories.tsx

@@ -12,8 +12,8 @@ import type { OptionType } from '.';
 import { Options } from '.';
 import type { Menu } from '..';
 import { Box } from '..';
-import { CheckOption } from './CheckOption';
-import Option from './Option';
+import Option from '../Option';
+import { CheckOption } from '../Option/CheckOption';
 
 const options: OptionType[] = [
   [1, 'a teste 1'],

packages/fuselage/src/components/Options/Options.styles.scss

@@ -1,131 +1,3 @@
-@use '../../styles/colors.scss';
-@use '../../styles/lengths.scss';
-@use '../../styles/typography.scss';
-
-$variants: (
-  'success': colors.success(700),
-  'danger': colors.danger(700),
-  'warning': colors.warning(700),
-  'primary': colors.primary(700),
-);
-
-%column {
-  flex: 0 0 auto;
-
-  margin-inline: lengths.margin(2);
-}
-
-.rcx-option {
-  @include clickable;
-  @include typography.use-font-scale(p2);
-
-  padding: lengths.padding(4) lengths.padding(16);
-
-  list-style: none;
-
-  color: colors.font(default);
-
-  &__title {
-    @include typography.use-font-scale(c1);
-
-    padding-block-end: lengths.padding(8);
-    padding-inline: lengths.padding(16);
-
-    color: colors.font(default);
-  }
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-
-    margin-inline: lengths.margin(-2);
-  }
-
-  &__icon {
-    color: inherit;
-  }
-
-  &__avatar {
-    @extend %column;
-  }
-
-  &__content {
-    @include typography.use-text-ellipsis;
-    @extend %column;
-    flex: 1 1 100%;
-
-    text-align: start;
-
-    white-space: nowrap;
-  }
-
-  &__header {
-    @include typography.use-font-scale(micro);
-
-    padding-block: lengths.padding(8);
-    padding-inline: lengths.padding(16);
-
-    text-transform: uppercase;
-
-    font-weight: 400;
-  }
-
-  &__menu-wrapper {
-    flex-shrink: 0;
-
-    width: 0;
-
-    height: 100%;
-
-    opacity: 0;
-  }
-
-  .rcx-option__column {
-    @extend %column;
-    display: flex;
-
-    justify-content: center;
-    align-items: center;
-
-    min-width: lengths.size(20);
-    min-height: lengths.size(20);
-  }
-
-  .rcx-option__description {
-    @include typography.use-font-scale(p2);
-    @extend %column;
-    display: inline;
-
-    color: colors.font(secondary-info);
-  }
-
-  &:hover,
-  &--focus {
-    background: colors.neutral(100);
-  }
-
-  &--selected {
-    background: colors.neutral(500);
-  }
-
-  &:hover &__menu-wrapper,
-  &.focus-within &__menu-wrapper,
-  &:focus-within &__menu-wrapper {
-    display: flex;
-    align-items: center;
-
-    width: lengths.size(28);
-
-    opacity: 1;
-  }
-
-  @each $name, $color in $variants {
-    &--#{$name} {
-      color: theme('option-color-variant-#{$name}', $color);
-    }
-  }
-}
-
 .rcx-options {
   &:hover {
     .rcx-option--focus:not(.rcx-option--selected):not(:hover) {

packages/fuselage/src/components/Options/Options.tsx

@@ -14,9 +14,9 @@ import React, {
 } from 'react';
 
 import Box from '../Box';
+import Option, { OptionHeader, OptionDivider } from '../Option';
 import Scrollable from '../Scrollable';
 import Tile from '../Tile';
-import Option, { OptionHeader, OptionDivider } from './Option';
 import { useCursor } from './useCursor';
 
 export { useCursor };

packages/fuselage/src/components/Options/index.ts

@@ -2,7 +2,6 @@ import type { AvatarProps } from '../Avatar';
 import { Options } from './Options';
 
 export * from './Options';
-export * from './CheckOption';
 
 const avatarSize: AvatarProps['size'] = 'x20';
 

packages/fuselage/src/components/OptionsPaginated/OptionsPaginated.stories.tsx

@@ -5,7 +5,7 @@ import React, { createRef } from 'react';
 
 import { OptionsPaginated, CheckOption } from '.';
 import { Box } from '..';
-import Option from '../Options/Option/Option';
+import Option from '../Option';
 // ComponentProps<typeof Option.Icon>['name']
 const options: ComponentProps<typeof OptionsPaginated>['options'] = Array.from({
   length: 90,

packages/fuselage/src/components/OptionsPaginated/OptionsPaginated.tsx

@@ -9,7 +9,7 @@ import { Virtuoso } from 'react-virtuoso';
 import AnimatedVisibility from '../AnimatedVisibility';
 import Box from '../Box';
 import { CheckBox } from '../CheckBox';
-import Option from '../Options/Option';
+import Option from '../Option';
 import Tile from '../Tile';
 
 const prevent = (e: SyntheticEvent) => {