feat: optimize radio

hellof2e · Jun 9, 2023 · 9fe1d7f · 9fe1d7f
1 parent 0364556
commit 9fe1d7f
Show file tree

Hide file tree

Showing 10 changed files with 10,530 additions and 10,857 deletions.
diff --git a/packages/quarkd/CHANGELOG.md b/packages/quarkd/CHANGELOG.md
@@ -1,5 +1,12 @@
 # 更新日志
 
+### [1.0.61](https://github.com/hellof2e/quark-design/compare/v1.0.60...v1.0.61) (2023-06-09)
+
+### 🎉 Features
+
+- update ([282df05](https://github.com/hellof2e/quark-design/commit/282df052ffb991fb119e6f81a439597a67d2e21c))
+- update quarkd version ([b8bfc05](https://github.com/hellof2e/quark-design/commit/b8bfc0538dba7942fda15b34da252cc486c148d6))
+
 ### [1.0.60](https://github.com/hellof2e/quark-design/compare/v1.0.59...v1.0.60) (2023-06-05)
 
 ### 🎉 Features

diff --git a/packages/quarkd/package.json b/packages/quarkd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quarkd",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Mobile UI Components built on Web Components.",
   "main": "lib/index.js",
   "module": "lib/index.js",

diff --git a/packages/quarkd/src/docs b/packages/quarkd/src/docs
@@ -1,14 +1,21 @@
 # 更新日志
-### [1.0.60](https://github.com/hellof2e/quark-design/compare/v1.0.59...v1.0.60) (2023-06-05)
+### [1.0.61](https://github.com/hellof2e/quark-design/compare/v1.0.60...v1.0.61) (2023-06-09)
+
+
+### 🎉 Features
+
+* update ([282df05](https://github.com/hellof2e/quark-design/commit/282df052ffb991fb119e6f81a439597a67d2e21c))
+* update quarkd version ([b8bfc05](https://github.com/hellof2e/quark-design/commit/b8bfc0538dba7942fda15b34da252cc486c148d6))
 
+### [1.0.60](https://github.com/hellof2e/quark-design/compare/v1.0.59...v1.0.60) (2023-06-05)
 
 ### 🎉 Features
 
-* optimize button & tooltip ([c0239af](https://github.com/hellof2e/quark-design/commit/c0239af30237232f9542e8589b6e5934b68368bc))
-* update demo ([de6d98e](https://github.com/hellof2e/quark-design/commit/de6d98e19bd539098422c69be4d19da2963193e7))
-* update quarkc dependence ([b11d3a5](https://github.com/hellof2e/quark-design/commit/b11d3a533f1f8826d6625b347553cdfab4959146))
-* update quarkd ([8e10a6c](https://github.com/hellof2e/quark-design/commit/8e10a6c0b896bbf1d8b75c3826e520432e6c8628))
-* 新文档链接 update ([5268651](https://github.com/hellof2e/quark-design/commit/5268651449110602f1f219f2847b8a38db5de2de))
+- optimize button & tooltip ([c0239af](https://github.com/hellof2e/quark-design/commit/c0239af30237232f9542e8589b6e5934b68368bc))
+- update demo ([de6d98e](https://github.com/hellof2e/quark-design/commit/de6d98e19bd539098422c69be4d19da2963193e7))
+- update quarkc dependence ([b11d3a5](https://github.com/hellof2e/quark-design/commit/b11d3a533f1f8826d6625b347553cdfab4959146))
+- update quarkd ([8e10a6c](https://github.com/hellof2e/quark-design/commit/8e10a6c0b896bbf1d8b75c3826e520432e6c8628))
+- 新文档链接 update ([5268651](https://github.com/hellof2e/quark-design/commit/5268651449110602f1f219f2847b8a38db5de2de))
 
 ### [1.0.59](https://github.com/hellof2e/quark-design/compare/v1.0.58...v1.0.59) (2023-05-23)
 

diff --git a/packages/quarkd/src/radio/doc-react.en-US.md b/packages/quarkd/src/radio/doc-react.en-US.md
@@ -126,5 +126,6 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--radio-font-size`    | radio label font size                           | `12px`                      |
 | `--radio-color`        | radio label font color                          | `#242729 `                  |
 | `--radio-label-height` | radio label line-height                         | same as the height of radio |
+| `--radio-label-gap`    | radio label gap                                 | `8px`                       |
 | `--radio-size`         | radio size，Priority is higher than `size` prop | `16px; big: 20px`           |
 | `--radio-background`   | checked color                                   | `#0088ff`                   |
diff --git a/packages/quarkd/src/radio/doc-react.zh-CN.md b/packages/quarkd/src/radio/doc-react.zh-CN.md
@@ -122,5 +122,6 @@ export default () => {
 | `--radio-font-size`    | radio 文字大小                         | `12px`            |
 | `--radio-color`        | radio 文字颜色                         | `#242729 `        |
 | `--radio-label-height` | radio 文字行高                         | 和选择框高度一致  |
+| `--radio-label-gap`    | radio 与文字间距                       | `8px`             |
 | `--radio-size`         | radio 单选框尺寸，优先级高于 size 属性 | `16px; big: 20px` |
 | `--radio-background`   | radio 选中颜色                         | `#0088ff`         |
diff --git a/packages/quarkd/src/radio/doc.en-US.md b/packages/quarkd/src/radio/doc.en-US.md
@@ -118,5 +118,6 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--radio-font-size`    | radio label font size                           | `12px`                      |
 | `--radio-color`        | radio label font color                          | `#242729 `                  |
 | `--radio-label-height` | radio label line-height                         | same as the height of radio |
+| `--radio-label-gap`    | radio label gap                                 | `8px`                       |
 | `--radio-size`         | radio size，Priority is higher than `size` prop | `16px; big: 20px`           |
 | `--radio-background`   | checked color                                   | `#0088ff`                   |
diff --git a/packages/quarkd/src/radio/doc.zh-CN.md b/packages/quarkd/src/radio/doc.zh-CN.md
@@ -116,5 +116,6 @@ export default {
 | `--radio-font-size`    | radio 文字大小                         | `12px`            |
 | `--radio-color`        | radio 文字颜色                         | `#242729 `        |
 | `--radio-label-height` | radio 文字行高                         | 和选择框高度一致  |
+| `--radio-label-gap`    | radio 与文字间距                       | `8px`             |
 | `--radio-size`         | radio 单选框尺寸，优先级高于 size 属性 | `16px; big: 20px` |
 | `--radio-background`   | radio 选中颜色                         | `#0088ff`         |
diff --git a/packages/quarkd/src/radio/index.tsx b/packages/quarkd/src/radio/index.tsx
@@ -86,10 +86,30 @@ class QuarkRadio extends QuarkElement {
         <span class="quark-radio-container">
           <input type="checkbox" />
           <span class="quark-radio-show"></span>
-          <img
+          <svg
             class="quark-radio-icon"
-            src="https://m.hellobike.com/resource/quark/images/Kr6fLjveFHjjvVXIfDwye.png"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+            width="40px"
+            height="40px"
+            viewBox="0 0 40 40"
+            version="1.1"
+          >
+            <title>画板</title>
+            <g
+              id="画板"
+              stroke="none"
+              stroke-width="1"
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <path
+                d="M28.5857864,13.5857864 C29.366835,12.8047379 30.633165,12.8047379 31.4142136,13.5857864 C32.1952621,14.366835 32.1952621,15.633165 31.4142136,16.4142136 L19.9142136,27.9142136 C19.133165,28.6952621 17.866835,28.6952621 17.0857864,27.9142136 L10.5857864,21.4142136 C9.80473785,20.633165 9.80473785,19.366835 10.5857864,18.5857864 C11.366835,17.8047379 12.633165,17.8047379 13.4142136,18.5857864 L18.5,23.671 L28.5857864,13.5857864 Z"
+                id="路径-5"
+                fill="#FFFFFF"
+                fill-rule="nonzero"
+              />
+            </g>
+          </svg>
           <span class="disabled"></span>
         </span>
         <label class={this.classNames}>

diff --git a/packages/quarkd/src/radio/style.css b/packages/quarkd/src/radio/style.css
@@ -1,6 +1,6 @@
 :host {
-  font-size: var(--radio-font-size, 12px);
-  color: var(--radio-color, #242729);
+  font-size: var(--radio-font-size, 16px);
+  color: var(--radio-color, #333);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -10,10 +10,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--radio-label-gap, 8px)
 }
 
 :host label {
-  margin-left: 4px;
   height: var(--radio-label-height, 100%);
   display: inline-flex;
   align-items: center;
@@ -27,8 +27,8 @@
 :host .quark-radio-container {
   position: relative;
   display: inline-flex;
-  height: var(--radio-size, 16px);
-  width: var(--radio-size, 16px);
+  height: var(--radio-size, 20px);
+  width: var(--radio-size, 20px);
 }
 
 :host .quark-radio-icon {
@@ -37,7 +37,6 @@
   left: 0;
   height: 100%;
   width: 100%;
-  /* z-index: 1; */
   visibility: hidden;
   opacity: 0;
   transition-duration: 0.2s;