Skip to content

Commit

Permalink
Merge pull request #139 from ensdomains/feat/scrollbox-tweaks
Browse files Browse the repository at this point in the history
feat: stylebox styling consistency tweaks
TateB authored Feb 28, 2024
2 parents c9528f5 + c2b7566 commit 540b4f8
Showing 3 changed files with 64 additions and 52 deletions.
6 changes: 3 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": false,
"source.organizeImports": false
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "never",
"source.organizeImports": "never"
},
"editor.formatOnSave": true,
"eslint.options": {
9 changes: 3 additions & 6 deletions components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
Original file line number Diff line number Diff line change
@@ -44,12 +44,9 @@ const mockIntersectionObserver = makeMockIntersectionObserver(
)

const expectLine = (e: 'top' | 'bottom', visible: boolean) =>
expect(screen.getByTestId('scroll-box')).toHaveStyleRule(
'background-color',
`hsla(0 0% 91% / ${visible ? '1' : '0'})`,
{
modifier: e === 'top' ? '::before' : '::after',
},
expect(screen.getByTestId('scroll-box')).toHaveAttribute(
`data-${e}-line`,
visible ? 'true' : 'false',
)

describe('<ScrollBox />', () => {
101 changes: 58 additions & 43 deletions components/src/components/atoms/ScrollBox/ScrollBox.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,80 @@
import * as React from 'react'
import styled, { css } from 'styled-components'

const StyledScrollBox = styled.div<{ $showTop: boolean; $showBottom: boolean }>(
({ theme, $showTop, $showBottom }) => css`
const StyledScrollBox = styled.div(
({ theme }) => css`
overflow: auto;
position: relative;
border-color: ${theme.colors.greyLight};
transition: border-color 0.15s ease-in-out;
@property --scrollbar {
syntax: '<color>';
inherits: true;
initial-value: ${theme.colors.greyLight};
}
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
&::-webkit-scrollbar-track {
background-color: transparent;
@property --top-line-color {
syntax: '<color>';
inherits: true;
initial-value: transparent;
}
&::-webkit-scrollbar {
background-color: transparent;
@property --bottom-line-color {
syntax: '<color>';
inherits: true;
initial-value: transparent;
}
&::-webkit-scrollbar:vertical {
width: ${theme.space['1.5']};
/* stylelint-disable custom-property-no-missing-var-function */
transition: --scrollbar 0.15s ease-in-out,
height 0.15s ${theme.transitionTimingFunction.popIn},
--top-line-color 0.15s ease-in-out, --bottom-line-color 0.15s ease-in-out;
/* stylelint-enable custom-property-no-missing-var-function */
::-webkit-scrollbar {
width: ${theme.space['3.5']};
transition: box-shadow 0.15s ease-in-out;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
&::-webkit-scrollbar:horizontal {
height: ${theme.space['1.5']};
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
transition: box-shadow 0.15s ease-in-out;
box-shadow: inset 0 0 ${theme.space['3']} ${theme.space['3']}
var(--scrollbar);
border: solid ${theme.space['1']} transparent;
border-radius: ${theme.space['3']};
background-color: transparent;
}
&::-webkit-scrollbar-thumb:vertical {
border: none;
border-radius: ${theme.radii.full};
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-color: inherit;
&:hover {
--scrollbar: ${theme.colors.greyBright};
}
&::-webkit-scrollbar-thumb:horizontal {
border: none;
border-radius: ${theme.radii.full};
border-bottom-style: inset;
border-bottom-width: calc(100vw + 100vh);
border-color: inherit;
&[data-top-line='true'] {
--top-line-color: ${theme.colors.greyLight};
&::before {
z-index: 100;
}
}
&::-webkit-scrollbar-button {
display: none;
&[data-bottom-line='true'] {
--bottom-line-color: ${theme.colors.greyLight};
&::after {
z-index: 100;
}
}
&:hover {
border-color: ${theme.colors.greyBright};
::-webkit-scrollbar-track {
border-top: solid ${theme.space['px']} var(--top-line-color);
border-bottom: solid ${theme.space['px']} var(--bottom-line-color);
}
&::before,
@@ -60,25 +85,15 @@ const StyledScrollBox = styled.div<{ $showTop: boolean; $showBottom: boolean }>(
width: 100%;
display: block;
height: ${theme.space.px};
background-color: hsla(${theme.colors.raw.greyLight} / 0);
transition: background-color 0.15s ease-in-out;
}
&::before {
top: 0;
${$showTop &&
css`
background-color: hsla(${theme.colors.raw.greyLight} / 1);
z-index: 100;
`}
background-color: var(--top-line-color);
}
&::after {
bottom: 0;
${$showBottom &&
css`
background-color: hsla(${theme.colors.raw.greyLight} / 1);
z-index: 100;
`}
background-color: var(--bottom-line-color);
}
`,
)
@@ -170,8 +185,8 @@ export const ScrollBox = ({

return (
<StyledScrollBox
$showBottom={showBottom}
$showTop={showTop}
data-bottom-line={showBottom}
data-top-line={showTop}
ref={ref}
{...props}
>

0 comments on commit 540b4f8

Please sign in to comment.