feat(Paging): support 8px theme (#2310)

skbkontur · Mar 22, 2021 · 5814aa0 · 5814aa0
1 parent ed10c81
commit 5814aa0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 20 deletions.
diff --git a/packages/react-ui/components/Paging/Paging.styles.ts b/packages/react-ui/components/Paging/Paging.styles.ts
@@ -1,20 +1,22 @@
+import { is8pxTheme } from '../../lib/theming/ThemeHelpers';
 import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
 const styles = {
-  paging() {
+  paging(t: Theme) {
     return css`
       user-select: none;
       outline: 0;
+      font-size: ${t.pagingFontSize};
+      line-height: ${t.pagingLineHeight};
     `;
   },
 
   dots(t: Theme) {
     return css`
       color: ${t.pagingDotsColor};
       display: inline-block;
-      font-size: 16px;
-      padding: 6px 10px 0;
+      padding: ${t.pagingDotsPadding};
     `;
   },
 
@@ -23,10 +25,10 @@ const styles = {
       color: ${t.pagingForwardLinkColor};
       cursor: pointer;
       display: inline-block;
-      font-size: 16px;
-      margin: 4px 0 2px 10px;
+      margin-top: ${t.pagingPageForwardLinkMarginTop};
+      margin-left: ${t.pagingPageForwardLinkMarginLeft};
       outline: none;
-      padding-right: 22px;
+      padding-right: ${t.pagingPageForwardLinkPaddingRight};
       position: relative;
       text-decoration: none;
       user-select: none;
@@ -40,10 +42,11 @@ const styles = {
     `;
   },
 
-  forwardIcon() {
+  forwardIcon(t: Theme) {
     return css`
       vertical-align: -2px;
       position: absolute;
+      margin-top: ${t.pagingForwardIconMarginTop};
       right: 0;
     `;
   },
@@ -58,8 +61,8 @@ const styles = {
 
   pageLinkWrapper() {
     return css`
-      display: inline-block;
-      font-size: 0;
+      display: inline-flex;
+      flex-flow: column nowrap;
       text-align: center;
       user-select: none;
       vertical-align: top;
@@ -68,14 +71,15 @@ const styles = {
 
   pageLink(t: Theme) {
     return css`
-      border-radius: 16px;
+      border-radius: ${t.pagingPageLinkBorderRadius};
       color: ${t.pagingForwardLinkColor};
       cursor: pointer;
       display: block;
-      font-size: 16px;
-      margin: 2px 1px;
+      margin: ${t.pagingPageLinkMargin};
       outline: none;
-      padding: 2px 10px 5px;
+      min-width: ${t.pagingPageLinkMinWidth};
+      padding: ${t.pagingPageLinkPaddingY} ${t.pagingPageLinkPaddingX}
+        ${is8pxTheme(t) ? t.pagingPageLinkPaddingY : t.pagingPageLinkLegacyPaddingY};
       text-decoration: none;
 
       &:not(${cssName(styles.active())}):hover {
@@ -108,17 +112,19 @@ const styles = {
     `;
   },
 
-  pageLinkHintPlaceHolder() {
+  pageLinkHintPlaceHolder(t: Theme) {
     return css`
-      height: 15px;
+      height: ${t.pagingPageLinkHintLineHeight};
+      line-height: ${t.pagingPageLinkHintLineHeight};
     `;
   },
 
   pageLinkHint(t: Theme) {
     return css`
       display: inline-block;
       margin: 0 -20px;
-      font-size: 11px;
+      font-size: ${t.pagingPageLinkHintFontSize};
+      line-height: ${t.pagingPageLinkHintLineHeight};
 
       ${cssName(styles.pageLinkWrapper())} & {
         color: ${t.pagingPageLinkHintColor};

diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
@@ -140,7 +140,7 @@ export class Paging extends React.Component<PagingProps, PagingState> {
         <span
           tabIndex={0}
           data-tid={this.props['data-tid']}
-          className={jsStyles.paging()}
+          className={jsStyles.paging(this.theme)}
           onKeyDown={this.props.useGlobalListener ? undefined : this.handleKeyDown}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
@@ -199,8 +199,8 @@ export class Paging extends React.Component<PagingProps, PagingState> {
         pageNumber={'forward' as 'forward'}
       >
         {caption || forward}
-        <span className={jsStyles.forwardIcon()}>
-          <ArrowChevronRightIcon size="18px" />
+        <span className={jsStyles.forwardIcon(this.theme)}>
+          <ArrowChevronRightIcon size={this.theme.pagingForwardIconSize} />
         </span>
       </Component>
     );
@@ -256,7 +256,7 @@ export class Paging extends React.Component<PagingProps, PagingState> {
       );
     }
 
-    return <div className={jsStyles.pageLinkHintPlaceHolder()} />;
+    return <div className={jsStyles.pageLinkHintPlaceHolder(this.theme)} />;
   };
 
   private handleMouseDown = () => {

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -768,11 +768,27 @@ export class DefaultTheme {
   }
   //#endregion
   //#region Paging
+  public static pagingFontSize = '16px';
+  public static pagingForwardIconSize = '18px';
+  public static pagingForwardIconMarginTop = '0px';
+  public static pagingPageLinkPaddingX = '10px';
+  public static pagingPageLinkPaddingY = '2px';
+  public static pagingPageLinkLegacyPaddingY = '5px';
+  public static pagingPageLinkMinWidth = 'initial';
+  public static pagingPageForwardLinkMarginTop = '4px';
+  public static pagingPageForwardLinkMarginLeft = '10px';
+  public static pagingPageForwardLinkPaddingRight = '22px';
+  public static pagingLineHeight = 'initial';
   public static pagingDotsColor = 'gray';
+  public static pagingDotsPadding = '6px 10px 0';
   public static pagingPageLinkActiveBg = 'rgba(0, 0, 0, 0.09)';
   public static pagingPageLinkActiveColor = 'black';
   public static pagingPageLinkHoverBg = 'rgba(0, 0, 0, 0.05)';
   public static pagingPageLinkHintColor = '#bbb';
+  public static pagingPageLinkHintFontSize = '11px';
+  public static pagingPageLinkHintLineHeight = '15px';
+  public static pagingPageLinkBorderRadius = '16px';
+  public static pagingPageLinkMargin = '2px 1px';
   public static get pagingForwardLinkColor() {
     return this.linkColor;
   }

diff --git a/packages/react-ui/internal/themes/Theme8px.ts b/packages/react-ui/internal/themes/Theme8px.ts
@@ -422,6 +422,26 @@ export class Theme8px extends (class {} as typeof DefaultThemeInternal) {
   //#region RadioGroup
   public static radioGroupLegacyItemGap = '0px';
   //#endregion
+  //#region Paging
+  public static get pagingFontSize() {
+    return this.fontSizeMedium;
+  }
+  public static pagingPageLinkLegacyPaddingY = '0';
+  public static pagingPageForwardLinkMarginTop = '0.35em';
+  public static pagingLineHeight = '1.375em';
+  public static pagingPageLinkPaddingX = '0.625em';
+  public static pagingPageLinkPaddingY = '0.3125em';
+  public static pagingPageLinkMinWidth = '0.75em';
+  public static pagingPageLinkHintFontSize = '12px';
+  public static pagingPageLinkHintLineHeight = '16px';
+  public static pagingPageLinkBorderRadius = '50%';
+  public static pagingPageLinkMargin = '0px 1px';
+  public static get pagingForwardIconSize() {
+    return this.pagingFontSize;
+  }
+  public static pagingForwardIconMarginTop = '1px';
+  public static pagingPageForwardLinkPaddingRight = '1.375em';
+  public static pagingDotsPadding = '0.375em 0.625em 0';
   //#endregion
   //#region Switcher
   public static get switcherOutlineWidth() {