Fix/badge info background (#97)

* fix: Badge info background

* add stories and sass precision to 8

* modal add hideHeader attr

docs/src/Layout/variables.scss

@@ -117,6 +117,11 @@ $brand-critical: #b90a38;
 $brand-muted: $gray-medium-6;
 
 
+$light-steel-blue-lighter-3: #e8eaf6;
+$light-steel-blue-normal: #cbd0e3;
+$light-steel-blue-darker-1: #c4cadf;
+$light-steel-blue-darker-2: #b1b9d3;
+
 /* Badge */
 $badge-height: 20px;
 $badge-dot-small-size: 6px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wizard-ui",
-  "version": "0.4.1",
+  "version": "0.4.1-beta.4",
   "private": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -45,8 +45,8 @@
     "build-lib": "rm -rf lib && NODE_ENV=production babel src --out-dir lib --copy-file --extensions '.ts,.tsx' --env-name 'lib' && yarn lib-css",
     "build-dist": "rm -rf dist && NODE_ENV=production webpack",
     "dist-stats": "NODE_ENV=production webpack --profile --json > stats.json",
-    "esm-css": "node-sass src -o esm -q --output-style=compressed --source-map=true",
-    "lib-css": "node-sass src -o lib -q --output-style=compressed --source-map=true",
+    "esm-css": "node-sass --precision=8 src -o esm -q --output-style=compressed --source-map=true",
+    "lib-css": "node-sass --precision=8 src -o lib -q --output-style=compressed --source-map=true",
     "esm-types": "rm -rf types && tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir esm/types",
     "tsc-types": "rm -rf types && tsc --declaration -p ./ -t es2015 --emitDeclarationOnly --outDir types",
     "copy": "ts-node scripts/build-copy.ts",

src/components/Badge/style.scss

@@ -49,7 +49,7 @@
     background-color: $brand-success;
   }
   &--info {
-    background-color: $brand-info;
+    background-color: $blue-royal-normal;
   }
   &--critical {
     background-color: $brand-critical;

src/components/Modal/index.tsx

@@ -17,6 +17,7 @@ const Modal: React.FC<ModalProps> = props => {
     okStyle,
     loading,
     hideFooter,
+    hideHeader,
   } = props;
   let { bsSize } = props,
     dialogClassName = '';
@@ -35,9 +36,11 @@ const Modal: React.FC<ModalProps> = props => {
       onHide={onHide}
       show={show}
     >
-      <ModalHeader key="header" closeButton>
-        <ModalTitle>{title}</ModalTitle>
-      </ModalHeader>
+      {!hideHeader &&(
+        <ModalHeader key="header" closeButton>
+          <ModalTitle>{title}</ModalTitle>
+        </ModalHeader>
+      )}
       <ModalBody key="body">{children}</ModalBody>
       {!hideFooter && (
         <ModalFooter key="footer">
@@ -72,6 +75,8 @@ Modal.propTypes = {
   loading: PropTypes.bool,
   /** 隐藏 footer */
   hideFooter: PropTypes.bool,
+  /** 隐藏 头部 */
+  hideHeader: PropTypes.bool,
 };
 
 Modal.defaultProps = {

src/components/Tooltip/style.scss

@@ -2,7 +2,7 @@
 
 .Tooltip__icon {
   font-size: 14px;
-  color: var(--light-steel-blue-normal);
+  color: $light-steel-blue-normal;
 }
 .Tooltip {
   display: inline-block;

src/components/UsageBar/index.test.tsx

@@ -57,6 +57,6 @@ describe('UsageBar', () => {
   it('should showing no limit', () => {
     const usagebar = shallow(<UsageBar now={0} isBulk />);
     const right = usagebar.find('.UsageBar__footer--right');
-    expect(right.text()).toBe('no limit');
+    expect(right.text()).toBe('无限制');
   });
 });

src/components/UsageBar/index.tsx

@@ -83,7 +83,7 @@ const UsageBar: React.FC<UsageBarProps> = props => {
   // isPercent，hasPercent 涉及到百分比展示，此时 max 不应该为无限制
   // showZeroMax 直接展示 max 为处理后的 0 + 单位
   if (!max && !hasPercent && !isPercent && !showZeroMax) {
-    maxValue = 'no limit';
+    maxValue = '无限制';
     maxSuffix = '';
   }
 

src/interface.tsx

@@ -116,6 +116,7 @@ export interface ModalProps {
   okStyle?: string;
   loading?: boolean;
   hideFooter?: boolean;
+  hideHeader?: boolean;
 }
 
 interface SwitchInput {

src/style/variables.scss

@@ -116,6 +116,11 @@ $brand-error: #f24542;
 $brand-critical: #b90a38;
 $brand-muted: $gray-medium-6;
 
+$light-steel-blue-lighter-3: #e8eaf6;
+$light-steel-blue-normal: #cbd0e3;
+$light-steel-blue-darker-1: #c4cadf;
+$light-steel-blue-darker-2: #b1b9d3;
+
 
 /* Badge */
 $badge-height: 20px;

stories/InputGroup.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { FormControl, InputGroup, Button } from '../src';
+
+storiesOf('InputGroup', module)
+  .add('default', () => (
+    <InputGroup>
+      <FormControl type="text" disabled />
+      <InputGroup.Button>
+        <Button>选择文件</Button>
+      </InputGroup.Button>
+    </InputGroup>
+  ))