fix: fix QRCode style (#39849)

* 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>
ant-design · Dec 27, 2022 · 0a0291b · 0a0291b
1 parent 01b5660
commit 0a0291b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -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

diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -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

diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
@@ -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}

diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts
@@ -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)',
     }),
   ),