From f56fee1333e596156e2c7f94aaab3cba0155b095 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 27 Jul 2024 16:13:25 +0800 Subject: [PATCH] site: update site/demo style (#50107) * site: update site/demo style * fix: fix lint --- .../index/components/BannerRecommends.tsx | 15 ++++---- .../pages/index/components/ComponentsList.tsx | 36 ++++++++++++++----- .../index/components/DesignFramework.tsx | 9 +++-- .../index/components/PreviewBanner/index.tsx | 3 ++ .../components/Theme/BackgroundImage.tsx | 3 +- .../index/components/Theme/MobileCarousel.tsx | 2 +- .dumi/pages/index/index.tsx | 5 +-- .../ComponentChangelog/ComponentChangelog.tsx | 30 +++++++++------- .dumi/theme/common/ThemeSwitch/index.tsx | 1 - .dumi/theme/common/styles/Markdown.tsx | 3 ++ .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo.test.tsx.snap | 2 +- components/affix/demo/target.tsx | 4 ++- .../generatePicker/generateRangePicker.tsx | 8 +++-- .../generatePicker/generateSinglePicker.tsx | 4 ++- .../date-picker/generatePicker/index.tsx | 6 ++-- components/grid/index.en-US.md | 2 +- components/grid/index.zh-CN.md | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/layout/demo/fixed-sider.tsx | 15 ++++++-- 20 files changed, 104 insertions(+), 50 deletions(-) diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx index a7cd969d02..cc223f3b44 100644 --- a/.dumi/pages/index/components/BannerRecommends.tsx +++ b/.dumi/pages/index/components/BannerRecommends.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; -import { Badge, Carousel, Skeleton, Typography } from 'antd'; -import { createStyles, useTheme } from 'antd-style'; +import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd'; +import { createStyles } from 'antd-style'; import classNames from 'classnames'; import useLocale from '../../../hooks/useLocale'; @@ -57,6 +57,9 @@ const useStyle = createStyles(({ token, css, cx }) => { } `, carousel, + bannerBg: css` + height: ${token.fontSize}px; + `, }; }); @@ -66,8 +69,8 @@ interface RecommendItemProps { icons: Icon[]; className?: string; } + const RecommendItem: React.FC = ({ extra, index, icons, className }) => { - const token = useTheme(); const { styles } = useStyle(); if (!extra) { @@ -87,10 +90,10 @@ const RecommendItem: React.FC = ({ extra, index, icons, clas {extra.description} -
+ {extra.date} - {icon && banner} -
+ {icon && banner} + ); diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index 8918a037db..ef007a998f 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -12,7 +12,7 @@ import { Tour, Typography, } from 'antd'; -import { createStyles, css, useTheme } from 'antd-style'; +import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; import dayjs from 'dayjs'; @@ -104,6 +104,13 @@ const useStyle = () => { justify-content: center; `, carousel, + componentsList: css` + width: 100%; + overflow: hidden; + `, + mobileComponentsList: css` + margin: 0 ${token.margin}px; + `, }; })(); }; @@ -142,7 +149,6 @@ interface ComponentItemProps { } const ComponentsList: React.FC = () => { - const token = useTheme(); const { styles } = useStyle(); const [locale] = useLocale(locales); const { isMobile } = useContext(SiteContext); @@ -260,21 +266,33 @@ const ComponentsList: React.FC = () => { ); return isMobile ? ( -
+
{COMPONENTS.map(({ title, node, type }, index) => ( - + ))}
) : ( -
-
+ + {COMPONENTS.map(({ title, node, type }, index) => ( - + ))} -
-
+ + ); }; diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx index 8d57a46891..e2816d9118 100644 --- a/.dumi/pages/index/components/DesignFramework.tsx +++ b/.dumi/pages/index/components/DesignFramework.tsx @@ -134,7 +134,7 @@ const DesignFramework: React.FC = () => {
- {title} + {title} { return ( - {title} + {title} = (props) => { {/* Image Left Top */} bg {/* Image Right Top */} bg = ({ colorPrimary, isLight ); diff --git a/.dumi/pages/index/components/Theme/MobileCarousel.tsx b/.dumi/pages/index/components/Theme/MobileCarousel.tsx index ac30834c24..97aca0bc2a 100644 --- a/.dumi/pages/index/components/Theme/MobileCarousel.tsx +++ b/.dumi/pages/index/components/Theme/MobileCarousel.tsx @@ -113,7 +113,7 @@ const MobileCarousel: React.FC = (props) => { {mobileImageConfigList.map((item, index) => (
- + carousel
))} diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx index 8def1ca0ba..a319241b2f 100644 --- a/.dumi/pages/index/index.tsx +++ b/.dumi/pages/index/index.tsx @@ -78,12 +78,13 @@ const Homepage: React.FC = () => { } > diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index 0cbd4af607..dea12f639c 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -28,7 +28,7 @@ function matchDeprecated(v: string): MatchDeprecatedResult { } const useStyle = createStyles(({ token, css }) => ({ - ref: css` + linkRef: css` margin-inline-start: ${token.marginXS}px; `, bug: css` @@ -57,6 +57,16 @@ const useStyle = createStyles(({ token, css }) => ({ } } `, + extraLink: css` + font-size: ${token.fontSize}px; + `, + drawerContent: { + position: 'relative', + [`> ${token.antCls}-drawer-body`]: { + scrollbarWidth: 'thin', + scrollbarColor: 'unset', + }, + }, })); export interface ComponentChangelogProps { @@ -117,7 +127,7 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any {parsedChangelog} {/* Refs */} {refs?.map((ref) => ( - + #{ref.match(/^.*\/(\d+)$/)?.[1]} ))} @@ -223,27 +233,21 @@ const ComponentChangelog: React.FC = (props) => { return ( <> - + {locale.full} } open={show} width={width} - onClose={() => { - setShow(false); - }} - destroyOnClose + onClose={() => setShow(false)} > diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx index 0319368366..9f55bc8aef 100644 --- a/.dumi/theme/common/ThemeSwitch/index.tsx +++ b/.dumi/theme/common/ThemeSwitch/index.tsx @@ -35,7 +35,6 @@ const ThemeSwitch: React.FC = (props) => { icon={} aria-label="Theme Switcher" badge={{ dot: true }} - style={{ zIndex: 1010 }} > { } .markdown img { + display: block; max-width: calc(100% - 32px); max-height: 100%; } @@ -183,6 +184,8 @@ const GlobalStyle: React.FC = () => { background-color: ${token.siteMarkdownCodeBg}; border-radius: ${token.borderRadius}px; > pre.prism-code { + scrollbar-width: thin; + scrollbar-color: unset; padding: ${token.paddingSM}px ${token.paddingMD}px; font-size: ${token.fontSize}px; line-height: 2; diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap index 79ece77892..729dc01fb6 100644 --- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -90,7 +90,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 2` exports[`renders components/affix/demo/target.tsx extend context correctly 1`] = `
( +const generateRangePicker = ( generateConfig: GenerateConfig, -) { +) => { type DateRangePickerProps = RangePickerProps; const RangePicker = forwardRef((props, ref) => { @@ -179,4 +179,6 @@ export default function generateRangePicker( } return RangePicker; -} +}; + +export default generateRangePicker; diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index b4073d31b2..6c189b57fd 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -39,7 +39,9 @@ import { import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface'; import useComponents from './useComponents'; -const generatePicker = (generateConfig: GenerateConfig) => { +const generatePicker = ( + generateConfig: GenerateConfig, +) => { type DatePickerProps = PickerProps; type TimePickerProps = GenericTimePickerProps; diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 6c800229a7..40987ba954 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -6,7 +6,9 @@ import generateSinglePicker from './generateSinglePicker'; export type { PickerLocale, PickerProps } from './interface'; -function generatePicker(generateConfig: GenerateConfig) { +const generatePicker = ( + generateConfig: GenerateConfig, +) => { // =========================== Picker =========================== const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } = generateSinglePicker(generateConfig); @@ -39,6 +41,6 @@ function generatePicker(generateConfig: GenerateConf } return MergedDatePicker; -} +}; export default generatePicker; diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 9caf6b3230..ea68dedafc 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -10,7 +10,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA ## Design concept
- grid design + grid design
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections. diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 9dc2f1b384..496fa388af 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -11,7 +11,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA ## 设计理念
- grid design + grid design
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。 diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap index a546c83143..9face67cb1 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap @@ -747,7 +747,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = ` >