@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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);
+.heightM {
+  --ring-button-height: calc(unit * 3.5);
+  --ring-button-font-size: var(--ring-font-size);
 }
 
-.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);
-  }
-}
-
-.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,35 +100,46 @@
   }
 }
 
-.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] {
-    background-color: var(--ring-content-background-color);
-    box-shadow: button-shadow var(--ring-borders-color);
+    background-color: var(--ring-disabled-background-color);
+    box-shadow: button-shadow var(--ring-border-disabled-color);
   }
 
   &[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

@@ -0,0 +1,67 @@
+import 'focus-visible';
+import React, { PureComponent, ButtonHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
+import { ControlsHeight } from '../global/controls-height';
+export interface ButtonBaseProps {
+    height?: ControlsHeight | undefined;
+    active?: boolean | null | undefined;
+    danger?: boolean | null | undefined;
+    delayed?: boolean | null | undefined;
+    loader?: boolean | null | undefined;
+    primary?: boolean | null | undefined;
+    short?: boolean | null | undefined;
+    text?: boolean | null | undefined;
+    inline?: boolean | null | undefined;
+    dropdown?: boolean | null | undefined;
+    disabled?: boolean | undefined;
+    icon?: string | IconType | null | undefined;
+    iconSize?: Size | null | undefined;
+    iconClassName?: string | null | undefined;
+    iconSuppressSizeWarning?: boolean | null | undefined;
+}
+export interface ButtonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonBaseProps {
+    href?: undefined;
+}
+export interface ButtonLinkProps extends ClickableLinkProps, ButtonBaseProps {
+    autoFocus?: never;
+    href: string;
+}
+export declare type ButtonProps = ButtonButtonProps | ButtonLinkProps;
+/**
+ * @name Button
+ */
+/**
+ * A component for displaying variously styled buttons.
+ */
+export declare class Button extends PureComponent<ButtonProps> {
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        danger: PropTypes.Requireable<boolean>;
+        delayed: PropTypes.Requireable<boolean>;
+        loader: PropTypes.Requireable<boolean>;
+        primary: PropTypes.Requireable<boolean>;
+        short: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<boolean>;
+        inline: PropTypes.Requireable<boolean>;
+        dropdown: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        target: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        iconSize: PropTypes.Requireable<number>;
+        iconClassName: PropTypes.Requireable<string>;
+        iconSuppressSizeWarning: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static IconSize: typeof Size;
+    static contextType: React.Context<ControlsHeight>;
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    render(): JSX.Element;
+}
+export { Size as IconSize };
+export declare type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;
+export declare type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
+export default Button;

package/components/button/button.js

@@ -1,122 +1,71 @@
 import 'focus-visible';
-import React, {createRef, PureComponent} from 'react';
+import React, { createRef, PureComponent } from 'react';
 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 Icon, { Size } from '../icon/icon';
 import ClickableLink from '../link/clickableLink';
-
+import { ControlsHeightContext } from '../global/controls-height';
 import styles from './button.css';
-import {getButtonClasses} from './button__classes';
-
+import { getButtonClasses } from './button__classes';
 /**
  * @name Button
  */
 /**
  * A component for displaying variously styled buttons.
  */
-class Button extends PureComponent {
-  static propTypes = {
-    theme: PropTypes.oneOf(['light', 'dark']),
-    active: PropTypes.bool,
-    danger: PropTypes.bool,
-    delayed: PropTypes.bool,
-    loader: PropTypes.bool,
-    primary: PropTypes.bool,
-    short: PropTypes.bool,
-    text: PropTypes.bool,
-    inline: PropTypes.bool,
-    dropdown: PropTypes.bool,
-
-    href: PropTypes.string,
-    target: PropTypes.string,
-
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    iconSize: PropTypes.number,
-    iconClassName: PropTypes.string,
-    iconSuppressSizeWarning: PropTypes.bool,
-
-    className: PropTypes.string,
-
-    children: PropTypes.node,
-    onClick: PropTypes.func
-  };
-
-  static IconSize = Size;
-  static Theme = Theme;
-
-  buttonRef = createRef();
-
-  render() {
-    const {
-      // Modifiers
-      theme,
-      active,
-      danger,
-      delayed,
-      loader,
-      primary,
-      short,
-      text,
-      inline,
-      dropdown,
-
-      // 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 content = (
-      <span className={styles.content}>
-        {icon && (
-          <span className={classNames(styles.icon, iconClassName)}>
-            <Icon
-              glyph={icon}
-              size={iconSize}
-              loading={loader}
-              suppressSizeWarning={iconSuppressSizeWarning}
-            />
-          </span>
-        )}
-        {children && (
-          <span>{children}</span>
-        )}
-        {dropdown && (
-          <Icon
-            glyph={chevronDown}
-            className={styles.dropdownIcon}
-          />
-        )}
-      </span>
-    );
-    const isLink = !!props.href;
-
-    const Tag = isLink ? ClickableLink : 'button';
-    return (
-      <Tag
-        ref={this.buttonRef}
-        tabIndex={loader ? -1 : 0}
-        type={isLink ? null : 'button'}
-        {...props}
-        className={classes}
-      >
+export class Button extends PureComponent {
+    static propTypes = {
+        active: PropTypes.bool,
+        danger: PropTypes.bool,
+        delayed: PropTypes.bool,
+        loader: PropTypes.bool,
+        primary: PropTypes.bool,
+        short: PropTypes.bool,
+        text: PropTypes.bool,
+        inline: PropTypes.bool,
+        dropdown: PropTypes.bool,
+        href: PropTypes.string,
+        target: PropTypes.string,
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        iconSize: PropTypes.number,
+        iconClassName: PropTypes.string,
+        iconSuppressSizeWarning: PropTypes.bool,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        onClick: PropTypes.func
+    };
+    static IconSize = Size;
+    static contextType = ControlsHeightContext;
+    buttonRef = createRef();
+    render() {
+        const { 
+        // Modifiers
+        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, 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}/>
+          </span>)}
+        {children && (<span>{children}</span>)}
+        {dropdown && (<Icon glyph={chevronDown} className={styles.dropdownIcon}/>)}
+      </span>);
+        const commonProps = {
+            tabIndex: loader ? -1 : 0,
+            ...props,
+            className: classes,
+            children: <>
         {loader && !text && !icon && <div className={styles.loaderBackground}/>}
         {content}
-      </Tag>
-    );
-  }
+      </>
+        };
+        return commonProps.href != null
+            ? (<ClickableLink {...commonProps}/>)
+            : (<button ref={this.buttonRef} type="button" {...commonProps}/>);
+    }
 }
-
-export {Size as IconSize};
-
-export default withTheme()(Button);
+export { Size as IconSize };
+export default Button;

package/components/button/button__classes.d.ts

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