Skip to content
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

Jump to bottom

feat(fuselage): Sidebar theme #923

Merged
merged 14 commits into from
Dec 9, 2022
Merged

feat(fuselage): Sidebar theme #923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
36152ad
Add primitive token N250. Update stroke-extra-light
juliajforesti Nov 29, 2022
962e611
Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat.F…
juliajforesti Nov 30, 2022
5f77b81
Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat.F…
juliajforesti Nov 30, 2022
563daf6
Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat.F…
juliajforesti Dec 1, 2022
97e58de
wip sidebar theme
juliajforesti Dec 1, 2022
7dd10ee
fix selected
juliajforesti Dec 2, 2022
d5f72b5
Remove status-service-3 and add surface-featured
juliajforesti Dec 5, 2022
8494a9e
fix
juliajforesti Dec 5, 2022
cb3cecf
Merge branch 'chore/surface-featured' into feat/sidebar-theme
juliajforesti Dec 6, 2022
5d83d46
fix SidebarDivider
juliajforesti Dec 6, 2022
08ffcb1
adjust sidebar styles
juliajforesti Dec 6, 2022
fb9c7f9
fix sidebar-item-color
juliajforesti Dec 9, 2022
aef7b35
Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat.F…
juliajforesti Dec 9, 2022
09d11da
fix Tag variant
juliajforesti Dec 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion packages/fuselage-tokens/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ module.exports = {
's700': '#19AC7C',
's800': '#148660',
's900': '#106D4F',
's1000': '#0D5940',
's1-100': '#FDE8D7',
's1-200': '#FAD1B0',
's1-300': '#F7B27B',
Expand Down
1 change: 0 additions & 1 deletion packages/fuselage-tokens/colors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
"s700": "#19AC7C",
"s800": "#148660",
"s900": "#106D4F",
"s1000": "#0D5940",
"s1-100": "#FDE8D7",
"s1-200": "#FAD1B0",
"s1-300": "#F7B27B",
Expand Down
1 change: 0 additions & 1 deletion packages/fuselage-tokens/colors.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export default {
's700': '#19AC7C',
's800': '#148660',
's900': '#106D4F',
's1000': '#0D5940',
's1-100': '#FDE8D7',
's1-200': '#FAD1B0',
's1-300': '#F7B27B',
Expand Down
1 change: 0 additions & 1 deletion packages/fuselage-tokens/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ $colors: (
s700: #19ac7c,
s800: #148660,
s900: #106d4f,
s1000: #0d5940,
s1-100: #fde8d7,
s1-200: #fad1b0,
s1-300: #f7b27b,
Expand Down
27 changes: 15 additions & 12 deletions packages/fuselage/src/components/Sidebar/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ComponentProps, ReactNode } from 'react';
import type { AllHTMLAttributes, ComponentProps, ReactNode } from 'react';
import React from 'react';

import type Box from '../Box';
Expand All @@ -9,14 +9,16 @@ type SidebarItemProps = {
selected?: boolean;
highlighted?: boolean;
clickable?: boolean;
featured?: boolean;
is?: ComponentProps<typeof Box>['is'];
children?: ReactNode;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItem = ({
selected,
highlighted,
clickable,
featured,
is: Tag = 'div',
children,
...props
Expand All @@ -27,6 +29,7 @@ export const SidebarItem = ({
highlighted && 'rcx-sidebar-item--highlighted',
clickable && 'rcx-sidebar-item--clickable',
selected && 'rcx-sidebar-item--selected',
featured && 'rcx-sidebar-item--featured',
]
.filter(Boolean)
.join(' ')}
Expand All @@ -41,7 +44,7 @@ export const SidebarItem = ({

type SidebarItemContainerProps = {
children?: ReactNode;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemContainer = (props: SidebarItemContainerProps) => (
<div
Expand All @@ -52,7 +55,7 @@ export const SidebarItemContainer = (props: SidebarItemContainerProps) => (

type SidebarItemMenuProps = {
children?: ReactNode;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemMenu = (props: SidebarItemMenuProps) => (
<div
Expand All @@ -64,7 +67,7 @@ export const SidebarItemMenu = (props: SidebarItemMenuProps) => (
type SidebarItemContentProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemContent = ({
className = '',
Expand All @@ -79,7 +82,7 @@ export const SidebarItemContent = ({
type SidebarItemTitleProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemTitle = ({
className = '',
Expand All @@ -94,7 +97,7 @@ export const SidebarItemTitle = ({
type SidebarItemTimeProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemTime = ({
className,
Expand All @@ -109,7 +112,7 @@ export const SidebarItemTime = ({
type SidebarItemBadgeProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemBadge = ({
className,
Expand All @@ -124,7 +127,7 @@ export const SidebarItemBadge = ({
type SidebarItemSubtitleProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemSubtitle = ({
className,
Expand All @@ -139,7 +142,7 @@ export const SidebarItemSubtitle = ({
type SidebarItemWrapperProps = {
children?: ReactNode;
className?: string;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemWrapper = ({
className = '',
Expand All @@ -156,7 +159,7 @@ type SidebarItemIconProps = {
className?: string;
highlighted?: boolean;
icon: ComponentProps<typeof FuselageIcon>['name'];
};
} & Omit<AllHTMLAttributes<HTMLElement>, 'name' | 'is'>;

export const SidebarItemIcon = ({
highlighted,
Expand All @@ -180,7 +183,7 @@ export const SidebarItemIcon = ({

type SidebarItemAvatarProps = {
children?: ReactNode;
};
} & AllHTMLAttributes<HTMLElement>;

export const SidebarItemAvatar = ({ ...props }: SidebarItemAvatarProps) => (
<SidebarItemContainer>
Expand Down
246 changes: 143 additions & 103 deletions packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx
View file
Open in desktop

Large diffs are not rendered by default.

112 changes: 88 additions & 24 deletions packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,45 @@
@use '../../styles/typography.scss';
@import '../../styles/mixins/all.scss';

$sidebar-header-height: theme(
'sidebar-header-height',
theme('header-height', lengths.size(64))
$sidebar-color-surface-default: theme(
'sidebar-color-surface-default',
colors.surface(tint)
);

$sidebar-section-height: theme(
'sidebar-section-height',
theme('section-height', lengths.size(56))
$sidebar-color-surface-hover: theme(
'sidebar-color-surface-hover',
colors.surface(hover)
);

$sidebar-color-surface-selected: theme(
'sidebar-color-surface-selected',
colors.surface(selected)
);

$sidebar-color-font-primary: theme(
'sidebar-color-font-primary',
colors.font(annotation)
);

$sidebar-color-font-secondary: theme(
'sidebar-color-font-secondary',
colors.font(secondary-info)
);
$sidebar-item-background-color: theme(
'sidebar-item-background-color',
colors.surface(light)

$sidebar-color-stroke-default: theme(
'sidebar-color-stroke-default',
colors.stroke(light)
);

$sidebar-color-stroke-focus: theme(
'sidebar-color-stroke-focus',
colors.stroke(medium)
);
$sidebar-item-color: theme('sidebar-item-color', colors.font(annotation));

$sidebar-item-color: theme('sidebar-item-color', colors.font(secondary-info));
$sidebar-item-color-highlighted: theme(
'sidebar-item-color-highlighted',
colors.font(white, true)
colors.font(pure-white)
);
$sidebar-item-background-color-hover: theme(
'sidebar-item-background-color-hover',
Expand All @@ -42,8 +64,35 @@ $sidebar-item-color-selected: theme(
colors.font(annotation)
);

$sidebar-item-background-color-featured: theme(
'sidebar-item-background-color-featured',
colors.surface(featured)
);
$sidebar-item-color-featured: theme(
'sidebar-item-color-featured',
colors.font(pure-white)
);
$sidebar-item-background-color-featured-hover: theme(
'sidebar-item-background-color-featured-hover',
colors.surface(featured-hover)
);
$sidebar-item-background-color-featured-selected: theme(
'sidebar-item-background-color-featured-selected',
colors.surface(featured-hover)
);

$sidebar-title-color: theme('sidebar-title-color', colors.font(annotation));

$sidebar-header-height: theme(
'sidebar-header-height',
theme('header-height', lengths.size(64))
);

$sidebar-section-height: theme(
'sidebar-section-height',
theme('section-height', lengths.size(56))
);

$sidebar-footer-box-shadow: theme(
'sidebar-footer-box-shadow',
rgba(0, 0, 0, 0.1)
Expand Down Expand Up @@ -74,6 +123,16 @@ $sidebar-footer-highlight-color: theme(
}

.rcx-sidebar {
color: $sidebar-color-font-secondary;
background: $sidebar-color-surface-default;

&--divider {
border-color: theme(
'sidebar-color-stroke-extra-light',
colors.stroke(extra-light)
);
}

&-topbar {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -104,7 +163,7 @@ $sidebar-footer-highlight-color: theme(
&__title {
@include typography.use-font-scale(p2m);

color: $sidebar-title-color;
color: $sidebar-color-font-secondary;
}
}

Expand All @@ -115,7 +174,7 @@ $sidebar-footer-highlight-color: theme(
padding-block: lengths.padding(4);
padding-inline: lengths.padding(16);

color: $sidebar-item-color;
color: $sidebar-color-font-secondary;

&__wrapper {
@extend %sidebar-base;
Expand All @@ -128,26 +187,31 @@ $sidebar-footer-highlight-color: theme(
&--clickable {
@include clickable;

@include on-focus-visible {
color: $sidebar-item-color-hover;
background-color: $sidebar-item-background-color-hover;
}

@include on-hover {
@include use-no-shadow;
color: $sidebar-item-color-hover;
background-color: $sidebar-item-background-color-hover;
// color: $sidebar-item-color-hover;
background-color: $sidebar-color-surface-hover;
}

@include on-focus-visible {
@include use-focus-shadow-inset($sidebar-item-color-focus);
border: 1px solid $sidebar-color-stroke-focus;
// @include use-focus-shadow-inset($sidebar-item-color-focus);
}
}

&:active,
&--selected {
color: $sidebar-item-color-selected;
background-color: $sidebar-item-background-color-selected;
background-color: $sidebar-color-surface-selected;
}

&--featured {
color: $sidebar-item-color-featured;
background-color: $sidebar-item-background-color-featured;

&:hover,
:active {
background-color: $sidebar-item-background-color-featured-hover;
}
}

&__avatar {
Expand Down Expand Up @@ -245,7 +309,7 @@ $sidebar-footer-highlight-color: theme(
@include typography.use-font-scale(c2);
@include typography.use-with-truncated-text();

color: $sidebar-title-color;
color: $sidebar-color-font-secondary;
}

&-section {
Expand Down
7 changes: 7 additions & 0 deletions packages/fuselage/src/components/Sidebar/SidebarDivider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';

import { Divider } from '../Divider';

export const SidebarDivider = () => (
<Divider rcx-sidebar--divider mbs='neg-x2' mbe={0} />
);
10 changes: 4 additions & 6 deletions packages/fuselage/src/components/Sidebar/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { ComponentProps, ReactNode, Ref } from 'react';
import React, { forwardRef } from 'react';

import Box from '../Box';
import { Divider } from '../Divider';
import { SidebarAction, SidebarActions } from './SidebarActions';
import { SidebarDivider } from './SidebarDivider';

const Avatar: { size: 'x24' } = { size: 'x24' };

Expand Down Expand Up @@ -49,7 +49,7 @@ export const TopBarToolBox = ({
{...props}
>
<TopBarWrapper children={children} />
<TopBarDivider />
<SidebarDivider />
</TopBar>
);

Expand All @@ -70,7 +70,7 @@ export const TopBarSection = ({
{...props}
>
<TopBarWrapper children={children} />
<TopBarDivider />
<SidebarDivider />
</TopBar>
);

Expand All @@ -87,8 +87,6 @@ export const TopBarAction = forwardRef(function TopBarAction(
return <SidebarAction ref={ref} {...props} />;
});

export const TopBarDivider = () => <Divider mbs='neg-x2' mbe={0} />;

type TopBarTitleProps = {
children?: ReactNode;
};
Expand All @@ -104,6 +102,6 @@ export default Object.assign(TopBar, {
Avatar: TopBarAvatar,
Actions: TopBarActions,
Action: TopBarAction,
Divider: TopBarDivider,
Divider: SidebarDivider,
Title: TopBarTitle,
});
Loading