feat: support icon only in segmented (ant-design#35256)

* feat: support icon only with segmented * fix: lint issue * chore: update * test: fix * test: update snapshot
infra-fe · Apr 28, 2022 · eee3b50 · eee3b50
1 parent 5a6b3cc
commit eee3b50
Show file tree

Hide file tree

Showing 14 changed files with 324 additions and 18 deletions.
diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -644,6 +644,84 @@ Array [
 ]
 `;
 
+exports[`renders ./components/segmented/demo/icon-only.md extend context correctly 1`] = `
+<div
+  class="ant-segmented"
+>
+  <label
+    class="ant-segmented-item ant-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="bars"
+          class="anticon anticon-bars"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="bars"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </label>
+  <label
+    class="ant-segmented-item"
+  >
+    <input
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </label>
+</div>
+`;
+
 exports[`renders ./components/segmented/demo/size.md extend context correctly 1`] = `
 Array [
   <div

diff --git a/components/segmented/__tests__/__snapshots__/demo.test.js.snap b/components/segmented/__tests__/__snapshots__/demo.test.js.snap
@@ -644,6 +644,84 @@ Array [
 ]
 `;
 
+exports[`renders ./components/segmented/demo/icon-only.md correctly 1`] = `
+<div
+  class="ant-segmented"
+>
+  <label
+    class="ant-segmented-item ant-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="bars"
+          class="anticon anticon-bars"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="bars"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </label>
+  <label
+    class="ant-segmented-item"
+  >
+    <input
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </label>
+</div>
+`;
+
 exports[`renders ./components/segmented/demo/size.md correctly 1`] = `
 Array [
   <div

diff --git a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap
@@ -631,6 +631,87 @@ exports[`Segmented render segmented: disabled 1`] = `
 </div>
 `;
 
+exports[`Segmented render with icons 1`] = `
+<div
+  class="ant-segmented"
+>
+  <label
+    class="ant-segmented-item ant-segmented-item-selected"
+  >
+    <input
+      checked=""
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="bars"
+          class="anticon anticon-bars"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="bars"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </label>
+  <label
+    class="ant-segmented-item"
+  >
+    <input
+      class="ant-segmented-item-input"
+      type="radio"
+    />
+    <div
+      class="ant-segmented-item-label"
+    >
+      <span
+        class="ant-segmented-item-icon"
+      >
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        KanbanYes
+      </span>
+    </div>
+  </label>
+</div>
+`;
+
 exports[`Segmented rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   class="ant-segmented ant-segmented-rtl"

diff --git a/components/segmented/__tests__/index.test.tsx b/components/segmented/__tests__/index.test.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
+
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Segmented from '../index';
@@ -86,10 +88,7 @@ describe('Segmented', () => {
   it('render segmented with string options', () => {
     const handleValueChange = jest.fn();
     const wrapper = mount(
-      <Segmented
-        options={['Daily', 'Weekly', 'Monthly']}
-        onChange={handleValueChange}
-      />,
+      <Segmented options={['Daily', 'Weekly', 'Monthly']} onChange={handleValueChange} />,
     );
     expect(wrapper.render()).toMatchSnapshot();
 
@@ -356,4 +355,25 @@ describe('Segmented', () => {
 
     expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-lg`)).toBeTruthy();
   });
+
+  it('render with icons', () => {
+    const wrapper = mount(
+      <Segmented
+        options={[
+          {
+            value: 'List',
+            icon: <BarsOutlined />,
+          },
+          {
+            value: 'Kanban',
+            label: 'KanbanYes',
+            icon: <AppstoreOutlined />,
+          },
+        ]}
+      />,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.find(`span.${prefixCls}-item-icon`).length).toBe(2);
+    expect(wrapper.find(`div.${prefixCls}-item-label`).at(1).contains('KanbanYes')).toBeTruthy();
+  });
 });
diff --git a/components/segmented/demo/block.md b/components/segmented/demo/block.md
@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 1
 title:
   zh-CN: Block 分段选择器
   en-US: Block Segmented

diff --git a/components/segmented/demo/controlled.md b/components/segmented/demo/controlled.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 3
 title:
   zh-CN: 受控模式
   en-US: Controlled mode

diff --git a/components/segmented/demo/custom.md b/components/segmented/demo/custom.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 4
 title:
   zh-CN: 自定义渲染
   en-US: Custom Render

diff --git a/components/segmented/demo/disabled.md b/components/segmented/demo/disabled.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 2
 title:
   zh-CN: 不可用
   en-US: Basic

diff --git a/components/segmented/demo/dynamic.md b/components/segmented/demo/dynamic.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 5
 title:
   zh-CN: 动态数据
   en-US: Dynamic

diff --git a/components/segmented/demo/icon-only.md b/components/segmented/demo/icon-only.md
@@ -0,0 +1,34 @@
+---
+order: 8
+title:
+  zh-CN: 只设置图标
+  en-US: With Icon only
+---
+
+## zh-CN
+
+在 Segmented Item 选项中只设置 Icon。
+
+## en-US
+
+Set `icon` without `label` for Segmented Item.
+
+```jsx
+import { Segmented } from 'antd';
+import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
+
+export default () => (
+  <Segmented
+    options={[
+      {
+        value: 'List',
+        icon: <BarsOutlined />,
+      },
+      {
+        value: 'Kanban',
+        icon: <AppstoreOutlined />,
+      },
+    ]}
+  />
+);
+```
diff --git a/components/segmented/demo/size.md b/components/segmented/demo/size.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 6
 title:
   zh-CN: 三种大小
   en-US: Three sizes of Segmented

diff --git a/components/segmented/demo/with-icon.md b/components/segmented/demo/with-icon.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 7
 title:
   zh-CN: 设置图标
   en-US: With Icon