From 706c0009a519cd6f274aeacb326ea4bf5cd5c14c Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 16 Oct 2024 21:25:14 +0800 Subject: [PATCH] site: improve scrollbar style of site (#51220) --- .dumi/global.css | 2 +- .../ComponentChangelog/ComponentChangelog.tsx | 4 ++-- .dumi/theme/common/LiveCode.tsx | 2 +- .dumi/theme/common/styles/Markdown.tsx | 4 ++-- .dumi/theme/slots/Content/DocAnchor.tsx | 2 +- .dumi/theme/slots/Header/index.tsx | 4 ++-- .dumi/theme/slots/Sidebar/index.tsx | 23 +++++++++---------- .../__snapshots__/demo.test.tsx.snap | 2 +- components/affix/demo/target.tsx | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/layout/demo/fixed-sider.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 4 ++-- .../__tests__/__snapshots__/demo.test.ts.snap | 14 +++++------ .../table/demo/fixed-columns-header.tsx | 3 ++- components/table/demo/fixed-columns.tsx | 3 ++- .../table/demo/fixed-gapped-columns.tsx | 3 ++- components/table/demo/fixed-header.tsx | 3 ++- components/table/demo/grouping-columns.tsx | 3 ++- components/table/demo/summary.tsx | 3 ++- 19 files changed, 45 insertions(+), 40 deletions(-) diff --git a/.dumi/global.css b/.dumi/global.css index 6c32b20c42..41fc9ed943 100644 --- a/.dumi/global.css +++ b/.dumi/global.css @@ -16,5 +16,5 @@ html { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-color: #eaeaea transparent; } diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index fe781731b8..ff95739562 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -1,6 +1,6 @@ import React, { cloneElement, isValidElement } from 'react'; import { BugOutlined } from '@ant-design/icons'; -import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography, Button } from 'antd'; +import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd'; import type { TimelineItemProps } from 'antd'; import { createStyles } from 'antd-style'; import semver from 'semver'; @@ -76,7 +76,7 @@ const useStyle = createStyles(({ token, css }) => ({ position: 'relative', [`> ${token.antCls}-drawer-body`]: { scrollbarWidth: 'thin', - scrollbarColor: 'unset', + scrollbarGutter: 'stable', }, }, versionWrap: css` diff --git a/.dumi/theme/common/LiveCode.tsx b/.dumi/theme/common/LiveCode.tsx index 2d9e8b6989..fea183755a 100644 --- a/.dumi/theme/common/LiveCode.tsx +++ b/.dumi/theme/common/LiveCode.tsx @@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => { background: ${colorBgContainer}; &-scroll-container { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; } } .dumi-default-source-code > pre, diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 25ae81eb43..8f4fd0f724 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -169,7 +169,7 @@ const GlobalStyle: React.FC = () => { border-radius: ${token.borderRadius}px; > pre.prism-code { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; padding: ${token.paddingSM}px ${token.paddingMD}px; font-size: ${token.fontSize}px; line-height: 2; @@ -272,7 +272,7 @@ const GlobalStyle: React.FC = () => { .markdown .dumi-default-table { &-content { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; } table { margin: 0; diff --git a/.dumi/theme/slots/Content/DocAnchor.tsx b/.dumi/theme/slots/Content/DocAnchor.tsx index ffdd7080fb..223c2abd74 100644 --- a/.dumi/theme/slots/Content/DocAnchor.tsx +++ b/.dumi/theme/slots/Content/DocAnchor.tsx @@ -10,7 +10,7 @@ export const useStyle = createStyles(({ token, css }) => { return { anchorToc: css` scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; ${antCls}-anchor { ${antCls}-anchor-link-title { font-size: ${token.fontSizeSM}px; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index a30eda5e4d..7029f17bd6 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -99,7 +99,7 @@ const useStyle = createStyles(({ token, css }) => { } & > section { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; } } } @@ -142,7 +142,7 @@ const useStyle = createStyles(({ token, css }) => { .rc-virtual-list { .rc-virtual-list-holder { scrollbar-width: thin; - scrollbar-color: unset; + scrollbar-gutter: stable; } } `, diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx index ac1f25d224..13699a855d 100644 --- a/.dumi/theme/slots/Sidebar/index.tsx +++ b/.dumi/theme/slots/Sidebar/index.tsx @@ -91,18 +91,17 @@ const useStyle = createStyles(({ token, css }) => { `, mainMenu: css` z-index: 1; - position: sticky; - top: ${token.headerHeight + token.contentMarginTop}px; - width: 100%; - height: 100%; - max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px); - overflow: hidden; - scrollbar-width: thin; - scrollbar-color: unset; - - .ant-menu { - padding: 0 4px; - } + position: sticky; + top: ${token.headerHeight + token.contentMarginTop}px; + width: 100%; + height: 100%; + max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px); + overflow: hidden; + scrollbar-width: thin; + scrollbar-gutter: stable; + .ant-menu { + padding: 0 4px; + } &:hover { overflow-y: auto; diff --git a/components/affix/__tests__/__snapshots__/demo.test.tsx.snap b/components/affix/__tests__/__snapshots__/demo.test.tsx.snap index c200a15f08..d0c4eb4d39 100644 --- a/components/affix/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/affix/__tests__/__snapshots__/demo.test.tsx.snap @@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = ` exports[`renders components/affix/demo/target.tsx correctly 1`] = `