Skip to content

Commit 3a2cbb3

Browse files
guijun13dougfabris
guijun13
and
dougfabris
authored
fix(fuselage): update optionTitle component styles (#790)
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
1 parent 5a52dc6 commit 3a2cbb3

30 files changed

+151
-149
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
| 📦 [`@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) |
2727
| 📦 [`@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) |
2828
| 📦 [`@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) |
29+
| 📦 [`@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) |
2930
| 📦 [`@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) |
3031
| 📦 [`@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) |
3132
| 📦 [`@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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
33

44
import { Box } from '..';
55
import { IconButton } from '../Button';
6-
import Option from '../Options/Option/Option';
6+
import Option from '../Option';
77
import { Dropdown } from './Dropdown';
88

99
export default {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const DropdownDesktop = forwardRef(function DropdownDesktop<
3232
flexDirection='column'
3333
overflow='auto'
3434
>
35-
<Box flexShrink={1} pb='x16'>
35+
<Box flexShrink={1} pb='x12'>
3636
{children}
3737
</Box>
3838
</Tile>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import Box from '../Box';
2020
import Flex from '../Flex';
2121
import { Icon } from '../Icon';
2222
import Margins from '../Margins';
23-
import { Options, CheckOption, useCursor } from '../Options';
23+
import { CheckOption } from '../Option';
24+
import { Options, useCursor } from '../Options';
2425
import Position from '../Position';
2526
import SelectAddon from '../Select/SelectAddon';
2627
import MultiSelectAnchor from './MultiSelectAnchor';

‎packages/fuselage/src/components/Options/CheckOption.tsx ‎packages/fuselage/src/components/Option/CheckOption.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/Option.spec.tsx ‎packages/fuselage/src/components/Option/Option.spec.tsx

File renamed without changes.

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
1010
import React from 'react';
1111

1212
import { Box, Menu, StatusBullet } from '../..';
13-
import { exampleAvatar, menuOptions } from '../../../../.storybook/helpers.js';
14-
import { Avatar } from '../../Avatar';
13+
import { exampleAvatar, menuOptions } from '../../../.storybook/helpers.js';
14+
import { Avatar } from '../Avatar';
1515
import Option from './Option';
1616
import OptionAvatar from './OptionAvatar';
1717
import OptionColumn from './OptionColumn';
@@ -22,7 +22,7 @@ import OptionMenu from './OptionMenu';
2222
import OptionSkeleton from './OptionSkeleton';
2323

2424
export default {
25-
title: 'Navigation/Options/Option',
25+
title: 'Navigation/Option',
2626
component: Option,
2727
parameters: {
2828
docs: {

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

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@use '../../styles/colors.scss';
2+
@use '../../styles/lengths.scss';
3+
@use '../../styles/typography.scss';
4+
5+
$variants: (
6+
'success': colors.success(700),
7+
'danger': colors.danger(700),
8+
'warning': colors.warning(700),
9+
'primary': colors.primary(700),
10+
);
11+
12+
%column {
13+
flex: 0 0 auto;
14+
15+
margin-inline: lengths.margin(2);
16+
}
17+
18+
.rcx-option {
19+
@include clickable;
20+
@include typography.use-font-scale(p2);
21+
22+
padding: lengths.padding(4) lengths.padding(16);
23+
24+
list-style: none;
25+
26+
color: colors.font(default);
27+
28+
&__title {
29+
@include typography.use-font-scale(c1);
30+
31+
padding-block-start: lengths.padding(8);
32+
padding-block-end: lengths.padding(4);
33+
padding-inline: lengths.padding(16);
34+
35+
color: colors.font(default);
36+
}
37+
38+
&__wrapper {
39+
display: flex;
40+
align-items: center;
41+
42+
margin-inline: lengths.margin(-2);
43+
}
44+
45+
&__icon {
46+
color: inherit;
47+
}
48+
49+
&__avatar {
50+
@extend %column;
51+
}
52+
53+
&__content {
54+
@include typography.use-text-ellipsis;
55+
@extend %column;
56+
flex: 1 1 100%;
57+
58+
text-align: start;
59+
60+
white-space: nowrap;
61+
}
62+
63+
&__header {
64+
@include typography.use-font-scale(micro);
65+
66+
padding-block: lengths.padding(8);
67+
padding-inline: lengths.padding(16);
68+
69+
text-transform: uppercase;
70+
71+
font-weight: 400;
72+
}
73+
74+
&__menu-wrapper {
75+
flex-shrink: 0;
76+
77+
width: 0;
78+
79+
height: 100%;
80+
81+
opacity: 0;
82+
}
83+
84+
.rcx-option__column {
85+
@extend %column;
86+
display: flex;
87+
88+
justify-content: center;
89+
align-items: center;
90+
91+
min-width: lengths.size(20);
92+
min-height: lengths.size(20);
93+
}
94+
95+
.rcx-option__description {
96+
@include typography.use-font-scale(p2);
97+
@extend %column;
98+
display: inline;
99+
100+
color: colors.font(secondary-info);
101+
}
102+
103+
&:hover,
104+
&--focus {
105+
background: colors.neutral(100);
106+
}
107+
108+
&--selected {
109+
background: colors.neutral(500);
110+
}
111+
112+
&:hover &__menu-wrapper,
113+
&.focus-within &__menu-wrapper,
114+
&:focus-within &__menu-wrapper {
115+
display: flex;
116+
align-items: center;
117+
118+
width: lengths.size(28);
119+
120+
opacity: 1;
121+
}
122+
123+
@each $name, $color in $variants {
124+
&--#{$name} {
125+
color: theme('option-color-variant-#{$name}', $color);
126+
}
127+
}
128+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Ref, ComponentProps, ReactNode, MouseEvent } from 'react';
22
import React, { memo } from 'react';
33

44
import type { Icon } from '../..';
5-
import type Box from '../../Box';
5+
import type Box from '../Box';
66
import OptionAvatar from './OptionAvatar';
77
import OptionContent from './OptionContent';
88
import OptionIcon from './OptionIcon';

‎packages/fuselage/src/components/Options/Option/OptionAvatar.tsx ‎packages/fuselage/src/components/Option/OptionAvatar.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/OptionColumn.tsx ‎packages/fuselage/src/components/Option/OptionColumn.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/OptionContent.tsx ‎packages/fuselage/src/components/Option/OptionContent.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/OptionDescription.tsx ‎packages/fuselage/src/components/Option/OptionDescription.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/OptionDivider.tsx ‎packages/fuselage/src/components/Option/OptionDivider.tsx

File renamed without changes.

‎packages/fuselage/src/components/Options/Option/OptionHeader.tsx ‎packages/fuselage/src/components/Option/OptionHeader.tsx

File renamed without changes.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ComponentProps } from 'react';
22
import React from 'react';
33

4-
import { Icon } from '../../Icon';
4+
import { Icon } from '../Icon';
55
import OptionColumn from './OptionColumn';
66

77
type OptionIconProps = {

‎packages/fuselage/src/components/Options/Option/OptionMenu.tsx ‎packages/fuselage/src/components/Option/OptionMenu.tsx

File renamed without changes.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { Skeleton } from '../../Skeleton';
3+
import { Skeleton } from '../Skeleton';
44
import Option from './Option';
55
import OptionAvatar from './OptionAvatar';
66
import OptionContent from './OptionContent';

‎packages/fuselage/src/components/Options/Option/OptionTitle.tsx ‎packages/fuselage/src/components/Option/OptionTitle.tsx

File renamed without changes.

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

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default Object.assign(Option, {
2929
Content: OptionContent,
3030
});
3131

32+
export * from './CheckOption';
3233
export { OptionAvatar };
3334
export { OptionColumn };
3435
export { OptionContent };

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import type { OptionType } from '.';
1212
import { Options } from '.';
1313
import type { Menu } from '..';
1414
import { Box } from '..';
15-
import { CheckOption } from './CheckOption';
16-
import Option from './Option';
15+
import Option from '../Option';
16+
import { CheckOption } from '../Option/CheckOption';
1717

1818
const options: OptionType[] = [
1919
[1, 'a teste 1'],

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

-128
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,3 @@
1-
@use '../../styles/colors.scss';
2-
@use '../../styles/lengths.scss';
3-
@use '../../styles/typography.scss';
4-
5-
$variants: (
6-
'success': colors.success(700),
7-
'danger': colors.danger(700),
8-
'warning': colors.warning(700),
9-
'primary': colors.primary(700),
10-
);
11-
12-
%column {
13-
flex: 0 0 auto;
14-
15-
margin-inline: lengths.margin(2);
16-
}
17-
18-
.rcx-option {
19-
@include clickable;
20-
@include typography.use-font-scale(p2);
21-
22-
padding: lengths.padding(4) lengths.padding(16);
23-
24-
list-style: none;
25-
26-
color: colors.font(default);
27-
28-
&__title {
29-
@include typography.use-font-scale(c1);
30-
31-
padding-block-end: lengths.padding(8);
32-
padding-inline: lengths.padding(16);
33-
34-
color: colors.font(default);
35-
}
36-
37-
&__wrapper {
38-
display: flex;
39-
align-items: center;
40-
41-
margin-inline: lengths.margin(-2);
42-
}
43-
44-
&__icon {
45-
color: inherit;
46-
}
47-
48-
&__avatar {
49-
@extend %column;
50-
}
51-
52-
&__content {
53-
@include typography.use-text-ellipsis;
54-
@extend %column;
55-
flex: 1 1 100%;
56-
57-
text-align: start;
58-
59-
white-space: nowrap;
60-
}
61-
62-
&__header {
63-
@include typography.use-font-scale(micro);
64-
65-
padding-block: lengths.padding(8);
66-
padding-inline: lengths.padding(16);
67-
68-
text-transform: uppercase;
69-
70-
font-weight: 400;
71-
}
72-
73-
&__menu-wrapper {
74-
flex-shrink: 0;
75-
76-
width: 0;
77-
78-
height: 100%;
79-
80-
opacity: 0;
81-
}
82-
83-
.rcx-option__column {
84-
@extend %column;
85-
display: flex;
86-
87-
justify-content: center;
88-
align-items: center;
89-
90-
min-width: lengths.size(20);
91-
min-height: lengths.size(20);
92-
}
93-
94-
.rcx-option__description {
95-
@include typography.use-font-scale(p2);
96-
@extend %column;
97-
display: inline;
98-
99-
color: colors.font(secondary-info);
100-
}
101-
102-
&:hover,
103-
&--focus {
104-
background: colors.neutral(100);
105-
}
106-
107-
&--selected {
108-
background: colors.neutral(500);
109-
}
110-
111-
&:hover &__menu-wrapper,
112-
&.focus-within &__menu-wrapper,
113-
&:focus-within &__menu-wrapper {
114-
display: flex;
115-
align-items: center;
116-
117-
width: lengths.size(28);
118-
119-
opacity: 1;
120-
}
121-
122-
@each $name, $color in $variants {
123-
&--#{$name} {
124-
color: theme('option-color-variant-#{$name}', $color);
125-
}
126-
}
127-
}
128-
1291
.rcx-options {
1302
&:hover {
1313
.rcx-option--focus:not(.rcx-option--selected):not(:hover) {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import React, {
1414
} from 'react';
1515

1616
import Box from '../Box';
17+
import Option, { OptionHeader, OptionDivider } from '../Option';
1718
import Scrollable from '../Scrollable';
1819
import Tile from '../Tile';
19-
import Option, { OptionHeader, OptionDivider } from './Option';
2020
import { useCursor } from './useCursor';
2121

2222
export { useCursor };

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

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { AvatarProps } from '../Avatar';
22
import { Options } from './Options';
33

44
export * from './Options';
5-
export * from './CheckOption';
65

76
const avatarSize: AvatarProps['size'] = 'x20';
87

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, { createRef } from 'react';
55

66
import { OptionsPaginated, CheckOption } from '.';
77
import { Box } from '..';
8-
import Option from '../Options/Option/Option';
8+
import Option from '../Option';
99
// ComponentProps<typeof Option.Icon>['name']
1010
const options: ComponentProps<typeof OptionsPaginated>['options'] = Array.from({
1111
length: 90,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Virtuoso } from 'react-virtuoso';
99
import AnimatedVisibility from '../AnimatedVisibility';
1010
import Box from '../Box';
1111
import { CheckBox } from '../CheckBox';
12-
import Option from '../Options/Option';
12+
import Option from '../Option';
1313
import Tile from '../Tile';
1414

1515
const prevent = (e: SyntheticEvent) => {

0 commit comments

Comments
 (0)