fix: 优化组件通用样式

cuke-ui · Oct 23, 2018 · 8894814 · 8894814
1 parent 7c8f04b
commit 8894814
Show file tree

Hide file tree

Showing 15 changed files with 405 additions and 42 deletions.
diff --git a/.babelrc b/.babelrc
@@ -15,6 +15,14 @@
     "transform-es2015-modules-commonjs",
     "transform-decorators-legacy",
     "transform-class-properties",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    [
+      "import",
+      {
+        "libraryName": "cuke-ui",
+        "libraryDirectory": "components",
+        "style": true
+      }
+    ]
   ]
 }
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,11 +1,11 @@
-import { configure,setAddon,addDecorator } from '@storybook/react';
-import {name,repository} from "../package.json"
-import infoAddon,{ setDefaults } from '@storybook/addon-info';
+import React from "react"
+import { configure, addDecorator } from '@storybook/react';
+import { name, repository } from "../package.json"
+import { setDefaults } from '@storybook/addon-info';
 import { configureActions } from '@storybook/addon-actions';
 import { setOptions } from '@storybook/addon-options';
-import { withNotes } from '@storybook/addon-notes';
 import '@storybook/addon-console';
-import "../components/styles/app.less"
+import "../components/styles/index.less"
 
 const req = require.context('../components', true, /\.stories\.js$/)
 
@@ -29,10 +29,9 @@ configureActions({
   depth: 100
 })
 setDefaults({
-  header:true,
+  header: true,
   maxPropObjectKeys: 100,
   maxPropArrayLength: 100
 })
-// addDecorator(withNotes)
-// setAddon(infoAddon);
+addDecorator(story => <div style={{ padding: "20px 40px" }}>{story()}</div>)
 configure(loadStories, module);
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
@@ -75,6 +75,6 @@ describe("<Button/>", () => {
 
 	it("should render link", () => {
 		const wrapper = shallow(<Button href="/test">黄瓜ui</Button>);
-		assert(wrapper.find("a.cuke-button").length >= 1);
+		assert(wrapper.find(".cuke-button-link").length >= 1);
 	});
 });
diff --git a/components/button/index.js b/components/button/index.js
@@ -91,7 +91,7 @@ export default class Button extends PureComponent {
 		);
 		if (href) {
 			return (
-				<a {...baseProps} data-cuke-button-link>
+				<a href={href} className={cls(`${prefixCls}-link`, className)} {...attr}>
 					{content}
 				</a>
 			);

diff --git a/components/button/styles.less b/components/button/styles.less
@@ -25,9 +25,6 @@
   border-radius: @border-radius;
   outline: none;
 
-  &[data-cuke-button-link] {
-    line-height: @button-default-height;
-  }
   .btn-hover(@default-color);
   &.btn-primary {
     .btn-hover(@primary-color);
@@ -110,4 +107,7 @@
   &.btn-dashed {
     border: 1px dashed;
   }
+  &-link {
+    cursor: pointer;
+  }
 }
diff --git a/components/datePicker/__tests__/__snapshots__/index.test.js.snap b/components/datePicker/__tests__/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
       placeholder=""
       readonly=""
       type="text"
-      value="2018-10-21"
+      value="2018-10-23"
     />
     <svg
       attr="[object Object]"
@@ -229,7 +229,7 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
         20
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+        class="cuke-date-picker-item cuke-date-picker-current-month"
       >
         21
       </span>
@@ -239,7 +239,7 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
         22
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month"
+        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
       >
         23
       </span>

diff --git a/components/styles/app.less b/components/styles/app.less
@@ -6,18 +6,10 @@
 
 a {
   text-decoration: none;
-  color: @font-color;
-  &:active,
-  &:focus,
-  &:visited {
-    color: @primary-color;
-  }
-}
-
-ul,ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  color: @primary-color;
+  transition: color @default-transition;
+  background-color: transparent;
+  outline: none;
 }
 
 .cuke-ui-no-animate {

diff --git a/components/styles/index.js b/components/styles/index.js
@@ -0,0 +1 @@
+import './index.less';
diff --git a/components/styles/index.less b/components/styles/index.less
@@ -0,0 +1,5 @@
+@import "./normalize.less";
+@import "./vars.less";
+@import "./app.less";
+@import "./mixins.less";
+@import "./animate.less";