Skip to content

Commit

Permalink
feat(Button): support 0.5px border by transform property
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Jan 11, 2023
1 parent e3cb63a commit 1aa9254
Show file tree
Hide file tree
Showing 22 changed files with 280 additions and 101 deletions.
170 changes: 109 additions & 61 deletions src/button/button.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import '../common/style/index.less';

@button-border-width: var(--td-button-border-width, 1px);
@button-border-width: var(--td-button-border-width, 4rpx);
@button-border-radius: var(--td-button-border-radius, @radius-default);
@button-font-weight: var(--td-button-font-weight, 600);

Expand Down Expand Up @@ -36,24 +36,28 @@
@button-default-border-color: var(--td-button-default-border-color, @gray-color-3);
@button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4);
@button-default-disabled-bg: var(--td-button-default-disabled-bg, @gray-color-2);
@button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @gray-color-2);
// primary
@button-primary-color: var(--td-button-primary-color, @text-anti-primary-color);
@button-primary-border-color: var(--td-button-primary-border-color, @primary-color);
@button-primary-bg-color: var(--td-button-primary-bg-color, @primary-color);
@button-primary-disabled-color: var(--td-button-primary-disabled-color, @text-anti-primary-color);
@button-primary-disabled-bg: var(--td-button-primary-disabled-bg, @primary-color-3);
@button-primary-disabled-border-color: var(--td-button-primary-disabled-border-color, @primary-color-3);
// light
@button-light-color: var(--td-button-light-color, @primary-color);
@button-light-border-color: var(--td-button-light-border-color, @primary-color-1);
@button-light-bg-color: var(--td-button-light-bg-color, @primary-color-1);
@button-light-disabled-color: var(--td-button-light-disabled-color, @primary-color-3);
@button-light-disabled-bg: var(--td-button-light-disabled-bg, @primary-color-1);
@button-light-disabled-border-color: var(--td-button-light-disabled-border-color, @primary-color-1);
// danger
@button-danger-color: var(--td-button-danger-color, @text-anti-primary-color);
@button-danger-border-color: var(--td-button-danger-border-color, @error-color);
@button-danger-bg-color: var(--td-button-danger-bg-color, @error-color);
@button-danger-disabled-color: var(--td-button-danger-disabled-color, @text-anti-primary-color);
@button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
// primary + outline
@button-primary-outline-color: var(--td-button-primary-outline-color, @primary-color);
@button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color);
Expand Down Expand Up @@ -110,11 +114,12 @@

.@{button}--size-@{size} {
font-size: @@fontSize;
padding-left: calc(@@padding - @button-border-width);
padding-right: calc(@@padding - @button-border-width);
padding-left: @@padding;
padding-right: @@padding;
height: @@height;
line-height: @@height;
& .@{prefix}-button__icon {

& .@{button}__icon {
font-size: @@iconSize;
}
}
Expand All @@ -125,22 +130,33 @@
@bgColor: 'button-@{theme}-bg-color';
@borderColor: 'button-@{theme}-border-color';
@disabledColor: 'button-@{theme}-disabled-color';
@disabledBorderColor: 'button-@{theme}-disabled-border-color';
@disabledBgColor: 'button-@{theme}-disabled-bg';
@activeBgColor: 'button-@{theme}-active-bg-color';

.@{button}--@{theme} {
color: @@color;
background-color: @@bgColor;
border: @button-border-width solid @@borderColor;

&::after {
background-color: @@activeBgColor;
border-width: @button-border-width;
border-color: @@borderColor;
}

&.@{button}--hover {
z-index: 0;
&::after {
background-color: @@activeBgColor;
}
}

&.@{button}--disabled {
color: @@disabledColor;
background-color: @@disabledBgColor;
border-color: @@disabledBgColor;

&::after {
border-color: @@disabledBorderColor;
}
}
}
}
Expand Down Expand Up @@ -176,40 +192,22 @@
-webkit-appearance: none;

&::after {
content: ' ';
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}

&:not(.@{button}--disabled):active::after {
opacity: 0.1;
border-radius: calc(@button-border-radius * 2);
}

