Skip to content

Commit

Permalink
fix(comp:button): style problems caused by line-height with loading (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
danranVm authored Nov 28, 2022
1 parent f9961ef commit 23aeeed
Show file tree
Hide file tree
Showing 10 changed files with 47 additions and 44 deletions.
2 changes: 1 addition & 1 deletion packages/components/button/docs/Theme.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,4 @@
| `@button-ghost-background-color-active` | `var(--ix-background-color)` | - | - |
| `@button-ghost-background-color-disabled` | `rgba(255, 255, 255, 0.4)` | - | - |
| `@button-icon-color` | `inherit` | `var(--ix-text-color-secondary)` | - |
| `@button-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
| `@button-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
7 changes: 6 additions & 1 deletion packages/components/button/src/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,12 @@ export default defineComponent({

const children: VNodeChild[] = []
if (loading) {
children.push(<IxIcon name="loading"></IxIcon>)
children.push(
// loading 状态下的行高问题
<span class={`${mergedPrefixCls.value}-loading-icon`}>
<IxIcon name="loading"></IxIcon>
</span>,
)
} else if (slots.icon) {
children.push(slots.icon())
} else if (icon) {
Expand Down
45 changes: 30 additions & 15 deletions packages/components/button/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,16 @@
content: '\a0';
}

> .@{icon-prefix} {
&-loading-icon > .@{icon-prefix},
& > .@{icon-prefix} {
font-size: @button-icon-font-size;
}

> span {
display: inline-flex;
align-items: center;
display: inline-block;
}

&-loading-icon + span,
> .@{icon-prefix} + span {
margin-left: @spacing-xs;
}
Expand All @@ -72,10 +73,24 @@

&-lg {
.button-size(@button-height-lg, @button-font-size-lg, @button-min-width-lg, @button-padding-horizontal-lg);

&.@{button-prefix}-icon-only {
.@{button-prefix}-loading-icon > .@{icon-prefix},
> .@{icon-prefix} {
font-size: calc(@button-icon-font-size + 2px);
}
}
}

&-xl {
.button-size(@button-height-xl, @button-font-size-xl, @button-min-width-xl, @button-padding-horizontal-xl);

&.@{button-prefix}-icon-only {
.@{button-prefix}-loading-icon > .@{icon-prefix},
> .@{icon-prefix} {
font-size: calc(@button-icon-font-size + 4px);
}
}
}

&-primary {
Expand Down Expand Up @@ -297,7 +312,7 @@

.@{button-prefix}-group {
line-height: 0;

.@{button-prefix} {
z-index: auto;

Expand All @@ -313,47 +328,47 @@
}

&-compact {

.@{button-prefix} {
transition: color var(--ix-transition-duration-fast) var(--ix-ease-in-out), background-color var(--ix-transition-duration-fast) var(--ix-ease-in-out);
transition: color var(--ix-transition-duration-fast) var(--ix-ease-in-out),
background-color var(--ix-transition-duration-fast) var(--ix-ease-in-out);
}

&:not(.@{space-prefix}-vertical) {
>.@{space-prefix}-item:first-child >.@{button-prefix} {
> .@{space-prefix}-item:first-child > .@{button-prefix} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

>.@{space-prefix}-item:last-child >.@{button-prefix} {
> .@{space-prefix}-item:last-child > .@{button-prefix} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

>.@{space-prefix}-item:not(:first-child):not(:last-child) >.@{button-prefix} {
> .@{space-prefix}-item:not(:first-child):not(:last-child) > .@{button-prefix} {
border-radius: 0;
}

>.@{space-prefix}-item:not(:last-child) >.@{button-prefix} {
> .@{space-prefix}-item:not(:last-child) > .@{button-prefix} {
margin-right: -1px;
}
}

&.@{space-prefix}-vertical {
>.@{space-prefix}-item:first-child >.@{button-prefix} {
> .@{space-prefix}-item:first-child > .@{button-prefix} {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

>.@{space-prefix}-item:last-child >.@{button-prefix} {
> .@{space-prefix}-item:last-child > .@{button-prefix} {
border-top-left-radius: 0;
border-top-right-radius: 0;
}

>.@{space-prefix}-item:not(:first-child):not(:last-child) >.@{button-prefix} {
> .@{space-prefix}-item:not(:first-child):not(:last-child) > .@{button-prefix} {
border-radius: 0;
}

>.@{space-prefix}-item:not(:last-child) >.@{button-prefix} {
> .@{space-prefix}-item:not(:last-child) > .@{button-prefix} {
margin-bottom: -1px;
}
}
Expand Down
4 changes: 0 additions & 4 deletions packages/components/button/style/mixin.less
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,4 @@
&.@{button-prefix}-round {
border-radius: calc(@height / 2);
}

&.@{button-prefix}-icon-only {
font-size: calc(@font-size + 2px);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@
@button-ghost-background-color-disabled: rgba(255, 255, 255, 0.4);

@button-icon-color: inherit;
@button-icon-font-size: inherit;
@button-icon-font-size: var(--ix-font-size-lg);
1 change: 0 additions & 1 deletion packages/components/button/style/themes/seer.variable.less
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,3 @@
@button-border-radius: var(--ix-border-radius-sm);

@button-icon-color: var(--ix-text-color-secondary);
@button-icon-font-size: var(--ix-font-size-lg);
8 changes: 2 additions & 6 deletions packages/components/date-picker/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@
}

&-footer {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: end;
border-top: @date-picker-overlay-footer-border-width @date-picker-overlay-footer-border-style
@date-picker-overlay-footer-border-color;
padding: @date-picker-overlay-footer-padding;
Expand Down Expand Up @@ -75,9 +73,7 @@
}

&-footer {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: end;
border-top: @date-range-picker-overlay-footer-border-width @date-range-picker-overlay-footer-border-style
@date-range-picker-overlay-footer-border-color;
padding: @date-range-picker-overlay-footer-padding;
Expand Down
2 changes: 0 additions & 2 deletions packages/components/drawer/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@
}

&-footer {
display: flex;
align-items: center;
padding: var(--ix-spacing-md) var(--ix-spacing-lg);

.@{button-prefix} + .@{button-prefix} {
Expand Down
4 changes: 1 addition & 3 deletions packages/components/modal/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,7 @@
}

&-footer {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: end;
padding: var(--ix-spacing-md) var(--ix-spacing-lg);

.@{button-prefix} + .@{button-prefix} {
Expand Down
16 changes: 6 additions & 10 deletions packages/components/time-picker/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@
}

&-footer {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: end;
border-top: @time-picker-overlay-footer-border-width @time-picker-overlay-footer-border-style
@time-picker-overlay-footer-border-color;
padding: @time-picker-overlay-footer-padding;
Expand All @@ -39,12 +37,12 @@

&-overlay {
padding: @time-range-picker-overlay-padding;

&-body {
display: flex;
padding: @time-range-picker-overlay-body-padding;
}

&-separator {
width: @time-range-picker-overlay-separator-width;
padding: @time-range-picker-overlay-separator-padding;
Expand All @@ -59,15 +57,13 @@
background-color: @time-range-picker-overlay-separator-line-color;
}
}

&-footer {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: end;
border-top: @time-range-picker-overlay-footer-border-width @time-range-picker-overlay-footer-border-style
@time-range-picker-overlay-footer-border-color;
padding: @time-range-picker-overlay-footer-padding;

.@{button-prefix} + .@{button-prefix} {
margin-left: @time-range-picker-overlay-footer-button-margin-left;
}
Expand Down

0 comments on commit 23aeeed

Please sign in to comment.