fix #1672 (#1936)

components/card/demo/grid.md

@@ -35,11 +35,11 @@ ReactDOM.render(
 
 ````css
 /* Increase grid spacing of 16px  */
-.code-box-demo .row {
+.code-box-demo .ant-row {
   margin-left: -8px;
   margin-right: -8px;
 }
-.code-box-demo .row > div {
+.code-box-demo .ant-row > div {
   padding: 0 8px;
 }
 ````

components/form/FormItem.jsx

@@ -33,8 +33,8 @@ export default class FormItem extends React.Component {
       return '';
     }
     const { span, offset } = colDef;
-    const col = span ? `col-${span}` : '';
-    const offsetCol = offset ? ` col-offset-${offset}` : '';
+    const col = span ? `ant-col-${span}` : '';
+    const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
     return col + offsetCol;
   }
 

components/form/demo/advanced-search-form.md

@@ -96,7 +96,7 @@ ReactDOM.render(
 }
 
 /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.ant-advanced-search-form > .row {
+.ant-advanced-search-form > .ant-row {
   position: relative;
   left: -6px;
 }

components/layout/col.jsx

@@ -16,19 +16,19 @@ export default function Col(props) {
     }
     sizeClassObj = {
       ...sizeClassObj,
-      [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      [`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
-      [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
-      [`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
-      [`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+      [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+      [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
+      [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+      [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
+      [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
     };
   });
   const classes = classNames({
-    [`col-${span}`]: span !== undefined,
-    [`col-order-${order}`]: order,
-    [`col-offset-${offset}`]: offset,
-    [`col-push-${push}`]: push,
-    [`col-pull-${pull}`]: pull,
+    [`ant-col-${span}`]: span !== undefined,
+    [`ant-col-order-${order}`]: order,
+    [`ant-col-offset-${offset}`]: offset,
+    [`ant-col-push-${push}`]: push,
+    [`ant-col-pull-${pull}`]: pull,
     [className]: !!className,
     ...sizeClassObj,
   });

components/layout/demo/basic.md

@@ -13,19 +13,19 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={12}>.col-12</Col>
-      <Col span={12}>.col-12</Col>
+      <Col span={12}>.ant-col-12</Col>
+      <Col span={12}>.ant-col-12</Col>
     </Row>
     <Row>
-      <Col span={8}>.col-8</Col>
-      <Col span={8}>.col-8</Col>
-      <Col span={8}>.col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
     </Row>
     <Row>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
-      <Col span={6}>.col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>.ant-col-6</Col>
     </Row>
   </div>,
   mountNode

components/layout/demo/flex-align.md

@@ -14,26 +14,26 @@ ReactDOM.render(
   <div>
     <p>顶部对齐</p>
     <Row type="flex" justify="center" align="top">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
     </Row>
 
     <p>居中对齐</p>
     <Row type="flex" justify="space-around" align="middle">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
     </Row>
 
     <p>底部对齐</p>
     <Row type="flex" justify="space-between" align="bottom">
-      <Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
     </Row>
   </div>,
   mountNode

components/layout/demo/flex.md

@@ -14,42 +14,42 @@ ReactDOM.render(
   <div>
     <p>子元素居左排列</p>
     <Row type="flex" justify="start">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
     </Row>
 
     <p>子元素居中排列</p>
     <Row type="flex" justify="center">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
     </Row>
 
     <p>子元素居右排列</p>
     <Row type="flex" justify="end">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
     </Row>
 
     <p>子元素等宽排列</p>
     <Row type="flex" justify="space-between">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
     </Row>
 
     <p>子元素分散对齐</p>
     <Row type="flex" justify="space-around">
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
-      <Col span={4}>.col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
+      <Col span={4}>.ant-col-4</Col>
     </Row>
   </div>,
   mountNode

components/layout/demo/gutter.md

@@ -12,16 +12,16 @@ ReactDOM.render(
   <div className="gutter-example">
     <Row gutter={16}>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.col-6</div>
+        <div className="gutter-box">.ant-col-6</div>
       </Col>
     </Row>
   </div>
@@ -29,7 +29,7 @@ ReactDOM.render(
 ````
 
 ````css
-.gutter-example .row > div {
+.gutter-example .ant-row > div {
   background: transparent;
   border: 0;
 }

components/layout/demo/offset.md

@@ -13,15 +13,15 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={8}>.col-8</Col>
-      <Col span={8} offset={8}>.col-8</Col>
+      <Col span={8}>.ant-col-8</Col>
+      <Col span={8} offset={8}>.ant-col-8</Col>
     </Row>
     <Row>
-      <Col span={6} offset={6}>.col-6 .col-offset-6</Col>
-      <Col span={6} offset={6}>.col-6 .col-offset-6</Col>
+      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
+      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
     </Row>
     <Row>
-      <Col span={12} offset={6}>.col-12 .col-offset-6</Col>
+      <Col span={12} offset={6}>.ant-col-12 .ant-col-offset-6</Col>
     </Row>
   </div>,
   mountNode

components/layout/demo/sort.md

@@ -13,8 +13,8 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={18} push={6}>.col-18 .col-push-6</Col>
-      <Col span={6} pull={18}>.col-6 .col-pull-18</Col>
+      <Col span={18} push={6}>.ant-col-18 .ant-col-push-6</Col>
+      <Col span={6} pull={18}>.ant-col-6 .ant-col-pull-18</Col>
     </Row>
   </div>,
   mountNode

components/layout/index.md

@@ -11,49 +11,49 @@ english: Layout
 ## 设计理念
 
 <div class="layout-demo">
-<div class="row demo-row">
-  <div class="col-24 demo-col demo-col-1">
+<div class="ant-row demo-row">
+  <div class="ant-col-24 demo-col demo-col-1">
     100%
   </div>
 </div>
-<div class="row demo-row">
-  <div class="col-6 demo-col demo-col-2">
+<div class="ant-row demo-row">
+  <div class="ant-col-6 demo-col demo-col-2">
     25%
   </div>
-  <div class="col-6 demo-col demo-col-3">
+  <div class="ant-col-6 demo-col demo-col-3">
     25%
   </div>
-  <div class="col-6 demo-col demo-col-2">
+  <div class="ant-col-6 demo-col demo-col-2">
     25%
   </div>
-  <div class="col-6 demo-col demo-col-3">
+  <div class="ant-col-6 demo-col demo-col-3">
     25%
   </div>
 </div>
-<div class="row demo-row">
-  <div class="col-8 demo-col demo-col-4">
+<div class="ant-row demo-row">
+  <div class="ant-col-8 demo-col demo-col-4">
     33.33%
   </div>
-  <div class="col-8 demo-col demo-col-5">
+  <div class="ant-col-8 demo-col demo-col-5">
     33.33%
   </div>
-  <div class="col-8 demo-col demo-col-4">
+  <div class="ant-col-8 demo-col demo-col-4">
     33.33%
   </div>
 </div>
-<div class="row demo-row">
-  <div class="col-12 demo-col demo-col-1">
+<div class="ant-row demo-row">
+  <div class="ant-col-12 demo-col demo-col-1">
     50%
   </div>
-  <div class="col-12 demo-col demo-col-3">
+  <div class="ant-col-12 demo-col demo-col-3">
     50%
   </div>
 </div>
-<div class="row demo-row">
-  <div class="col-16 demo-col demo-col-4">
+<div class="ant-row demo-row">
+  <div class="ant-col-16 demo-col demo-col-4">
     66.66%
   </div>
-  <div class="col-8 demo-col demo-col-5">
+  <div class="ant-col-8 demo-col demo-col-5">
     33.33%
   </div>
 </div>
@@ -69,7 +69,7 @@ english: Layout
 
 * 通过`row`在水平方向建立一组`column`（简写col）
 * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
-* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
+* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.ant-col-8`来创建
 * 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
 
 ## Flex 布局

components/layout/row.jsx

@@ -16,10 +16,10 @@ export default class Row extends React.Component {
   render() {
     const { type, justify, align, className, gutter, style, children, ...others } = this.props;
     const classes = classNames({
-      row: !type,
-      [`row-${type}`]: type,
-      [`row-${type}-${justify}`]: justify,
-      [`row-${type}-${align}`]: align,
+      'ant-row': !type,
+      [`ant-row-${type}`]: type,
+      [`ant-row-${type}-${justify}`]: justify,
+      [`ant-row-${type}-${align}`]: align,
       [className]: className,
     });
     const rowStyle = gutter > 0 ? {

components/layout/style/index.less

@@ -3,12 +3,12 @@
 @import "./mixin";
 
 // Grid system
-.row {
+.ant-row {
   .make-row();
   display: block;
 }
 
-.row-flex {
+.ant-row-flex {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -20,46 +20,46 @@
 }
 
 // x轴原点
-.row-flex-start {
+.ant-row-flex-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.row-flex-center {
+.ant-row-flex-center {
   justify-content: center;
 }
 
 // x轴反方向
-.row-flex-end {
+.ant-row-flex-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.row-flex-space-between {
+.ant-row-flex-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.row-flex-space-around {
+.ant-row-flex-space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.row-flex-top {
+.ant-row-flex-top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.row-flex-middle {
+.ant-row-flex-middle {
   align-items: center;
 }
 
 // 底部对齐
-.row-flex-bottom {
+.ant-row-flex-bottom {
   align-items: flex-end;
 }
 
-.col {
+.ant-col {
   position: relative;
   display: block;
 }

components/layout/style/mixin.less

@@ -12,11 +12,11 @@
 
 .make-grid-columns() {
   .col(@index) {
-    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) {
@@ -33,11 +33,11 @@
 
 .float-grid-columns(@class) {
   .col(@index) { // initial
-    @item: ~".col@{class}-@{index}";
+    @item: ~".ant-col@{class}-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) { // general
-    @item: ~".col@{class}-@{index}";
+    @item: ~".ant-col@{class}-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -51,33 +51,33 @@
 
 // lesshint false
 .loop-grid-columns(@index, @class) when (@index > 0) {
-  .col@{class}-@{index} {
+  .ant-col@{class}-@{index} {
     display: block;
     width: percentage((@index / @grid-columns));
   }
-  .col@{class}-push-@{index} {
+  .ant-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
-  .col@{class}-pull-@{index} {
+  .ant-col@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
-  .col@{class}-offset-@{index} {
+  .ant-col@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
-  .col@{class}-order-@{index} {
+  .ant-col@{class}-order-@{index} {
     order: @index;
   }
   .loop-grid-columns((@index - 1), @class);
 }
 
 .loop-grid-columns(@index, @class) when (@index = 0) {
-  .col@{class}-@{index} {
+  .ant-col@{class}-@{index} {
     display: none;
   }
-  .col-push-@{index} {
+  .ant-col-push-@{index} {
     left: auto;
   }
-  .col-pull-@{index} {
+  .ant-col-pull-@{index} {
     right: auto;
   }
 }

site/theme/static/markdown.less

@@ -188,14 +188,14 @@
     background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%,  transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%,  transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
     overflow: hidden;
   }
-  .row-flex,
-  .code-box-demo .row-flex {
+  .ant-row-flex,
+  .code-box-demo .ant-row-flex {
     background: #F5F5F5;
   }
-  .row > div,
-  .code-box-demo .row > div,
-  .row-flex > div,
-  .code-box-demo .row-flex > div {
+  .ant-row > div,
+  .code-box-demo .ant-row > div,
+  .ant-row-flex > div,
+  .code-box-demo .ant-row-flex > div {
     padding: 5px 0;
     text-align: center;
     border-radius: 6px;
@@ -204,13 +204,13 @@
     margin-bottom: 10px;
     color: #fff;
   }
-  .code-box-demo .row > div:not(.gutter-row),
-  .code-box-demo .row-flex > div:not(.gutter-row) {
+  .code-box-demo .ant-row > div:not(.gutter-row),
+  .code-box-demo .ant-row-flex > div:not(.gutter-row) {
     background: #6AC2F5;
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
-  .row .demo-col,
-  .code-box-demo .row .demo-col {
+  .ant-row .demo-col,
+  .code-box-demo .ant-row .demo-col {
     text-align: center;
     padding: 40px 0;
     color: #fff;
@@ -219,25 +219,25 @@
     margin-top: 0;
     margin-bottom: 0;
   }
-  .row .demo-col-1,
-  .row .demo-col-1 {
+  .ant-row .demo-col-1,
+  .ant-row .demo-col-1 {
     background: rgba(29, 128, 211, 0.7);
   }
-  .row .demo-col-2,
-  .code-box-demo .row .demo-col-2 {
+  .ant-row .demo-col-2,
+  .code-box-demo .ant-row .demo-col-2 {
     background: rgba(29, 128, 211, 0.5);
   }
-  .row .demo-col-3,
-  .code-box-demo .row .demo-col-3{
+  .ant-row .demo-col-3,
+  .code-box-demo .ant-row .demo-col-3{
     background: rgba(255, 255, 255, 0.2);
     color: #999;
   }
-  .row .demo-col-4,
-  .code-box-demo .row .demo-col-4 {
+  .ant-row .demo-col-4,
+  .code-box-demo .ant-row .demo-col-4 {
     background: rgba(29, 128, 211, 0.6);
   }
-  .row .demo-col-5,
-  .code-box-demo .row .demo-col-5 {
+  .ant-row .demo-col-5,
+  .code-box-demo .ant-row .demo-col-5 {
     background: rgba(255, 255, 255, 0.5);
     color: #999;
   }

tests/layout.test.js

@@ -15,13 +15,13 @@ describe('Layout', function() {
       <Col span="2"></Col>
     );
     const colNode = TestUtils.findRenderedDOMComponentWithTag(col, 'DIV');
-    expect(colNode.className).toBe('col-2');
+    expect(colNode.className).toBe('ant-col-2');
   });
   it('should render Row', () => {
     const row = TestUtils.renderIntoDocument(
       <Row></Row>
     );
     const rowNode = TestUtils.findRenderedDOMComponentWithTag(row, 'DIV');
-    expect(rowNode.className).toBe('row');
+    expect(rowNode.className).toBe('ant-row');
   });
 });