&--text {
color: @button-default-color;
background: none;
border: 0;

&::after {
background-color: @button-text-active-bg-color;
}

&.@{prefix}-button--size-medium {
width: auto;
height: auto;
line-height: normal;
padding: 0;
border: 0;
}

&.@{button}--disabled {
color: @button-default-disabled-color;
&.@{button}--hover::after {
background-color: @button-text-active-bg-color;
}

&.@{prefix}-button--primary {
&.@{button}--primary {
color: @button-primary-text-color;
background: none;

Expand All @@ -219,7 +217,7 @@
}
}

&.@{prefix}-button--danger {
&.@{button}--danger {
color: @button-danger-text-color;
background: none;

Expand All @@ -229,72 +227,110 @@
}
}

&.@{prefix}-button--light {
&.@{button}--light {
color: @button-light-text-color;
background: none;
}

&.@{button}--disabled {
color: @button-default-disabled-color;
}
}

&--ghost {
background-color: transparent;
border-color: @button-ghost-border-color;
color: @button-ghost-color;

&.@{button}--disabled {
color: @button-ghost-disabled-color;
border-color: @button-ghost-disabled-color;
&::after {
border-color: @button-ghost-border-color;
}

&.@{button}--primary {
color: @button-ghost-primary-color;
border-color: @button-ghost-primary-border-color;

&::after {
border-color: @button-ghost-primary-border-color;
}
}

&.@{button}--danger {
color: @button-ghost-danger-color;
border-color: @button-ghost-danger-border-color;

&::after {
border-color: @button-ghost-danger-border-color;
}
}

&.@{button}--disabled {
background-color: transparent;
color: @button-ghost-disabled-color;

&::after {
border-color: @button-ghost-disabled-color;
}
}
}

&--outline {
border-color: @button-default-border-color;
background-color: transparent;

&::after {
border-color: @button-default-border-color;
}

&.@{button}--hover::after {
background-color: @button-outline-active-bg-color;
}

&.@{prefix}-button--primary {
&.@{button}--primary {
color: @button-primary-outline-color;
border-color: @button-primary-outline-border-color;

&::after {
border-color: @button-primary-outline-border-color;
}

&.@{button}--disabled {
background-color: transparent;
color: @button-primary-outline-disabled-color;
border-color: @button-primary-outline-disabled-color;

&::after {
border-color: @button-primary-outline-disabled-color;
}
}
}

&.@{prefix}-button--danger {
&.@{button}--danger {
color: @button-danger-outline-color;
border-color: @button-danger-outline-border-color;

&::after {
border-color: @button-danger-outline-border-color;
}

&.@{button}--disabled {
background-color: transparent;
color: @button-danger-outline-disabled-color;
border-color: @button-danger-outline-disabled-color;

&::after {
border-color: @button-danger-outline-disabled-color;
}
}
}

&.@{prefix}-button--light {
&.@{button}--light {
color: @button-light-outline-color;
background-color: @button-light-outline-bg-color;
border-color: @button-light-outline-border-color;

&::after {
border-color: @button-light-outline-border-color;
}

&.@{button}--disabled {
background-color: transparent;
color: @button-light-outline-disabled-color;
border-color: @button-light-outline-disabled-color;

&::after {
border-color: @button-light-outline-disabled-color;
}
}
}
}
Expand All @@ -303,25 +339,37 @@
background-color: transparent;
border-style: dashed;

&.@{prefix}-button--primary {
&.@{button}--primary {
color: @button-primary-dashed-color;
border-color: @button-primary-dashed-border-color;

&::after {
border-color: @button-primary-dashed-border-color;
}

&.@{button}--disabled {
background-color: transparent;
color: @button-primary-dashed-disabled-color;
border-color: @button-primary-dashed-disabled-color;

&::after {
border-color: @button-primary-dashed-disabled-color;
}
}
}

&.@{prefix}-button--danger {
&.@{button}--danger {
color: @button-danger-dashed-color;
border-color: @button-danger-dashed-border-color;

&::after {
border-color: @button-danger-dashed-border-color;
}

&.@{button}--disabled {
background-color: transparent;
color: @button-danger-dashed-disabled-color;
border-color: @button-danger-dashed-disabled-color;

&::after {
border-color: @button-danger-dashed-disabled-color;
}
}
}
}
Expand All @@ -337,7 +385,7 @@

// 圆角长方形
&--round {
&.@{prefix}-button--size {
&.@{button}--size {
&-large {
border-radius: calc(@button-large-height / 2);
}
Expand All @@ -360,7 +408,7 @@
&--square {
padding: 0;

&.@{prefix}-button--size {
&.@{button}--size {
&-large {
width: @button-large-height;
}
Expand All @@ -383,7 +431,7 @@
&--circle {
padding: 0;

&.@{prefix}-button--size {
&.@{button}--size {
&-large {
border-radius: 50%;
width: @button-large-height;
Expand Down Expand Up @@ -415,10 +463,6 @@
cursor: not-allowed;
}

&.button-hover:after {
border-radius: 8rpx;
}

&__loading {
&--wrapper {
display: flex;
Expand All @@ -430,4 +474,8 @@
color: @white-color-1;
}
}

&.@{button}--hover::after {
z-index: -1;
}
}
2 changes: 1 addition & 1 deletion src/button/button.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
hover-stay-time="{{hoverStayTime}}"
lang="{{lang}}"
session-from="{{sessionFrom}}"
hover-class="button-hover"
hover-class="{{classPrefix}}--hover"
send-message-title="{{sendMessageTitle}}"
send-message-path="{{sendMessagePath}}"
send-message-img="{{sendMessageImg}}"
Expand Down
2 changes: 1 addition & 1 deletion src/calendar/__test__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -755,7 +755,7 @@ exports[`calendar :base 1`] = `
class="t-button t-class t-button--primary t-button--size-medium t-button--rectangle t-button--base t-button--block"
data-custom="{{null}}"
formType=""
hoverClass="button-hover"
hoverClass="t-button--hover"
hoverStartTime="{{0}}"
hoverStayTime="{{0}}"
hoverStopPropagation="{{false}}"
Expand Down
4 changes: 2 additions & 2 deletions src/dialog/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ isComponent: true
-- | -- | -- | -- | --
actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
cancel-btn | String / Object / Slot | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
cancel-btn | String / Object / Slot | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
close-btn | Boolean / Object | false | `0.31.0`。是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 | N
close-on-overlay-click | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N
confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
content | String / Slot | - | 内容 | N
custom-style | String | - | `0.25.0`。自定义组件样式 | N
external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']` | N
Expand Down
Loading

0 comments on commit 1aa9254

Please sign in to comment.