@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/button/button.css

@@ -0,0 +1,398 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value button-shadow: inset 0 0 0 1px;
+@value height: var(--ring-button-height);
+@value loaderWidth: calc(unit * 8);
+
+.heightS {
+  --ring-button-height: calc(unit * 3);
+  --ring-button-font-size: var(--ring-font-size-smaller);
+}
+
+.heightM {
+  --ring-button-height: calc(unit * 3.5);
+  --ring-button-font-size: var(--ring-font-size);
+}
+
+.heightL {
+  --ring-button-height: calc(unit * 4);
+  --ring-button-font-size: var(--ring-font-size);
+}
+
+.button {
+  position: relative;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  height: height;
+  margin: 0;
+  padding: 0 calc(unit * 2);
+
+  cursor: pointer;
+  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-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);
+  }
+
+  &: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;
+
+    background-color: var(--ring-hover-background-color);
+    box-shadow: button-shadow var(--ring-main-color);
+  }
+
+  &:focus-visible.active {
+    box-shadow: inset 0 0 0 2px 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].active {
+    background-color: var(--ring-disabled-selected-background-color);
+    box-shadow: button-shadow var(--ring-border-selected-disabled-color);
+  }
+
+  &[disabled],
+  &[disabled].withIcon {
+    color: var(--ring-disabled-color);
+  }
+
+  &[disabled] .icon {
+    color: var(--ring-icon-disabled-color);
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+    outline: 0;
+  }
+}
+
+.withIcon {
+  color: var(--ring-secondary-color);
+}
+
+.primary {
+  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-action-link-color);
+  }
+
+  &:focus-visible,
+  &:active,
+  &.active {
+    background-color: var(--ring-button-primary-background-color);
+  }
+
+  &:active,
+  &.active {
+    box-shadow: button-shadow var(--ring-button-primary-border-color);
+  }
+
+  &[disabled] {
+    background-color: var(--ring-disabled-background-color);
+    box-shadow: button-shadow var(--ring-border-disabled-color);
+  }
+
+  &[disabled].loader {
+    color: var(--ring-white-text-color);
+  }
+
+  & .loaderBackground {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: var(--ring-border-radius);
+
+    &::before {
+      background-image:
+        linear-gradient(
+          to right,
+          var(--ring-main-color),
+          var(--ring-button-loader-background) 40%,
+          var(--ring-main-color) 80%
+        );
+    }
+  }
+}
+
+.danger {
+  &,
+  &.withIcon,
+  &.withIcon:active,
+  &.withIcon.active,
+  &.text,
+  &.text:active,
+  &.text.active {
+    color: var(--ring-error-color);
+  }
+
+  &:active,
+  &.active {
+    background-color: var(--ring-button-danger-active-color);
+  }
+
+  &:active,
+  &.active,
+  &:focus-visible,
+  &:hover {
+    box-shadow: button-shadow var(--ring-button-danger-hover-color);
+  }
+
+  &:focus-visible,
+  &:hover {
+    transition: none;
+  }
+}
+
+.text.text,
+.withIcon.withIcon {
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover {
+    transition: none;
+  }
+
+  &:active,
+  &.active {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--ring-border-hover-color);
+  }
+}
+
+.loader.text > .content {
+  animation-name: text-loading;
+  animation-duration: 1200ms;
+  animation-iteration-count: infinite;
+}
+
+.text.text:hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.withIcon:hover:not(:focus-visible) {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.text {
+  color: var(--ring-action-link-color);
+}
+
+.inline {
+  display: inline-block;
+
+  margin: 0;
+  padding: 0;
+
+  font-size: var(--ring-font-size);
+}
+
+.withIcon {
+  padding: 0 unit;
+}
+
+.text {
+  &:active,
+  &.active {
+    color: var(--ring-link-hover-color);
+  }
+}
+
+.withIcon {
+  &:active,
+  &.active {
+    color: var(--ring-action-link-color);
+  }
+}
+
+.withIcon:hover {
+  color: var(--ring-link-hover-color);
+}
+
+.text:hover {
+  color: var(--ring-link-hover-color);
+}
+
+.icon {
+  color: inherit;
+
+  line-height: normal;
+
+  &:not(:last-child) {
+    margin-right: calc(unit * 0.5);
+  }
+}
+
+.withNormalIcon .icon {
+  transition: color var(--ring-ease);
+
+  color: var(--ring-icon-color);
+}
+
+.withNormalIcon:active,
+.withNormalIcon.active {
+  color: var(--ring-main-color);
+
+  & .icon {
+    transition: none;
+
+    color: inherit;
+  }
+}
+
+.withNormalIcon:hover .icon,
+.withDangerIcon:hover .icon {
+  transition: none;
+
+  color: inherit;
+}
+
+.withDangerIcon .icon,
+.withDangerIcon:active .icon {
+  color: var(--ring-icon-error-color);
+}
+
+.loader {
+  position: relative;
+  z-index: 0;
+
+  pointer-events: none;
+
+  background-color: transparent;
+}
+
+.loaderBackground {
+  position: absolute;
+  z-index: -1;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+
+  overflow: hidden;
+
+  border-radius: var(--ring-border-radius-small);
+
+  &::before {
+    display: block;
+
+    width: calc(100% + loaderWidth);
+    height: 100%;
+
+    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;
+  }
+}
+
+.delayed .content::after {
+  content: "…";
+}
+
+.short {
+  width: calc(unit * 4);
+  padding: 0;
+}
+
+.dropdownIcon {
+  margin-right: -2px;
+
+  margin-left: 2px;
+
+  transition: color var(--ring-ease);
+
+  color: var(--ring-icon-secondary-color);
+
+  line-height: normal;
+}
+
+.button:hover .dropdownIcon {
+  transition: none;
+
+  color: var(--ring-main-color);
+}
+
+@keyframes progress {
+  from {
+    transform: translateX(calc(0 - loaderWidth));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes text-loading {
+  50% {
+    opacity: 0.5;
+  }
+}

package/components/button/button.d.ts

@@ -0,0 +1,67 @@
+import React, { PureComponent, ButtonHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { IconProps, IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
+import { ControlsHeight, ControlsHeightContext } 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?: IconProps['size'];
+    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 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<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
+        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>;
+    context: React.ContextType<typeof ControlsHeightContext>;
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    render(): React.JSX.Element;
+}
+export { Size as IconSize };
+export type ContainerProps<T extends ButtonProps> = JSX.LibraryManagedAttributes<typeof Button, T>;
+export type ButtonAttrs = ContainerProps<ButtonButtonProps> | ContainerProps<ButtonLinkProps>;
+export default Button;

package/components/button/button.js

@@ -0,0 +1,70 @@
+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 ClickableLink from '../link/clickableLink';
+import { ControlsHeightContext } from '../global/controls-height';
+import styles from './button.css';
+import { getButtonClasses } from './button__classes';
+/**
+ * @name Button
+ */
+/**
+ * A component for displaying variously styled buttons.
+ */
+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}
+      </>
+        };
+        return commonProps.href != null
+            ? (<ClickableLink {...commonProps}/>)
+            : (<button ref={this.buttonRef} type="button" {...commonProps}/>);
+    }
+}
+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;

package/components/button/button__classes.js

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import styles from './button.css';
+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[`height${height}`], {
+        [styles.active]: active,
+        [styles.danger]: danger,
+        [styles.delayed]: delayed,
+        [styles.withIcon]: icon,
+        [styles.withNormalIcon]: withNormalIcon,
+        [styles.withDangerIcon]: icon && danger,
+        [styles.loader]: loader && !icon,
+        [styles.primary]: primary,
+        [styles.short]: short,
+        [styles.text]: text,
+        [styles.inline]: inline
+    });
+}