diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 52e7e6ffea..eafd205b41 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -2,11 +2,14 @@ @alert-prefix-cls: ~"@{ant-prefix}-alert"; +@alert-message-color: @heading-color; +@alert-text-color: @text-color; + .@{alert-prefix-cls} { position: relative; padding: 8px 48px 8px 38px; border-radius: @border-radius-base; - color: @text-color; + color: @alert-text-color; font-size: @font-size-base; line-height: 16px; margin-bottom: 10px; @@ -114,7 +117,7 @@ &-with-description &-message { font-size: @font-size-lg; - color: @heading-color; + color: @alert-message-color; display: block; margin-bottom: 4px; } diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index b165868da7..fc071ba37a 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -14,6 +14,7 @@ cursor: pointer; width: 100%; z-index: 1; + display: block; } &-picker { diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index d4fe1f13d4..5b65964d49 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -2,8 +2,7 @@ @import "../../style/mixins/index"; @collapse-prefix-cls: ~"@{ant-prefix}-collapse"; - -@collapse-active-bg: @primary-1; +@collapse-active-bg: #eee; @collapse-header-bg: @background-color-base; .collapse-close() { diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 10c28f9916..ed095373c6 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -109,6 +109,7 @@ outline: 0; height: 22px; color: @input-color; + background: @input-bg; } &-week-number { diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 1b6934a12f..55b9318385 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -57,6 +57,7 @@ export interface InputProps { style?: React.CSSProperties; prefix?: React.ReactNode; suffix?: React.ReactNode; + spellCheck?: boolean; } export default class Input extends Component { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 75e0408c1b..0bd5dec224 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -7,10 +7,10 @@ unicode-range: U+30-39; } -// Prefix +// The prefix to use on all css classes from ant. @ant-prefix : ant; -// Color +// -------- Colors ----------- @primary-color : @blue-6; @info-color : @blue-6; @success-color : @green-6; @@ -19,19 +19,31 @@ @warning-color : @yellow-6; @normal-color : #d9d9d9; +// Color used by default to control hover and active backgrounds and for +// alert info backgrounds. @primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%) @primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%) +// unused @primary-3: color(~`colorPalette("@{primary-color}", 3)`); @primary-4: color(~`colorPalette("@{primary-color}", 4)`); +// Color used to control the text color in many active and hover states. @primary-5: color(~`colorPalette("@{primary-color}", 5)`); // replace tint(@primary-color, 20%) @primary-6: @primary-color; // don't use, use @primary-color +// Color used to control the text color of active buttons. @primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%) +// unused @primary-8: color(~`colorPalette("@{primary-color}", 8)`); +// unused @primary-9: color(~`colorPalette("@{primary-color}", 9)`); +// unused @primary-10: color(~`colorPalette("@{primary-color}", 10)`); -// ------ Base & Require ------ +// Base Scaffolding Variables +// --- + +// Background color for `` @body-background : #fff; +// Base background color for most components @component-background : #fff; @font-family : "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @code-family : Consolas, Menlo, Courier, monospace; @@ -82,8 +94,9 @@ @outline-width : 2px; @outline-color : @primary-color; -// Background color -@background-color-base : #f7f7f7; // basic gray background +// Default background color for disabled states, Collapse wrappers, +// and several active and hover states. +@background-color-base : #f7f7f7; // Disabled states @disabled-color : fade(#000, 25%); diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index abfd531295..6b381d1432 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -7,18 +7,18 @@ describe('Upload', () => { // https://github.com/react-component/upload/issues/36 it('should get refs inside Upload in componentDidMount', () => { let ref; - const App = React.createClass({ + class App extends React.Component { componentDidMount() { ref = this.refs.input; - }, + } render() { return ( ); - }, - }); + } + } mount(); expect(ref).toBeDefined(); }); diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index bd6641303e..5d6e04e7f7 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -5,7 +5,7 @@ title: Third-Party Libraries `antd` is designed to provide high-quality React UI components which following Ant Design Specification. So, we are not going to implement other functions which are not relative to `antd`'s target, and recommend to use excellent third-party library which came from React community: -Category | Recommanded Components +Category | Recommended Components ---------|----------------------- Router | [react-router](https://github.com/ReactTraining/react-router) Layout | [react-blocks](http://whoisandie.github.io/react-blocks/)