fix: [DEMO] fix styles

alibaba · Mar 7, 2022 · b0225e0 · b0225e0
1 parent 5ce52ed
commit b0225e0
Show file tree

Hide file tree

Showing 48 changed files with 20 additions and 66 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -8,6 +8,6 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script src="//dev.g.alicdn.com/chatui/icons/0.3.0/index.js" async=""></script>
+    <script src="//dev.g.alicdn.com/chatui/icons/0.3.1/index.js" async=""></script>
   </body>
 </html>
diff --git a/demo/package.json b/demo/package.json
@@ -2,7 +2,7 @@
   "name": "demo",
   "version": "0.1.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "serve": "vite preview"
   },

diff --git a/demo/src/components/DemoSection.tsx b/demo/src/components/DemoSection.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 interface DemoSectionProps {
   title: string;
-  bg?: 'white' | 'light-1' | 'light-2';
+  bg?: 'white' | 'gray-5';
   children: React.ReactNode;
 }
 

diff --git a/demo/src/demo/Avatar.tsx b/demo/src/demo/Avatar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Avatar } from '../../../src';
-import '../../../src/styles/index.less';
 
 const img = '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg';
 

diff --git a/demo/src/demo/Bubble.tsx b/demo/src/demo/Bubble.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Bubble } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Button.tsx b/demo/src/demo/Button.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Button, IconButton } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Card.tsx b/demo/src/demo/Card.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Card, CardMedia, CardTitle, CardText, CardActions, Button } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>
@@ -11,10 +10,8 @@ export default () => (
           气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情气泡内容详情
         </CardText>
         <CardActions>
-          <Button size="lg">前去留言</Button>
-          <Button color="primary" size="lg">
-            提交评价
-          </Button>
+          <Button>前去留言</Button>
+          <Button color="primary">提交评价</Button>
         </CardActions>
       </Card>
     </DemoSection>

diff --git a/demo/src/demo/Carousel.tsx b/demo/src/demo/Carousel.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Carousel, Image } from '../../../src';
-import '../../../src/styles/index.less';
 
 const imgs = [
   '//gw.alicdn.com/tfs/TB1GRW3voY1gK0jSZFMXXaWcVXa-620-320.jpg',

diff --git a/demo/src/demo/Chat.tsx b/demo/src/demo/Chat.tsx
@@ -17,7 +17,6 @@ import Chat, {
   ToolbarItemProps,
 } from '../../../src';
 import OrderSelector from './OrdderSelector';
-import '../../../src/styles/index.less';
 
 type MessageWithoutId = Omit<MessageProps, '_id'>;
 

diff --git a/demo/src/demo/Checkbox.tsx b/demo/src/demo/Checkbox.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Checkbox, CheckboxGroup, CheckboxValue } from '../../../src';
-import '../../../src/styles/index.less';
 
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -25,16 +24,16 @@ export default () => {
 
   return (
     <DemoPage>
-      <DemoSection title="基础用法">
+      <DemoSection title="基础用法" bg="gray-5">
         <Checkbox value="abc" label="ABC" checked={checked} onChange={() => setChecked(!checked)} />
       </DemoSection>
-      <DemoSection title="禁用状态">
+      <DemoSection title="禁用状态" bg="gray-5">
         <Checkbox value="abc" label="ABC" disabled />
       </DemoSection>
-      <DemoSection title="复选框组">
+      <DemoSection title="复选框组" bg="gray-5">
         <CheckboxGroup value={value1} options={options} onChange={handleChange} />
       </DemoSection>
-      <DemoSection title="块级显示">
+      <DemoSection title="块级显示" bg="gray-5">
         <CheckboxGroup value={value2} options={options} onChange={handleChange2} block />
       </DemoSection>
     </DemoPage>

diff --git a/demo/src/demo/Divider.tsx b/demo/src/demo/Divider.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Divider } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Empty.tsx b/demo/src/demo/Empty.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Empty, Button } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/ErrorBoundary.tsx b/demo/src/demo/ErrorBoundary.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { ErrorBoundary, FallbackProps } from '../../../src';
-import '../../../src/styles/index.less';
 
 function BuggyCounter() {
   const [counter, setCounter] = useState(0);

diff --git a/demo/src/demo/FileCard.tsx b/demo/src/demo/FileCard.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { FileCard } from '../../../src';
-import '../../../src/styles/index.less';
 
 const file = new File(['foo'], 'foo.txt', {
   type: 'text/plain',

diff --git a/demo/src/demo/Flex.tsx b/demo/src/demo/Flex.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Flex, FlexItem } from '../../../src';
-import '../../../src/styles/index.less';
 
 function FluidLayout({ n }: { n: number }) {
   return (

diff --git a/demo/src/demo/Form.tsx b/demo/src/demo/Form.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Form, FormItem, FormActions, Input, Button, RadioGroup } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [usename, setUsername] = useState('');

diff --git a/demo/src/demo/Goods.tsx b/demo/src/demo/Goods.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Card, Goods } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Icon.tsx b/demo/src/demo/Icon.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Icon } from '../../../src';
-import '../../../src/styles/index.less';
 
 const symbols = document.getElementById('__CHATUI_ICONS__')?.querySelectorAll('symbol') || [];
 

diff --git a/demo/src/demo/Input.tsx b/demo/src/demo/Input.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Input } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [value1, setValue1] = useState('');

