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

feat(components): add styled scrollbar (VIV-2214) #2028

Merged
merged 10 commits into from
Nov 27, 2024
Merged

feat(components): add styled scrollbar (VIV-2214) #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
851bc99
scrollbar mixin
rachelbt Nov 21, 2024
ad05098
add to scrollbar mixin
rachelbt Nov 21, 2024
9266def
add scrollbar style to docs
rachelbt Nov 24, 2024
2eb4d06
add scrollbar style to components
rachelbt Nov 24, 2024
f10e5ba
stylelint
rachelbt Nov 24, 2024
79f8c60
Merge branch 'main' into VIV-2214-scrollbar
rachelbt Nov 24, 2024
f869cf1
text-area width change due to scrollbar design
rachelbt Nov 24, 2024
68de112
Merge branch 'main' into VIV-2214-scrollbar
rachelbt Nov 27, 2024
c139213
add vvd-scrollbar class
rachelbt Nov 27, 2024
4e75419
Merge branch 'main' into VIV-2214-scrollbar
rachelbt Nov 27, 2024
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
2 changes: 1 addition & 1 deletion apps/docs/code-example-preview/createCodeExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const createiFrameContent = (code, classList, index) => {
numberWithPx = match ? match[0] : 'auto';
}
const document = `<!DOCTYPE html>
<html class="vvd-root" lang="en-US" style="block-size: ${numberWithPx};">
<html class="vvd-root vvd-scrollbar" lang="en-US" style="block-size: ${numberWithPx};">
<head>
${IFRAME_STYLE}
${IFRAME_INLINE_STYLE}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/_layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="vvd-root">
<html lang="en" class="vvd-root vvd-scrollbar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down
4 changes: 4 additions & 0 deletions apps/docs/content/guides/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ The tokens will be scoped to the `vvd-root` class selector.

The core theme styles will apply the appropriate `color`, `background-color` and `color-scheme` for the chosen theme to the `vvd-root` class selector.

#### Scrollbar

Vivid component has a custom scrollbar. It can be added to the entire app/page by adding the class `vvd-scrollbar` to `:root.`

### Core Typography

**Stylesheet:**
Expand Down
16 changes: 11 additions & 5 deletions libs/components/src/lib/data-grid/data-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

:host {
display: block;
}
Expand All @@ -6,9 +8,13 @@
}

.base {
position: relative;
overflow: auto;
block-size: inherit;
inline-size: 100%;
max-block-size: inherit;
@include scrollbar.scrollbar;

& {
position: relative;
overflow: auto;
block-size: inherit;
inline-size: 100%;
max-block-size: inherit;
}
}
15 changes: 10 additions & 5 deletions libs/components/src/lib/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
border-radius-variables;
@use '../../../../shared/src/lib/sass/mixins/focus' as focus;
@use '../../../../shared/src/lib/sass/mixins/resets' as resets;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

$dialog-space-size: 24px;

Expand Down Expand Up @@ -164,9 +165,13 @@ $dialog-space-size: 24px;
}

slot[name='main'] {
display: block;
overflow: hidden auto;
max-width: inherit;
max-height: inherit;
border-radius: inherit;
@include scrollbar.scrollbar;

& {
display: block;
overflow: hidden auto;
max-width: inherit;
max-height: inherit;
border-radius: inherit;
}
}
18 changes: 11 additions & 7 deletions libs/components/src/lib/popup/popup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@use '../../../../shared/src/lib/sass/mixins/border-radius' as
border-radius-variables;
@use '../../../../shared/src/lib/sass/mixins/resets' as resets;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

:host {
display: var(#{variables.$popup-display}, inline);
Expand All @@ -20,14 +21,17 @@

.popup-wrapper {
@include resets.floating-element-reset;
@include scrollbar.scrollbar;

z-index: var(#{variables.$popup-z-index}, 10);
overflow: visible;
padding: 0;
border: none;
border-radius: #{border-radius-variables.$border-radius-normal};
margin: 0;
inline-size: max-content;
& {
z-index: var(#{variables.$popup-z-index}, 10);
overflow: visible;
padding: 0;
border: none;
border-radius: #{border-radius-variables.$border-radius-normal};
margin: 0;
inline-size: max-content;
}

&:not(.absolute) {
position: fixed;
Expand Down
19 changes: 12 additions & 7 deletions libs/components/src/lib/side-drawer/side-drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use 'sass:map';
@use 'partials/variables' as variables;
@use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
@use '../../../../shared/src/lib/sass/mixins/scrim' as scrim-mixins;

:host {
Expand All @@ -14,13 +15,17 @@
$inline-size: 280px;

.control {
position: fixed;
z-index: 1;
background-color: var(#{constants.$vvd-color-canvas});
color: var(#{constants.$vvd-color-canvas-text});
inline-size: $inline-size;
inset-block: 0;
overflow-y: auto;
@include scrollbar.scrollbar;

& {
position: fixed;
z-index: 1;
background-color: var(#{constants.$vvd-color-canvas});
color: var(#{constants.$vvd-color-canvas-text});
inline-size: $inline-size;
inset-block: 0;
overflow-y: auto;
}

&[part~='vvd-theme-alternate'] {
background-color: var(#{constants.$vvd-color-canvas});
Expand Down
5 changes: 5 additions & 0 deletions libs/components/src/lib/tabs/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
@use '../../../../shared/src/lib/sass/mixins/border-radius' as
border-radius-variables;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

:host {
display: block;
Expand Down Expand Up @@ -145,6 +146,8 @@
}

&-wrapper {
@include scrollbar.scrollbar;

.base:not(.orientation-vertical) & {
overflow: auto hidden;
align-self: end;
Expand Down Expand Up @@ -185,6 +188,8 @@ slot[name='action-items'] {

.base.scroll & {
overflow-y: auto;

@include scrollbar.scrollbar;
}

@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
Expand Down
31 changes: 18 additions & 13 deletions libs/components/src/lib/text-area/text-area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
);
@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
@use '../../../../../dist/libs/tokens/scss/size.variables' as size;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

$low-ink-color: --_low-ink-color;
$outline-width: 2px;
Expand Down Expand Up @@ -67,19 +68,23 @@ $outline-width: 2px;
}

.control {
box-sizing: border-box;
padding: 8px 16px;
border: 0 none;
border-radius: #{border-radius-variables.$border-radius-normal};
appearance: none; /* for box-shadow visibility on IOS */
background-color: var(#{appearance.get-appearance-token(fill)});
box-shadow: inset 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
color: var(#{appearance.get-appearance-token(text)});
font: var(#{constants.$vvd-typography-base});
grid-column: 1 / -1;
min-block-size: #{size.$vvd-size-condensed};
resize: none;
transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
@include scrollbar.scrollbar;

& {
box-sizing: border-box;
padding: 8px 16px;
border: 0 none;
border-radius: #{border-radius-variables.$border-radius-normal};
appearance: none; /* for box-shadow visibility on IOS */
background-color: var(#{appearance.get-appearance-token(fill)});
box-shadow: inset 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
color: var(#{appearance.get-appearance-token(text)});
font: var(#{constants.$vvd-typography-base});
grid-column: 1 / -1;
min-block-size: #{size.$vvd-size-condensed};
resize: none;
transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}

@supports selector(::-webkit-resizer) {
&::-webkit-resizer {
Expand Down
Binary file modified ...b/text-area/ui.test.ts-snapshots/snapshots-text-area-Desktop-Chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions libs/components/src/lib/time-picker/time-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,6 @@
inline-size: $item-inline-size;
list-style: none;

// Make scrollbar appearance less intrusive
scrollbar-width: thin;

// Hide scrollbar when not hovering
&:hover {
overflow-y: auto;
Expand Down
2 changes: 2 additions & 0 deletions libs/shared/src/lib/sass/mixins/scrollbar/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@forward 'variables' show $scrollbar-track-color, $scrollbar-thumb-color;
@forward 'mixins' show scrollbar;
33 changes: 33 additions & 0 deletions libs/shared/src/lib/sass/mixins/scrollbar/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@use 'variables' as variables;
@use '../../../../../../../dist/libs/tokens/scss/tokens.constants' as constants;

@mixin scrollbar {
#{variables.$scrollbar-track-color}: transparent;
#{variables.$scrollbar-thumb-color}: color-mix(
in srgb,
var(#{constants.$vvd-color-neutral-950}),
transparent 70%
);

// * Firefox */
& {
scrollbar-color: var(#{variables.$scrollbar-thumb-color})
var(#{variables.$scrollbar-track-color});
scrollbar-width: thin;
}

// * Chrome, Edge, and Safari */
::-webkit-scrollbar {
width: 4px;
}

::-webkit-scrollbar-track {
background: var(#{variables.$scrollbar-track-color});
}

::-webkit-scrollbar-thumb {
border: 0;
border-radius: 4px;
background-color: var(#{variables.$scrollbar-thumb-color});
}
}
2 changes: 2 additions & 0 deletions libs/shared/src/lib/sass/mixins/scrollbar/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
$scrollbar-track-color: --scrollbar-track-color;
$scrollbar-thumb-color: --scrollbar-thumb-color;
5 changes: 5 additions & 0 deletions libs/styles/src/lib/core/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
@use '../../../../..//dist/libs/tokens/scss/tokens.constants' as constants;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;

.vvd-root {
color-scheme: var(#{constants.$vvd-color-scheme});
background-color: var(#{constants.$vvd-color-canvas});
color: var(#{constants.$vvd-color-canvas-text});
}

.vvd-scrollbar {
@include scrollbar.scrollbar;
}
Loading