fix(Paging): fix hint height (#3295)

skbkontur · Oct 30, 2023 · 67363ca · 67363ca
1 parent 06464f8
commit 67363ca
Show file tree

Hide file tree

Showing 16 changed files with 33 additions and 39 deletions.
diff --git a/packages/react-ui/.creevey/images/Paging/Disabled Paging/chrome2022Dark.png b/packages/react-ui/.creevey/images/Paging/Disabled Paging/chrome2022Dark.png
diff --git a/.../react-ui/.creevey/images/Paging/GoToAbsensePage/hover/chrome2022Dark/hover.png b/.../react-ui/.creevey/images/Paging/GoToAbsensePage/hover/chrome2022Dark/hover.png
diff --git a/...react-ui/.creevey/images/Paging/GoToAbsensePage/hover/firefox2022Dark/hover.png b/...react-ui/.creevey/images/Paging/GoToAbsensePage/hover/firefox2022Dark/hover.png
diff --git a/.../react-ui/.creevey/images/Paging/GoToAbsensePage/plain/chrome2022Dark/plain.png b/.../react-ui/.creevey/images/Paging/GoToAbsensePage/plain/chrome2022Dark/plain.png
diff --git a/...react-ui/.creevey/images/Paging/GoToAbsensePage/plain/firefox2022Dark/plain.png b/...react-ui/.creevey/images/Paging/GoToAbsensePage/plain/firefox2022Dark/plain.png
diff --git a/...react-ui/.creevey/images/Paging/Paging Disabled Forward Link/chrome2022Dark.png b/...react-ui/.creevey/images/Paging/Paging Disabled Forward Link/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Paging/With Long Items/chrome2022Dark.png b/packages/react-ui/.creevey/images/Paging/With Long Items/chrome2022Dark.png
diff --git a/packages/react-ui/.creevey/images/Paging/With Long Items/firefox2022Dark.png b/packages/react-ui/.creevey/images/Paging/With Long Items/firefox2022Dark.png
diff --git a/.../images/ThemeProvider/playground/theme 2022 bottom/chrome/theme 2022 bottom.png b/.../images/ThemeProvider/playground/theme 2022 bottom/chrome/theme 2022 bottom.png
diff --git a/...images/ThemeProvider/playground/theme 2022 bottom/firefox/theme 2022 bottom.png b/...images/ThemeProvider/playground/theme 2022 bottom/firefox/theme 2022 bottom.png
diff --git a/...emeProvider/playground/theme 2022 dark bottom/chrome/theme 2022 dark bottom.png b/...emeProvider/playground/theme 2022 dark bottom/chrome/theme 2022 dark bottom.png
diff --git a/...meProvider/playground/theme 2022 dark bottom/firefox/theme 2022 dark bottom.png b/...meProvider/playground/theme 2022 dark bottom/firefox/theme 2022 dark bottom.png
diff --git a/...ges/ThemeProvider/playground/theme 2022 dark top/chrome/theme 2022 dark top.png b/...ges/ThemeProvider/playground/theme 2022 dark top/chrome/theme 2022 dark top.png
diff --git a/...reevey/images/ThemeProvider/playground/theme 2022 top/chrome/theme 2022 top.png b/...reevey/images/ThemeProvider/playground/theme 2022 top/chrome/theme 2022 top.png
diff --git a/packages/react-ui/components/Paging/Paging.styles.ts b/packages/react-ui/components/Paging/Paging.styles.ts
@@ -136,18 +136,12 @@ export const styles = memoizeStyle({
     `;
   },
 
-  pageLinkHintPlaceHolder(t: Theme) {
-    return css`
-      height: ${t.pagingPageLinkHintLineHeight};
-      line-height: ${t.pagingPageLinkHintLineHeight};
-    `;
-  },
-
   pageLinkHint(t: Theme) {
     return css`
       display: inline-block;
       margin: ${t.pagingPageLinkHintMargin};
       font-size: ${t.pagingPageLinkHintFontSize};
+      height: ${t.pagingPageLinkHintLineHeight};
       line-height: ${t.pagingPageLinkHintLineHeight};
       color: ${t.pagingPageLinkHintColor};
     `;

diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
@@ -297,17 +297,17 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     const canGoBackward = this.canGoBackward();
     const canGoForward = this.canGoForward();
 
+    let hint = null;
     if (keyboardControl && (canGoBackward || canGoForward)) {
-      return (
-        <span className={styles.pageLinkHint(this.theme)}>
+      hint = (
+        <>
           <span className={canGoBackward ? '' : styles.transparent()}>{'←'}</span>
           <span>{NavigationHelper.getKeyName()}</span>
           <span className={canGoForward ? '' : styles.transparent()}>{'→'}</span>
-        </span>
+        </>
       );
     }
-
-    return <div className={styles.pageLinkHintPlaceHolder(this.theme)} />;
+    return <div className={styles.pageLinkHint(this.theme)}>{hint}</div>;
   };
 
   private handleMouseDown = () => {