fix(hint): add color,fontsize,lineheight,maxwidth,padding,textalign

skbkontur · Nov 10, 2020 · d5b13f0 · d5b13f0
1 parent 9a5296e
commit d5b13f0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/packages/react-ui/components/Hint/Hint.styles.ts b/packages/react-ui/components/Hint/Hint.styles.ts
@@ -1,22 +1,24 @@
+import { Theme } from '../../lib/theming/Theme';
 import { css, memoizeStyle } from '../../lib/theming/Emotion';
 
 const styles = {
-  content() {
+  content(t: Theme) {
     return css`
       box-sizing: border-box;
-      color: #fff;
-      font-size: 14px;
-      max-width: 200px;
+      color: ${t.hintColor};
+      font-size: ${t.hintFontSize};
+      line-height: ${t.hintLineHeight}
+      max-width: ${t.hintMaxWidth};
       overflow-wrap: break-word;
-      padding: 6px 8px;
+      padding: ${t.hintPaddingY} ${t.hintPaddingX};
       word-break: break-word;
       word-wrap: break-word;
     `;
   },
 
-  contentCenter() {
+  contentCenter(t: Theme) {
     return css`
-      text-align: center;
+      text-align: ${t.hintTextAlign};
     `;
   },
 };

diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx
@@ -147,8 +147,8 @@ export class Hint extends React.Component<HintProps, HintState> {
 
     const { pos, maxWidth } = this.props;
     const className = cn({
-      [jsStyles.content()]: true,
-      [jsStyles.contentCenter()]: pos === 'top' || pos === 'bottom',
+      [jsStyles.content(this.theme)]: true,
+      [jsStyles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',
     });
     return (
       <div className={className} style={{ maxWidth }}>

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -739,6 +739,21 @@ export class DefaultTheme {
   //#region Menu
   public static menuSeparatorBorderColor = '#e6e6e6';
   //#endregion
+  //#region Hint
+  public static get hintColor() {
+    return this.textColorInvert;
+  }
+  public static get hintFontSize() {
+    return this.fontSizeSmall;
+  }
+  public static get hintLineHeight() {
+    return this.controlLineHeightSmall;
+  }
+  public static hintMaxWidth = '200px';
+  public static hintPaddingY = '6px';
+  public static hintPaddingX = '8px';
+  public static hintTextAlign = 'center';
+  //#endregion
   //#region Toast
   public static toastBg = 'rgba(51, 51, 51, 0.8)';
   public static toastColor = 'white';