diff --git a/demo/src/demo/List.tsx b/demo/src/demo/List.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Card, List, ListItem } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Loading.tsx b/demo/src/demo/Loading.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Loading } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/MediaObject.tsx b/demo/src/demo/MediaObject.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { MediaObject } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Modal.tsx b/demo/src/demo/Modal.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Modal, Card, List, ListItem } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [open1, setOpen1] = useState(false);

diff --git a/demo/src/demo/Navbar.tsx b/demo/src/demo/Navbar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Navbar } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   return (

diff --git a/demo/src/demo/Notice.tsx b/demo/src/demo/Notice.tsx
@@ -1,31 +1,30 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Notice } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>
-    <DemoSection title="基础用法" bg="light-2">
+    <DemoSection title="基础用法" bg="gray-5">
       <div style={{ position: 'relative', height: '60px' }}>
         <Notice content="小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容" />
       </div>
     </DemoSection>
-    <DemoSection title="没有关闭" bg="light-2">
+    <DemoSection title="没有关闭" bg="gray-5">
       <div style={{ position: 'relative', height: '60px' }}>
         <Notice
           closable={false}
           content="小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容小蜜公告内容"
         />
       </div>
     </DemoSection>
-    <DemoSection title="文字" bg="light-2">
+    <DemoSection title="短文字" bg="gray-5">
       <div style={{ position: 'relative', height: '60px' }}>
         <Notice content="小蜜公告内容小蜜公告内容" />
       </div>
     </DemoSection>
-    <DemoSection title="右按钮" bg="light-2">
+    <DemoSection title="左按钮" bg="gray-5">
       <div style={{ position: 'relative', height: '60px' }}>
-        <Notice content="小蜜公告内容" rightIcon="chevron-right" />
+        <Notice content="小蜜公告内容" leftIcon="warning-circle-fill" />
       </div>
     </DemoSection>
   </DemoPage>

diff --git a/demo/src/demo/OrdderSelector.tsx b/demo/src/demo/OrdderSelector.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Popup, Card, Goods, Tabs, Tab, Button, Search, Modal } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [active, setActive] = useState(true);

diff --git a/demo/src/demo/Popup.tsx b/demo/src/demo/Popup.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Popup, Card, List, ListItem } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [open1, setOpen1] = useState(false);

diff --git a/demo/src/demo/Portal.tsx b/demo/src/demo/Portal.tsx
@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Portal } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const containerRef = useRef(null);

diff --git a/demo/src/demo/Price.tsx b/demo/src/demo/Price.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Price } from '../../../src';
-import '../../../src/styles/index.less';
 
 const number = 1234567.89;
 

diff --git a/demo/src/demo/Progress.tsx b/demo/src/demo/Progress.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Progress, Button } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [percentage, setPercentage] = useState(20);

diff --git a/demo/src/demo/PullToRefresh.tsx b/demo/src/demo/PullToRefresh.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { PullToRefresh } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Radio.tsx b/demo/src/demo/Radio.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Radio, RadioGroup, RadioValue } from '../../../src';
-import '../../../src/styles/index.less';
 
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -19,12 +18,12 @@ export default () => {
 
   return (
     <DemoPage>
-      <DemoSection title="基础用法">
+      <DemoSection title="基础用法" bg="gray-5">
         <Radio label="备选项A" value="a" />
         <Radio label="备选项B" value="b" checked />
         <Radio label="备选项C" value="c" disabled />
       </DemoSection>
-      <DemoSection title="单选框组">
+      <DemoSection title="单选框组" bg="gray-5">
         <RadioGroup value={value} options={options} onChange={handleChange} />
       </DemoSection>
     </DemoPage>

diff --git a/demo/src/demo/RateActions.tsx b/demo/src/demo/RateActions.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { RateActions, LocaleProvider } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/RichText.tsx b/demo/src/demo/RichText.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { RichText } from '../../../src';
-import '../../../src/styles/index.less';
 
 const html = '<div><h1>H1标题</h1><p>这是段落<em>em标签</em><strong>strong标签</strong></p></div>';
 

diff --git a/demo/src/demo/ScrollView.tsx b/demo/src/demo/ScrollView.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { ScrollView, Button } from '../../../src';
-import '../../../src/styles/index.less';
 
 // const list = [{ text: '内容1' }, { text: '内容2' }, { text: '内容3' }];
 

diff --git a/demo/src/demo/Search.tsx b/demo/src/demo/Search.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Search } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Select.tsx b/demo/src/demo/Select.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Select } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [value1, setValue1] = useState('');

diff --git a/demo/src/demo/Stepper.tsx b/demo/src/demo/Stepper.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Stepper, Step } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>

diff --git a/demo/src/demo/Tabs.tsx b/demo/src/demo/Tabs.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Tabs, Tab } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => {
   const [tabIndex, setTabIndex] = useState(0);

diff --git a/demo/src/demo/Tag.tsx b/demo/src/demo/Tag.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DemoPage, DemoSection } from '../components';
 import { Tag } from '../../../src';
-import '../../../src/styles/index.less';
 
 export default () => (
   <DemoPage>