demo: update segmented demo from Space to Flex (#46114)

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -17,10 +17,9 @@ import {
   Tooltip,
 } from 'antd';
 import { createStyles } from 'antd-style';
-import classNames from 'classnames';
 
-import Tilt from './Tilt';
 import useLocale from '../../../../hooks/useLocale';
+import Tilt from './Tilt';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
@@ -73,7 +72,6 @@ const locales = {
 
 const useStyle = createStyles(({ token, css }) => {
   const gap = token.padding;
-
   return {
     holder: css`
       width: 500px;
@@ -82,7 +80,6 @@ const useStyle = createStyles(({ token, css }) => {
       row-gap: ${gap}px;
       opacity: 0.8;
     `,
-
     flex: css`
       display: flex;
       flex-wrap: nowrap;
@@ -106,29 +103,16 @@ const useStyle = createStyles(({ token, css }) => {
   };
 });
 
-export interface ComponentsBlockProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
-  const { className, style } = props;
-
+const ComponentsBlock: React.FC = () => {
   const [locale] = useLocale(locales);
   const { styles } = useStyle();
 
   return (
-    <Tilt
-      options={{ max: 20, glare: true, scale: 1 }}
-      className={classNames(className, styles.holder)}
-      style={style}
-    >
+    <Tilt options={{ max: 20, glare: true, scale: 1 }} className={styles.holder}>
       <ModalPanel title="Ant Design 5.0" width="100%">
         {locale.text}
       </ModalPanel>
-
       <Alert message={locale.infoText} type="info" />
-
       {/* Line */}
       <div className={styles.flex}>
         <ColorPicker style={{ flex: 'none' }} />
@@ -144,57 +128,34 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             {locale.dropdown}
           </Dropdown.Button>
         </div>
-
         <Select
           style={{ flex: 'auto' }}
           mode="multiple"
           maxTagCount="responsive"
           defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
           options={[
-            {
-              value: 'apple',
-              label: locale.apple,
-            },
-            {
-              value: 'banana',
-              label: locale.banana,
-            },
-            {
-              value: 'orange',
-              label: locale.orange,
-            },
-            {
-              value: 'watermelon',
-              label: locale.watermelon,
-            },
+            { value: 'apple', label: locale.apple },
+            { value: 'banana', label: locale.banana },
+            { value: 'orange', label: locale.orange },
+            { value: 'watermelon', label: locale.watermelon },
           ]}
         />
-
         <Input style={{ flex: 'none', width: 120 }} />
       </div>
-
       <Progress
         style={{ margin: 0 }}
         percent={100}
         strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
       />
       <Progress style={{ margin: 0 }} percent={33} status="exception" />
-
       <Steps
         current={1}
         items={[
-          {
-            title: locale.finished,
-          },
-          {
-            title: locale.inProgress,
-          },
-          {
-            title: locale.waiting,
-          },
+          { title: locale.finished },
+          { title: locale.inProgress },
+          { title: locale.waiting },
         ]}
       />
-
       {/* Line */}
       <div className={styles.block}>
         <Slider
@@ -205,16 +166,13 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             26: '26°C',
             37: '37°C',
             100: {
-              style: {
-                color: '#f50',
-              },
+              style: { color: '#f50' },
               label: <strong>100°C</strong>,
             },
           }}
           defaultValue={[26, 37]}
         />
       </div>
-
       {/* Line */}
       <div className={styles.flex}>
         <Button className={styles.ptg_20} type="primary">
@@ -231,7 +189,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
           {locale.icon}
         </Button>
       </div>
-
       {/* Line */}
       <div className={styles.block}>
         <div className={styles.flex}>
@@ -241,7 +198,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
             checkedChildren={<CheckOutlined />}
             unCheckedChildren={<CloseOutlined />}
           />
-
           <Checkbox.Group
             className={styles.ptg_none}
             options={[locale.apple, locale.banana, locale.orange]}
@@ -249,13 +205,10 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
           />
         </div>
       </div>
-
       <div>
         <InternalMessage content={locale.release} type="success" />
       </div>
-
       <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
-
       <Alert message="Ant Design love you!" type="success" />
     </Tilt>
   );

.dumi/pages/index/components/PreviewBanner/Tilt.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef } from 'react';
-import VanillaTilt, { type TiltOptions } from 'vanilla-tilt';
+import VanillaTilt from 'vanilla-tilt';
+import type { TiltOptions } from 'vanilla-tilt';
 
 interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
   options?: TiltOptions;
 }
 
 // https://micku7zu.github.io/vanilla-tilt.js/index.html
-const defaultTiltOptions = {
+const defaultTiltOptions: TiltOptions = {
   scale: 1.02,
   max: 8,
   speed: 1500,

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -35,7 +35,7 @@ const useStyle = () => {
       inset: 0;
       backdrop-filter: blur(4px);
       opacity: 1;
-      background: rgba(255, 255, 255, 0.2);
+      background-color: rgba(255, 255, 255, 0.2);
       transition: all 1s ease;
       pointer-events: none;
     `);

components/segmented/demo/basic.tsx

@@ -1,4 +1,8 @@
 import React from 'react';
 import { Segmented } from 'antd';
 
-export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
+const Demo: React.FC = () => (
+  <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
+);
+
+export default Demo;

components/segmented/demo/block.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Segmented } from 'antd';
 
-export default () => (
-  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
+const Demo: React.FC = () => (
+  <Segmented options={[123, 456, 'longtext-longtext-longtext-longtext']} block />
 );
+
+export default Demo;

components/segmented/demo/componentToken.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConfigProvider, Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <ConfigProvider
     theme={{
       components: {
@@ -19,3 +19,5 @@ export default () => (
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
   </ConfigProvider>
 );
+
+export default Demo;

components/segmented/demo/custom.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Segmented, Space } from 'antd';
+import { Avatar, Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented
       options={[
         {
@@ -75,7 +75,7 @@ const App: React.FC = () => (
         },
       ]}
     />
-  </Space>
+  </Flex>
 );
 
 export default App;

components/segmented/demo/disabled.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Segmented, Space } from 'antd';
+import { Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
     <Segmented
       options={[
@@ -13,7 +13,7 @@ const App: React.FC = () => (
         'Yearly',
       ]}
     />
-  </Space>
+  </Flex>
 );
 
 export default App;

components/segmented/demo/dynamic.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Segmented, Button, Space } from 'antd';
+import { Button, Flex, Segmented } from 'antd';
 
 const Demo: React.FC = () => {
   const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
@@ -11,12 +11,12 @@ const Demo: React.FC = () => {
   };
 
   return (
-    <Space direction="vertical">
+    <Flex gap="small" align="flex-start" vertical>
       <Segmented options={options} />
       <Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
         Load more options
       </Button>
-    </Space>
+    </Flex>
   );
 };
 

components/segmented/demo/icon-only.tsx

@@ -2,17 +2,13 @@ import React from 'react';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <Segmented
     options={[
-      {
-        value: 'List',
-        icon: <BarsOutlined />,
-      },
-      {
-        value: 'Kanban',
-        icon: <AppstoreOutlined />,
-      },
+      { value: 'List', icon: <BarsOutlined /> },
+      { value: 'Kanban', icon: <AppstoreOutlined /> },
     ]}
   />
 );
+
+export default Demo;

components/segmented/demo/size-consistent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, Input, Select, Segmented, Space } from 'antd';
+import { Button, Flex, Input, Segmented, Select } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" vertical>
     <div>
       <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
       <Button type="primary" size="large">
@@ -19,7 +19,7 @@ const App: React.FC = () => (
         <Select.Option value="lucy">Lucy</Select.Option>
       </Select>
     </div>
-  </Space>
+  </Flex>
 );
 
 export default App;

components/segmented/demo/size.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Segmented, Space } from 'antd';
+import { Flex, Segmented } from 'antd';
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Flex gap="small" align="flex-start" vertical>
     <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
-  </Space>
+  </Flex>
 );
 
 export default App;

components/segmented/demo/with-icon.tsx

@@ -2,19 +2,13 @@ import React from 'react';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo: React.FC = () => (
   <Segmented
     options={[
-      {
-        label: 'List',
-        value: 'List',
-        icon: <BarsOutlined />,
-      },
-      {
-        label: 'Kanban',
-        value: 'Kanban',
-        icon: <AppstoreOutlined />,
-      },
+      { label: 'List', value: 'List', icon: <BarsOutlined /> },
+      { label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },
     ]}
   />
 );
+
+export default Demo;

components/segmented/style/index.ts

@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';