From 3ba1c6ff373adc68284efe560f11872e862aff6e Mon Sep 17 00:00:00 2001 From: sallerli1 Date: Wed, 5 Jan 2022 15:08:37 +0800 Subject: [PATCH 1/2] feat(comp:empty): add color variables BREAKING CHANGE: replaced empty-color variable with more specific ones BREAKING CHANGE: replace empty-font-size variable with more specific ones feat(comp:modal): add body title and content variables to typed modal --- packages/components/empty/style/index.less | 7 +++++-- .../components/empty/style/themes/default.variable.less | 7 +++++-- packages/components/modal/style/index.less | 6 +++++- .../components/modal/style/themes/default.variable.less | 9 +++++++++ 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less index ee9b18b49..6ecb7a4dc 100644 --- a/packages/components/empty/style/index.less +++ b/packages/components/empty/style/index.less @@ -4,10 +4,8 @@ .reset-component(); text-align: center; - font-size: @empty-font-size; line-height: @empty-line-height; margin: @empty-margin; - color: @empty-color; &-image { margin-bottom: @empty-image-margin-bottom; @@ -19,15 +17,20 @@ .@{icon-prefix} { opacity: @empty-image-icon-opacity; font-size: @empty-image-icon-font-size; + color: @empty-image-icon-color; } } &-description { opacity: @empty-description-opacity; margin: @empty-description-margin; + color: @empty-description-color; + font-size: @empty-description-font-size; } &-content { margin-top: @empty-content-margin-top; + color: @empty-content-color; + font-size: @empty-content-font-size; } } diff --git a/packages/components/empty/style/themes/default.variable.less b/packages/components/empty/style/themes/default.variable.less index ddf148d40..d26904648 100644 --- a/packages/components/empty/style/themes/default.variable.less +++ b/packages/components/empty/style/themes/default.variable.less @@ -1,13 +1,16 @@ -@empty-font-size: @font-size-md; @empty-line-height: @line-height-base; @empty-margin: @spacing-lg 0; -@empty-color: @text-color; @empty-image-margin-bottom: @spacing-sm; @empty-image-icon-opacity: 0.3; @empty-image-icon-font-size: 64px; +@empty-image-icon-color: @text-color; @empty-description-opacity: 0.6; @empty-description-margin: 0; +@empty-description-color: @text-color; +@empty-description-font-size: @font-size-md; @empty-content-margin-top: @spacing-lg; +@empty-content-color: @text-color; +@empty-content-font-size: @font-size-md; diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less index 7a012247f..4b2eae894 100644 --- a/packages/components/modal/style/index.less +++ b/packages/components/modal/style/index.less @@ -53,10 +53,14 @@ font-size: @modal-body-title-font-size; font-weight: @modal-body-title-font-weight; margin-bottom: @modal-body-title-margin-bottom; + color: @modal-body-title-color; } &-content { width: 100%; + padding: @modal-body-content-padding; + font-size: @modal-body-content-font-size; + color: @modal-body-content-color; } &-confirm, @@ -65,7 +69,7 @@ &-warning, &-error { display: flex; - padding-top: 0; + padding: @modal-typed-body-padding; } &-icon { diff --git a/packages/components/modal/style/themes/default.variable.less b/packages/components/modal/style/themes/default.variable.less index af6998443..2c60b6993 100644 --- a/packages/components/modal/style/themes/default.variable.less +++ b/packages/components/modal/style/themes/default.variable.less @@ -16,13 +16,22 @@ @modal-body-title-font-size: @font-size-lg; @modal-body-title-font-weight: @font-weight-xl; @modal-body-title-margin-bottom: @spacing-sm; +@modal-body-title-color: @text-color; + +@modal-body-content-font-size: @modal-font-size; +@modal-body-content-color: @text-color; +@modal-body-content-padding: 0; + @modal-body-icon-font-size: 48px; @modal-body-icon-margin: 0 @spacing-lg; + @modal-body-confirm-color: @color-warning; @modal-body-info-color: @color-info; @modal-body-success-color: @color-success; @modal-body-warning-color: @color-warning; @modal-body-error-color: @color-error; +@modal-typed-body-padding: 0 @font-size-lg @font-size-lg @font-size-lg; + @modal-max-width-screen-sm: calc(100vw - 16px); @modal-margin-screen-sm: @spacing-sm auto; From 07dc55998eb235528634304c7dc1d8c66c16420e Mon Sep 17 00:00:00 2001 From: sallerli1 Date: Thu, 6 Jan 2022 16:56:45 +0800 Subject: [PATCH 2/2] refactor(comp:footer): modify ok button change ok button mode to default when there's no cancel button --- .../_private/footer/__tests__/footer.spec.ts | 1 - .../components/_private/footer/src/Footer.tsx | 30 +++++++++---------- packages/components/i18n/src/locales/zh-CN.ts | 2 +- .../components/modal/src/ModalWrapper.tsx | 19 ++++-------- packages/components/modal/style/index.less | 2 +- .../modal/style/themes/default.variable.less | 2 +- 6 files changed, 23 insertions(+), 33 deletions(-) diff --git a/packages/components/_private/footer/__tests__/footer.spec.ts b/packages/components/_private/footer/__tests__/footer.spec.ts index 82061af6b..d9960d408 100644 --- a/packages/components/_private/footer/__tests__/footer.spec.ts +++ b/packages/components/_private/footer/__tests__/footer.spec.ts @@ -123,7 +123,6 @@ describe('Footer', () => { await wrapper.setProps({ okButton: undefined }) expect(wrapper.find('.ix-button').classes()).not.toContain('ix-button-dashed') - expect(wrapper.find('.ix-button').classes()).toContain('ix-button-primary') }) test('okLoading work', async () => { diff --git a/packages/components/_private/footer/src/Footer.tsx b/packages/components/_private/footer/src/Footer.tsx index 1cd866e2d..e9f778767 100644 --- a/packages/components/_private/footer/src/Footer.tsx +++ b/packages/components/_private/footer/src/Footer.tsx @@ -17,21 +17,6 @@ import { footerProps } from './types' export default defineComponent({ props: footerProps, setup(props, { slots }) { - const okButtonProps = computed(() => { - const { ok, okButton, okLoading, okText } = props - if (!ok && !okText && !okButton) { - return undefined - } - return { - key: '__IDUX_FOOTER_BUTTON_OK', - text: okText, - onClick: ok, - loading: okLoading, - mode: 'primary', - ...okButton, - } - }) - const cancelButtonProps = computed(() => { const { cancel, cancelButton, cancelVisible, cancelLoading, cancelText } = props if (!cancelVisible || (!cancel && !cancelText && !cancelButton)) { @@ -46,6 +31,21 @@ export default defineComponent({ } }) + const okButtonProps = computed(() => { + const { ok, okButton, okLoading, okText } = props + if (!ok && !okText && !okButton) { + return undefined + } + return { + key: '__IDUX_FOOTER_BUTTON_OK', + text: okText, + onClick: ok, + loading: okLoading, + mode: cancelButtonProps.value ? 'primary' : 'default', + ...okButton, + } + }) + return () => { const footerProp = props.footer const footerSlot = slots.footer diff --git a/packages/components/i18n/src/locales/zh-CN.ts b/packages/components/i18n/src/locales/zh-CN.ts index e6f8af634..017b2eb2b 100755 --- a/packages/components/i18n/src/locales/zh-CN.ts +++ b/packages/components/i18n/src/locales/zh-CN.ts @@ -47,7 +47,7 @@ const zhCN: Locale = { modal: { cancelText: '取消', okText: '确定', - justOkText: '知道了', + justOkText: '我知道了', }, popconfirm: { cancelText: '取消', diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx index 722cd129d..4b5629d57 100644 --- a/packages/components/modal/src/ModalWrapper.tsx +++ b/packages/components/modal/src/ModalWrapper.tsx @@ -5,30 +5,21 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { - ComputedRef, - Ref, - Transition, - computed, - defineComponent, - inject, - onBeforeUnmount, - onMounted, - ref, - watch, -} from 'vue' +import type { ModalProps } from './types' +import type { ModalConfig } from '@idux/components/config' +import type { ComputedRef, Ref } from 'vue' + +import { Transition, computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { isFunction } from 'lodash-es' import { callEmit, convertCssPixel, getOffset } from '@idux/cdk/utils' import { ɵFooter } from '@idux/components/_private/footer' import { ɵHeader } from '@idux/components/_private/header' -import { ModalConfig } from '@idux/components/config' import { getLocale } from '@idux/components/i18n' import ModalBody from './ModalBody' import { MODAL_TOKEN, modalToken } from './token' -import { ModalProps } from './types' export default defineComponent({ inheritAttrs: false, diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less index 4b2eae894..da60372cd 100644 --- a/packages/components/modal/style/index.less +++ b/packages/components/modal/style/index.less @@ -69,7 +69,7 @@ &-warning, &-error { display: flex; - padding: @modal-typed-body-padding; + padding: @modal-body-typed-padding; } &-icon { diff --git a/packages/components/modal/style/themes/default.variable.less b/packages/components/modal/style/themes/default.variable.less index 2c60b6993..c8276b047 100644 --- a/packages/components/modal/style/themes/default.variable.less +++ b/packages/components/modal/style/themes/default.variable.less @@ -31,7 +31,7 @@ @modal-body-warning-color: @color-warning; @modal-body-error-color: @color-error; -@modal-typed-body-padding: 0 @font-size-lg @font-size-lg @font-size-lg; +@modal-body-typed-padding: 0 @spacing-sm @spacing-xl; @modal-max-width-screen-sm: calc(100vw - 16px); @modal-margin-screen-sm: @spacing-sm auto;