@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/components/button/button.css

@@ -2,174 +2,25 @@
 
 @value unit from "../global/global.css";
 @value button-shadow: inset 0 0 0 1px;
-@value height: calc(unit * 3);
+@value height: var(--ring-button-height);
 @value loaderWidth: calc(unit * 8);
 
-:root {
-  /* TODO: This colors are not ready to move to variables.css */
-  /* stylelint-disable color-no-hex */
-  --ring-button-primary-background-color: #1a98ff;
-  --ring-button-primary-border-color: #0062b2;
-  --ring-button-danger-active-color: #ffe7e8;
-  --ring-button-danger-hover-color: var(--ring-icon-error-color);
-  --ring-button-loader-background: #33a3ff;
-  --ring-button-dark-icon-color: #80929d;
-  --ring-button-dark-border-disabled-color: #333;
-  --ring-button-dark-icon-disabled-color: var(--ring-dark-disabled-color);
-  --ring-button-dark-danger-active-color: #26080a;
-  --ring-button-dark-danger-hover-color: var(--ring-error-color);
-  --ring-button-dark-active-color: #062640;
-  --ring-button-dark-loader-background: #002039;
-  /* stylelint-enable color-no-hex */
+.heightS {
+  --ring-button-height: calc(unit * 3);
+  --ring-button-font-size: var(--ring-font-size-smaller);
 }
 
-.light {
-  color: var(--ring-text-color);
-  background-color: var(--ring-content-background-color);
-  box-shadow: button-shadow var(--ring-borders-color);
-
-  &:hover {
-    box-shadow: button-shadow var(--ring-border-hover-color);
-  }
-
-  &:active,
-  &.active {
-    background-color: var(--ring-selected-background-color);
-    box-shadow: button-shadow var(--ring-border-hover-color);
-  }
-
-  &:global(.focus-visible) {
-    box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
-  }
-
-  &[disabled] {
-    box-shadow: button-shadow var(--ring-border-disabled-color);
-  }
-
-  &[disabled],
-  &[disabled].withIcon {
-    color: var(--ring-disabled-color);
-  }
-
-  &[disabled] .icon {
-    color: var(--ring-icon-disabled-color);
-  }
-
-  &.primary:active,
-  &.primary.active {
-    background-color: var(--ring-button-primary-background-color);
-    box-shadow: button-shadow var(--ring-button-primary-border-color);
-  }
-
-  &.danger:active,
-  &.danger.active {
-    background-color: var(--ring-button-danger-active-color);
-  }
-
-  &.danger:active,
-  &.danger.active,
-  &.danger:global(.focus-visible) {
-    box-shadow: button-shadow var(--ring-button-danger-hover-color);
-  }
-
-  &.withIcon {
-    color: var(--ring-secondary-color);
-  }
-
-  & .loaderBackground::before {
-    background-image:
-      linear-gradient(
-        to right,
-        var(--ring-content-background-color),
-        var(--ring-selected-background-color) 40%,
-        var(--ring-content-background-color) 80%
-      );
-  }
-}
-
-.light.danger:hover {
-  box-shadow: button-shadow var(--ring-button-danger-hover-color);
-}
-
-.dark {
-  color: var(--ring-dark-secondary-color);
-  background-color: var(--ring-navigation-background-color);
-  box-shadow: button-shadow var(--ring-dark-borders-color);
-
-  &:hover {
-    box-shadow: button-shadow var(--ring-dark-border-hover-color);
-  }
-
-  &:active,
-  &.active {
-    color: var(--ring-dark-text-color);
-    background-color: var(--ring-button-dark-active-color);
-    box-shadow: button-shadow var(--ring-dark-border-hover-color);
-  }
-
-  &:global(.focus-visible) {
-    box-shadow: button-shadow var(--ring-dark-border-hover-color), 0 0 0 1px var(--ring-dark-border-hover-color);
-  }
-
-  &[disabled] {
-    box-shadow: button-shadow var(--ring-button-dark-border-disabled-color);
-  }
-
-  &[disabled],
-  &[disabled].withIcon {
-    color: var(--ring-dark-disabled-color);
-  }
-
-  &[disabled] .icon {
-    color: var(--ring-button-dark-icon-disabled-color);
-  }
-
-  &.primary:active,
-  &.primary.active {
-    background-color: var(--ring-main-hover-color);
-    box-shadow: button-shadow var(--ring-border-hover-color);
-  }
-
-  &.danger:active,
-  &.danger.active {
-    color: var(--ring-icon-error-color);
-    background-color: var(--ring-button-dark-danger-active-color);
-  }
-
-  &.danger:active,
-  &.danger.active,
-  &.danger:global(.focus-visible) {
-    box-shadow: button-shadow var(--ring-button-dark-danger-hover-color);
-  }
-
-  &.withIcon {
-    color: var(--ring-dark-secondary-color);
-  }
-
-  & .loaderBackground::before {
-    background-image:
-      linear-gradient(
-        to right,
-        var(--ring-navigation-background-color),
-        var(--ring-button-dark-loader-background) 40%,
-        var(--ring-navigation-background-color) 80%
-      );
-  }
-
-  & .dropdownIcon {
-    color: var(--ring-dark-secondary-color);
-  }
+.heightM {
+  --ring-button-height: calc(unit * 3.5);
+  --ring-button-font-size: var(--ring-font-size);
 }
 
-.dark.danger:hover {
-  box-shadow: button-shadow var(--ring-button-dark-danger-hover-color);
+.heightL {
+  --ring-button-height: calc(unit * 4);
+  --ring-button-font-size: var(--ring-font-size);
 }
 
 .button {
-  composes: button from "../button-group/button-group.css";
-  composes: button from "../button-set/button-set.css";
-  composes: button from "../button-toolbar/button-toolbar.css";
-
   position: relative;
 
   display: inline-block;
@@ -183,25 +34,62 @@
   transition: color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
   text-decoration: none;
 
+  color: var(--ring-text-color);
+
   border: 0;
   border-radius: var(--ring-border-radius);
   outline: 0;
+  background-color: var(--ring-content-background-color);
+  box-shadow: button-shadow var(--ring-borders-color);
 
   font-family: var(--ring-font-family);
-  font-size: var(--ring-font-size-smaller);
+  font-size: var(--ring-button-font-size);
 
   line-height: height;
 
   &:hover {
     transition: none;
+
+    box-shadow: button-shadow var(--ring-border-hover-color);
+  }
+
+  &:active {
+    transition: none;
+
+    background-color: var(--ring-selected-background-color);
+    box-shadow: button-shadow var(--ring-border-hover-color);
   }
 
   &:global(.focus-visible) {
     transition: none;
+
+    box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+  }
+
+  &.active {
+    transition: none;
+
+    box-shadow: button-shadow var(--ring-main-color);
+  }
+
+  &:global(.focus-visible).active {
+    box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
   &[disabled] {
     pointer-events: none;
+
+    background-color: var(--ring-disabled-background-color);
+    box-shadow: button-shadow var(--ring-border-disabled-color);
+  }
+
+  &[disabled],
+  &[disabled].withIcon {
+    color: var(--ring-disabled-color);
+  }
+
+  &[disabled] .icon {
+    color: var(--ring-icon-disabled-color);
   }
 
   &::-moz-focus-inner {
@@ -212,26 +100,37 @@
   }
 }
 
-.active {
-  composes: active from "../button-group/button-group.css";
+.withIcon {
+  color: var(--ring-secondary-color);
 }
 
 .primary {
-  color: var(--ring-dark-text-color);
+  color: var(--ring-white-text-color);
   background-color: var(--ring-main-color);
   box-shadow: none;
 
+  &:hover {
+    transition: none;
+
+    background-color: var(--ring-main-hover-color);
+    box-shadow: none;
+  }
+
   &.withIcon,
   &.withIcon:active,
   &.withIcon.active {
     color: var(--ring-main-color);
   }
 
-  &:global(.focus-visible) {
-    transition: none;
+  &:global(.focus-visible),
+  &:active,
+  &.active {
+    background-color: var(--ring-button-primary-background-color);
+  }
 
-    background-color: var(--ring-main-hover-color);
-    box-shadow: none;
+  &:active,
+  &.active {
+    box-shadow: button-shadow var(--ring-button-primary-border-color);
   }
 
   &[disabled] {
@@ -240,7 +139,7 @@
   }
 
   &[disabled].loader {
-    color: var(--ring-dark-text-color);
+    color: var(--ring-white-text-color);
   }
 
   & .loaderBackground {
@@ -263,13 +162,6 @@
   }
 }
 
-.primary:hover {
-  transition: none;
-
-  background-color: var(--ring-main-hover-color);
-  box-shadow: none;
-}
-
 .danger {
   &,
   &.withIcon,
@@ -281,17 +173,21 @@
     color: var(--ring-error-color);
   }
 
+  &:active,
+  &.active {
+    background-color: var(--ring-button-danger-active-color);
+  }
+
+  &:active,
+  &.active,
   &:global(.focus-visible),
   &:hover {
-    transition: none;
+    box-shadow: button-shadow var(--ring-button-danger-hover-color);
   }
-}
 
-.dark.danger {
-  &,
-  &:active,
-  &.active {
-    color: var(--ring-icon-error-color);
+  &:global(.focus-visible),
+  &:hover {
+    transition: none;
   }
 }
 
@@ -380,22 +276,14 @@
   }
 }
 
-.withNormalIconLight .icon {
+.withNormalIcon .icon {
   transition: color var(--ring-ease);
 
   color: var(--ring-icon-color);
 }
 
-.withNormalIconDark .icon {
-  transition: color var(--ring-ease);
-
-  color: var(--ring-button-dark-icon-color);
-}
-
-.withNormalIconLight:active,
-.withNormalIconLight.active,
-.withNormalIconDark:active,
-.withNormalIconDark.active {
+.withNormalIcon:active,
+.withNormalIcon.active {
   color: var(--ring-main-color);
 
   & .icon {
@@ -405,25 +293,18 @@
   }
 }
 
-.withNormalIconLight:hover .icon,
-.withNormalIconDark:hover .icon,
-.withDangerIconLight:hover .icon,
-.withDangerIconDark:hover .icon {
+.withNormalIcon:hover .icon,
+.withDangerIcon:hover .icon {
   transition: none;
 
   color: inherit;
 }
 
-.withDangerIconLight .icon,
-.withDangerIconLight:active .icon {
+.withDangerIcon .icon,
+.withDangerIcon:active .icon {
   color: var(--ring-icon-error-color);
 }
 
-.withDangerIconDark .icon,
-.withDangerIconDark:active .icon {
-  color: var(--ring-error-color);
-}
-
 .loader {
   position: relative;
   z-index: 0;
@@ -454,6 +335,14 @@
     content: "";
     animation: progress 1s linear infinite;
 
+    background-image:
+      linear-gradient(
+        to right,
+        var(--ring-content-background-color),
+        var(--ring-selected-background-color) 40%,
+        var(--ring-content-background-color) 80%
+      );
+
     background-repeat: repeat;
     background-size: loaderWidth;
   }

package/components/button/button.d.ts

@@ -1,10 +1,11 @@
 import 'focus-visible';
-import React, { PureComponent, ButtonHTMLAttributes, ClassAttributes } from 'react';
+import React, { PureComponent, ButtonHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { IconType, Size } from '../icon/icon';
-import Theme, { ThemeOuterProps, ThemeProps } from '../global/theme';
 import { ClickableLinkProps } from '../link/clickableLink';
-export interface ButtonBaseProps extends ThemeProps {
+import { ControlsHeight } from '../global/controls-height';
+export interface ButtonBaseProps {
+    height?: ControlsHeight | undefined;
     active?: boolean | null | undefined;
     danger?: boolean | null | undefined;
     delayed?: boolean | null | undefined;
@@ -36,7 +37,6 @@ export declare type ButtonProps = ButtonButtonProps | ButtonLinkProps;
  */
 export declare class Button extends PureComponent<ButtonProps> {
     static propTypes: {
-        theme: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         danger: PropTypes.Requireable<boolean>;
         delayed: PropTypes.Requireable<boolean>;
@@ -57,12 +57,11 @@ export declare class Button extends PureComponent<ButtonProps> {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static IconSize: typeof Size;
-    static Theme: typeof Theme;
+    static contextType: React.Context<ControlsHeight>;
     buttonRef: React.RefObject<HTMLButtonElement>;
     render(): JSX.Element;
 }
 export { Size as IconSize };
-export declare type ContainerProps<T> = Omit<T, keyof ThemeProps> & ThemeOuterProps & ClassAttributes<Button>;
+export declare type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;
 export declare type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
-declare const _default: React.ForwardRefExoticComponent<ButtonAttrs> & Pick<typeof Button, "Theme" | "IconSize">;
-export default _default;
+export default Button;

package/components/button/button.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
 import Icon, { Size } from '../icon/icon';
-import Theme, { withTheme } from '../global/theme';
 import ClickableLink from '../link/clickableLink';
+import { ControlsHeightContext } from '../global/controls-height';
 import styles from './button.css';
 import { getButtonClasses } from './button__classes';
 /**
@@ -16,7 +16,6 @@ import { getButtonClasses } from './button__classes';
  */
 export class Button extends PureComponent {
     static propTypes = {
-        theme: PropTypes.oneOf(['light', 'dark']),
         active: PropTypes.bool,
         danger: PropTypes.bool,
         delayed: PropTypes.bool,
@@ -37,16 +36,16 @@ export class Button extends PureComponent {
         onClick: PropTypes.func
     };
     static IconSize = Size;
-    static Theme = Theme;
+    static contextType = ControlsHeightContext;
     buttonRef = createRef();
     render() {
         const { 
         // Modifiers
-        theme, active, danger, delayed, loader, primary, short, text, inline, dropdown, 
+        active, danger, delayed, loader, primary, short, text, inline, dropdown, height = this.context, 
         // Props
         icon, iconSize, iconClassName, iconSuppressSizeWarning, className, children, ...props } = this.props;
-        const classes = getButtonClasses({ className, active, danger, delayed, icon, theme, loader,
-            primary, short, text, inline });
+        const classes = getButtonClasses({ className, active, danger, delayed, icon, loader,
+            primary, short, text, inline, height });
         const content = (<span className={styles.content}>
         {icon && (<span className={classNames(styles.icon, iconClassName)}>
             <Icon glyph={icon} size={iconSize} loading={loader} suppressSizeWarning={iconSuppressSizeWarning}/>
@@ -69,5 +68,4 @@ export class Button extends PureComponent {
     }
 }
 export { Size as IconSize };
-const ThemedButton = withTheme()(Button);
-export default ThemedButton;
+export default Button;

package/components/button/button__classes.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './button';
-export declare function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, theme }: ButtonProps): string;
+export declare function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, height }: ButtonProps): string;

package/components/button/button__classes.js

@@ -1,17 +1,14 @@
 import classNames from 'classnames';
-import Theme from '../global/theme';
 import styles from './button.css';
-export function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, theme }) {
+export function getButtonClasses({ className, active, disabled, loader, primary, short, text, inline, danger, delayed, icon, height }) {
     const withNormalIcon = icon && !active && !danger && !primary && !disabled;
-    return classNames(styles.button, className, styles[theme], {
+    return classNames(styles.button, className, styles[`height${height}`], {
         [styles.active]: active,
         [styles.danger]: danger,
         [styles.delayed]: delayed,
         [styles.withIcon]: icon,
-        [styles.withNormalIconLight]: (withNormalIcon && theme === Theme.LIGHT),
-        [styles.withNormalIconDark]: (withNormalIcon && theme === Theme.DARK),
-        [styles.withDangerIconLight]: (icon && danger && theme === Theme.LIGHT),
-        [styles.withDangerIconDark]: (icon && danger && theme === Theme.DARK),
+        [styles.withNormalIcon]: withNormalIcon,
+        [styles.withDangerIcon]: icon && danger,
         [styles.loader]: loader && !icon,
         [styles.primary]: primary,
         [styles.short]: short,