mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-30 22:39:34 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

fix: fix QRCode style (#39849)

Browse Source 
* fix: fix style

* snap

* Update components/qrcode/style/index.ts

Co-authored-by: afc163 <afc163@gmail.com>

* rename className

* use token

Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
lijianan 2022-12-27 19:22:59 +08:00 committed by yoyo837
parent 7059f6e5ba
commit d2d37bda21
4 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -361,7 +361,9 @@ exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`
<div
class="ant-qrcode-mask"
>
<p>
<p
class="ant-qrcode-expired"
>
QR code expired
</p>
<button

4
components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -321,7 +321,9 @@ exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = `
<div
class="ant-qrcode-mask"
>
<p>
<p
class="ant-qrcode-expired"
>
QR code expired
</p>
<button

2
components/qrcode/index.tsx
View File

@ -80,7 +80,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
{status === 'loading' && <Spin />}
{status === 'expired' && (
<>
<p>{locale.expired}</p>
<p className={`${prefixCls}-expired`}>{locale.expired}</p>
{typeof onRefresh === 'function' && (
<Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}>
{locale.refresh}

6
components/qrcode/style/index.ts
View File

@ -5,6 +5,7 @@ import { resetComponent } from '../../style';
export interface ComponentToken {}
interface QRCodeToken extends FullToken<'QRCode'> {
QRCodeExpiredTextColor: string;
QRCodeMaskBackgroundColor: string;
}
@ -17,6 +18,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
justifyContent: 'center',
alignItems: 'center',
padding: token.paddingSM,
backgroundColor: token.colorWhite,
borderRadius: token.borderRadiusLG,
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
position: 'relative',
@ -38,6 +40,9 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
lineHeight: token.lineHeight,
background: token.QRCodeMaskBackgroundColor,
textAlign: 'center',
[`& > ${componentCls}-expired`]: {
color: token.QRCodeExpiredTextColor,
},
},
'&-icon': {
marginBlockEnd: token.marginXS,
@ -53,6 +58,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
genQRCodeStyle(
mergeToken<QRCodeToken>(token, {
QRCodeExpiredTextColor: 'rgba(0, 0, 0, 0.88)',
QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
}),
),