Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v14): button adaptation #2737

Merged
merged 4 commits into from
Nov 20, 2024
Merged

feat(v14): button adaptation #2737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e74ac16
feat(v14): button adaptation
oasis-cloud Nov 12, 2024
26f283b
fix: review
oasis-cloud Nov 20, 2024
d64862b
fix: review and update docs
oasis-cloud Nov 20, 2024
d18acfb
fix: review and update docs
oasis-cloud Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 36 additions & 19 deletions src/packages/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.nut-button {
position: relative;
display: flex;
display: inline-block;
/* #ifdef rn harmony*/
width: 80px;
/* #endif */
Expand All @@ -21,9 +20,9 @@
text-align: center;
cursor: pointer;
transition: $button-transition;
-webkit-appearance: none;
user-select: none;
touch-action: manipulation;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: $button-default-color;
background: $button-default-background-color;
Expand Down Expand Up @@ -99,6 +98,23 @@
padding: 0;
}

&-round {
border-radius: $button-border-radius;

&-xlarge,
&-large {
border-radius: $button-large-border-radius;
}

&-small {
border-radius: $button-small-border-radius;
}

&-mini {
border-radius: $button-mini-border-radius;
}
}

&-default {
padding: $button-default-padding;
border-style: solid;
Expand Down Expand Up @@ -136,6 +152,14 @@
padding: $button-xlarge-padding;
font-size: $button-xlarge-font-size;
font-weight: $button-large-font-weight;
border-radius: $radius-base;

Comment on lines +155 to +156
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议统一边框圆角变量的使用

当前代码中边框圆角的变量使用不统一：

  • xlarge 和 large 使用 $radius-base
  • small 和 mini 使用 $radius-s

建议：

  1. 统一使用同一个变量，或
  2. 为不同尺寸定义专门的按钮圆角变量（如 $button-large-radius）
  &-xlarge {
    height: $button-xlarge-height;
    padding: $button-xlarge-padding;
    font-size: $button-xlarge-font-size;
    font-weight: $button-large-font-weight;
-   border-radius: $radius-base;
+   border-radius: $button-xlarge-radius;

    // ... other styles
  }

  &-large {
    height: $button-large-height;
    padding: $button-large-padding;
    font-size: $button-large-font-size;
    font-weight: $button-large-font-weight;
-   border-radius: $radius-base;
+   border-radius: $button-large-radius;

    // ... other styles
  }

  &-small {
    height: $button-small-height;
    padding: $button-small-padding;
    font-size: $button-small-font-size;
-   border-radius: $radius-s;
+   border-radius: $button-small-radius;

    // ... other styles
  }

  &-mini {
    height: $button-mini-height;
    padding: $button-mini-padding;
    font-size: $button-mini-font-size;
-   border-radius: $radius-s;
+   border-radius: $button-mini-radius;

    // ... other styles
  }

Also applies to: 180-181, 205-205, 222-222

.nut-button-text {
margin-left: $button-xlarge-text-icon-margin;
&-right {
margin-right: $button-xlarge-text-icon-margin;
}
}
Comment on lines +157 to +162
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

修复大号按钮图标间距变量使用错误

在 large 尺寸按钮中错误使用了 xlarge 的间距变量：

.nut-button-text {
  margin-left: $button-xlarge-text-icon-margin;  // 错误使用
  &-right {
    margin-right: $button-xlarge-text-icon-margin;  // 错误使用
  }
}

建议修复为：

  &-large {
    // ... other styles
    .nut-button-text {
-     margin-left: $button-xlarge-text-icon-margin;
+     margin-left: $button-large-text-icon-margin;
      &-right {
-       margin-right: $button-xlarge-text-icon-margin;
+       margin-right: $button-large-text-icon-margin;
      }
    }
  }

Also applies to: 182-187


.nut-icon {
font-size: $button-xlarge-font-size;
Expand All @@ -153,6 +177,14 @@
padding: $button-large-padding;
font-size: $button-large-font-size;
font-weight: $button-large-font-weight;
border-radius: $radius-base;

.nut-button-text {
margin-left: $button-xlarge-text-icon-margin;
&-right {
margin-right: $button-xlarge-text-icon-margin;
}
}

.nut-icon {
font-size: $button-large-font-size;
Expand All @@ -170,6 +202,7 @@
height: $button-small-height;
padding: $button-small-padding;
font-size: $button-small-font-size;
border-radius: $radius-s;

.nut-icon {
font-size: $button-small-font-size;
Expand All @@ -186,6 +219,7 @@
height: $button-mini-height;
padding: $button-mini-padding;
font-size: $button-mini-font-size;
border-radius: $radius-s;

.nut-icon {
font-size: $button-mini-font-size;
Expand Down Expand Up @@ -412,23 +446,6 @@
opacity: 0.9;
}

&-round {
border-radius: $button-border-radius;

&-xlarge,
&-large {
border-radius: $button-large-border-radius;
}

&-small {
border-radius: $button-small-border-radius;
}

&-mini {
border-radius: $button-mini-border-radius;
}
}

&-square {
border-radius: $button-square-border-radius;
}
Expand Down
48 changes: 24 additions & 24 deletions src/packages/button/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,27 +125,27 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default |
| --- | --- | --- |
| \--nutui-button-border-radius | Rounded corners of the button | `24px` |
| \--nutui-button-border-width | Button border width | `1px` |
| \--nutui-button-normal-padding | The padding of the button whose size is normal | `0px 16px` |
| \--nutui-button-default-height | The height of the button whose type is default | `32px` |
| \--nutui-button-default-color | The text color of the button whose type is default | `$color-title` |
| \--nutui-button-default-background-color | The background color of the button whose type is default | `$white` |
| \--nutui-button-default-border-color | The border color of the button whose type is default | `$color-text` |
| \--nutui-button-default-disabled | The color of the button whose type is default and whose status is disable | `$color-text-disabled` |
| \--nutui-button-default-disabled-color | The text color of the button whose type is default and whose status is disable | `$color-text-help` |
| \--nutui-button-default-padding | padding of buttons with type default | `0 16px` |
| \--nutui-button-default-font-size | The font size of the button whose type is default | `$font-size-base` |
| \--nutui-button-default-font-weight | The font weight of the button whose type is default | `$font-weight` |
| \--nutui-button-large-height | The height of the button whose size is large | `40px` |
| \--nutui-button-large-font-size | The font size of buttons whose size is large | `$button-default-font-size` |
| \--nutui-button-small-border-radius | The border radius of buttons whose size is large | `24px` |
| \--nutui-button-small-padding | Padding for small buttons | `0 12px` |
| \--nutui-button-small-height | The height of the button whose size is small | `28px` |
| \--nutui-button-small-font-size | The font size of the button whose size is small | `$font-size-s` |
| \--nutui-button-small-border-radius | The border radius of buttons whose size is small | `24px` |
| \--nutui-button-mini-padding | Padding for buttons with size mini | `0 12px` |
| \--nutui-button-mini-height | The height of the button whose size is mini | `24px` |
| \--nutui-button-mini-font-size | The font size of the button whose size is mini | `$font-size-s` |
| \--nutui-button-mini-border-radius | The border radius of buttons whose size is mini | `24px` |
| \--nutui-button-text-icon-margin | margin of text with icon button | `4px` |
| \--nutui-button-border-radius | Button rounded corner settings | `8px` |
| \--nutui-button-border-width | The border width of the button | `1px` |
| \--nutui-button-normal-padding | padding value when size normal | `0px 12px` |
| \--nutui-button-default-height | The height of the button with type default | `32px` |
| \--nutui-button-default-color | The text color of the button with type default | `$color-title` |
| \--nutui-button-default-background-color | The background color of the button with type default | `transparent` |
| \--nutui-button-default-border-color | The border color of the button with type default | `$color-text` |
| \--nutui-button-default-disabled | Disabled color for buttons of type default | `$color-text-disabled` |
| \--nutui-button-default-disabled-color | Disabled text color for buttons of type default | `$color-text-help` |
| \--nutui-button-default-padding | Padding for buttons of type default | `0 12px` |
| \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
| \--nutui-button-default-font-weight | The font weight of the button with type default | `$font-weight` |
| \--nutui-button-large-height | The height of the button with size large | `40px` |
| \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |
| \--nutui-button-small-padding | Padding for buttons of size small | `0 8px` |
| \--nutui-button-small-height | The height of the button with size small | `28px` |
| \--nutui-button-small-font-size | The font size of the button with size small | `$font-size-s` |
| \--nutui-button-small-border-radius | Rounded corners for buttons with size small | `8px` |
| \--nutui-button-mini-padding | Padding for buttons with size mini | `0 8px` |
| \--nutui-button-mini-height | size is the height of the mini button | `24px` |
| \--nutui-button-mini-font-size | The font size of the button with size mini | `$font-size-xs` |
| \--nutui-button-mini-border-radius | The rounded corners of the button with size mini | `6px` |
| \--nutui-button-text-icon-margin | Margin of text with icon button | `4px` |
22 changes: 11 additions & 11 deletions src/packages/button/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,27 +124,27 @@ import { Button } from '@nutui/nutui-react'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-button-border-radius | 按钮的圆角设置 | `24px` |
| \--nutui-button-border-radius | 按钮的圆角设置 | `8px` |
| \--nutui-button-border-width | 按钮的边框宽度 | `1px` |
| \--nutui-button-normal-padding | size normal时的padding值 | `0px 16px` |
| \--nutui-button-normal-padding | size normal时的padding值 | `0px 12px` |
| \--nutui-button-default-height | type 为 default 的按钮的高度 | `32px` |
| \--nutui-button-default-color | type 为 default 的按钮的文本色 | `$color-title` |
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` |
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `transparent` |
| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` |
| \--nutui-button-default-disabled | type 为 default 的按钮的禁用色 | `$color-text-disabled` |
| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 16px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-base` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `24px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` |
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 8px` |
| \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-s` |
| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `24px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` |
| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `8px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 8px` |
| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-s` |
| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-xs` |
| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `6px` |
| \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
22 changes: 11 additions & 11 deletions src/packages/button/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,27 +137,27 @@ import { Button } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-button-border-radius | 按钮的圆角设置 | `24px` |
| \--nutui-button-border-radius | 按钮的圆角设置 | `8px` |
| \--nutui-button-border-width | 按钮的边框宽度 | `1px` |
| \--nutui-button-normal-padding | size normal时的padding值 | `0px 16px` |
| \--nutui-button-normal-padding | size normal时的padding值 | `0px 12px` |
| \--nutui-button-default-height | type 为 default 的按钮的高度 | `32px` |
| \--nutui-button-default-color | type 为 default 的按钮的文本色 | `$color-title` |
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` |
| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `transparent` |
| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` |
| \--nutui-button-default-disabled | type 为 default 的按钮的禁用色 | `$color-text-disabled` |
| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 16px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-base` |
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `24px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` |
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 8px` |
| \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-s` |
| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `24px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` |
| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `8px` |
| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 8px` |
| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-s` |
| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `24px` |
| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-xs` |
| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `6px` |
| \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
28 changes: 14 additions & 14 deletions src/packages/button/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,27 +125,27 @@ import { Button } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-button-border-radius | 按鈕的圓角設置 | `24px` |
| \--nutui-button-border-radius | 按鈕的圓角設定 | `8px` |
| \--nutui-button-border-width | 按鈕的邊框寬度 | `1px` |
| \--nutui-button-normal-padding | size normal時的padding值 | `0px 16px` |
| \--nutui-button-normal-padding | size normal時的padding值 | `0px 12px` |
| \--nutui-button-default-height | type 為 default 的按鈕的高度 | `32px` |
| \--nutui-button-default-color | type 為 default 的按鈕的文本色 | `$color-title` |
| \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 | `$white` |
| \--nutui-button-default-color | type 為 default 的按鈕的文字色 | `$color-title` |
| \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 | `transparent` |
| \--nutui-button-default-border-color | type 為 default 的按鈕的邊框色 | `$color-text` |
| \--nutui-button-default-disabled | type 為 default 的按鈕的禁用色 | `$color-text-disabled` |
| \--nutui-button-default-disabled-color | type 為 default 的按鈕的禁用色文本色 | `$color-text-help` |
| \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 16px` |
| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-base` |
| \--nutui-button-default-disabled-color | type 為 default 的按鈕的停用文字色 | `$color-text-help` |
| \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 12px` |
| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-s` |
| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight` |
| \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
| \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `24px` |
| \--nutui-button-small-padding | size 為 small 的按鈕的內邊距 | `0 12px` |
| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `12px` |
| \--nutui-button-small-padding | size 為 small 的按鈕的內邊距 | `0 8px` |
| \--nutui-button-small-height | size 為 small 的按鈕的高度 | `28px` |
| \--nutui-button-small-font-size | size 為 small 的按鈕的字號 | `$font-size-s` |
| \--nutui-button-small-border-radius | size 為 small 的按鈕的圓角 | `24px` |
| \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 12px` |
| \--nutui-button-small-border-radius | size 為 small 的按鈕的圓角 | `8px` |
| \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 8px` |
| \--nutui-button-mini-height | size 為 mini 的按鈕的高度 | `24px` |
| \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-size-s` |
| \--nutui-button-mini-border-radius | size 為 mini 的按鈕的圓角 | `24px` |
| \--nutui-button-text-icon-margin | 帶 icon按鈕的文本的邊距 | `4px` |
| \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-size-xs` |
| \--nutui-button-mini-border-radius | size 為 mini 的按鈕的圓角 | `6px` |
| \--nutui-button-text-icon-margin | 有 icon按鈕的文字的邊距 | `4px` |
23 changes: 13 additions & 10 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ $button-default-disabled-color: var(
$button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default;
$button-default-font-size: var(
--nutui-button-default-font-size,
$font-size-base
$font-size-s
) !default;
$button-default-font-weight: var(
--nutui-button-default-font-weight,
Expand All @@ -240,14 +240,14 @@ $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
$button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
$button-xlarge-font-size: var(
--nutui-button-xlarge-font-size,
$font-size-xxl
$font-size-xl
) !default;

$button-large-height: var(--nutui-button-large-height, 40px) !default;
$button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
$button-large-font-size: var(
--nutui-button-large-font-size,
$font-size-l
$font-size-base
) !default;
$button-large-font-weight: var(
--nutui-button-large-font-weight,
Expand All @@ -273,7 +273,7 @@ $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
$button-mini-height: var(--nutui-button-mini-height, 24px) !default;
$button-mini-font-size: var(
--nutui-button-mini-font-size,
$font-size-s
$font-size-xs
) !default;
$button-mini-border-radius: var(
--nutui-button-mini-border-radius,
Expand All @@ -288,13 +288,12 @@ $button-primary-border-color: var(
--nutui-button-primary-border-color,
$color-primary
) !default;
$button-primary-background-color: $color-primary;
$button-primary-background-color: linear-gradient(
90deg,
$color-primary-stop-1 0%,
$color-primary-stop-2 100%
) !default;

// linear-gradient(
// 135deg,
// $color-primary-stop-1 0%,
// $color-primary-stop-2 100%
// ) !default;
$button-primary-disabled: var(
--nutui-button-primary-disabled,
$color-primary-disabled-special
Expand Down Expand Up @@ -368,6 +367,10 @@ $button-danger-disabled: var(
$color-danger-disabled
) !default;

$button-xlarge-text-icon-margin: var(
--nutui-button-xlarge-text-icon-margin,
6px
) !default;
$button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;

// cell（✅）
Expand Down
Loading