@jetbrains/ring-ui 6.0.4-beta.0 → 6.0.4

package/README.md

@@ -1,27 +1,31 @@
 # Ring UI — JetBrains Web UI components
 [![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
 
-[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
+[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
 ## Try now
-* Try the [codesandbox](https://codesandbox.io/s/ring-ui-sandbox-wrigs), based on `create-react-app` tooling, to see and try the UI components
+* Try the [codesandbox](https://codesandbox.io/p/devbox/ring-ui-6-0-demo-l5v5fk), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
 
 ## Installation
 
-`npm install @jetbrains/ring-ui`
+* For Quick Start, use pre-built version: 
+  `npm install @jetbrains/ring-ui-built`
+* For complex projects, use "sources" version
+  `npm install @jetbrains/ring-ui`
+  You will then need to include building Ring UI into your WebPack build (see "Building Ring UI from source via Webpack" below)
 
 ### Quick start
 
 The easiest way is to import necessary components as ES modules:
 ```js
 // You need to import RingUI styles once
-import '@jetbrains/ring-ui/dist/style.css';
+import '@jetbrains/ring-ui-built/components/style.css';
 
-import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
-import Button from '@jetbrains/ring-ui/dist/button/button';
+import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';
+import Button from '@jetbrains/ring-ui-built/components/button/button';
 
 ...
 

package/components/alert/alert.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value link from "../link/link.css";
-@value unit from "../global/global.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
@@ -12,9 +11,9 @@
   align-items: baseline;
 
   box-sizing: border-box;
-  min-height: calc(unit * 5);
-  margin: unit auto;
-  padding: 0 calc(unit * 2);
+  min-height: calc(var(--ring-unit) * 5);
+  margin: var(--ring-unit) auto;
+  padding: 0 calc(var(--ring-unit) * 2);
 
   transition:
     transform animation-duration animation-easing,
@@ -28,11 +27,11 @@
   box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);
-  line-height: calc(unit * 5);
+  line-height: calc(var(--ring-unit) * 5);
 }
 
 .alertInline {
-  margin: unit;
+  margin: var(--ring-unit);
 }
 
 .error {
@@ -42,13 +41,13 @@
 }
 
 .icon {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .caption {
   overflow: hidden;
 
-  max-width: calc(100% - calc(unit * 5));
+  max-width: calc(100% - calc(var(--ring-unit) * 5));
 
   margin: 12px 0;
 
@@ -65,12 +64,12 @@
   }
 
   &.withCloseButton {
-    margin-right: calc(unit * 5);
+    margin-right: calc(var(--ring-unit) * 5);
   }
 }
 
 .badge {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   vertical-align: baseline;
 }
@@ -78,7 +77,7 @@
 .loader {
   top: 2px;
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .close.close {
@@ -86,8 +85,8 @@
   top: 2px;
   right: 0;
 
-  margin: calc(unit / 2);
-  padding: unit;
+  margin: calc(var(--ring-unit) / 2);
+  padding: var(--ring-unit);
 
   font-size: 0;
   line-height: 0;

package/components/alert/container.css

@@ -1,12 +1,10 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .alertContainer {
   position: fixed;
   z-index: var(--ring-alert-z-index);
-  right: calc(unit * 2);
-  bottom: calc(unit);
+  right: calc(var(--ring-unit) * 2);
+  bottom: calc(var(--ring-unit));
 
   display: flex;
   overflow: visible;
@@ -22,7 +20,7 @@
 .alertInContainer {
   composes: alert from "./alert.css";
 
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 50);
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 50);
   margin-top: 0;
 }

package/components/alert-service/alert-service.stories.css

@@ -1,9 +1,6 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value icon from "../button/button.css";
-@value animation-duration: 300ms;
-@value animation-easing: ease-out;
 
 .customAlert {
   color: var(--ring-white-text-color);

package/components/auth/down-notification.css

@@ -1,17 +1,15 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .title {
   font-weight: 600;
 }
 
 .error {
-  margin-top: calc(unit / 2);
+  margin-top: calc(var(--ring-unit) / 2);
 
   word-wrap: break-word;
 
   color: var(--ring-text-color);
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }

package/components/auth/request-builder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="typings" />
 import uuid from 'simply-uuid';
 import AuthStorage, { AuthState } from './storage';
 export interface AuthRequestBuilderConfig {

package/components/auth-dialog/auth-dialog.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .dialog.dialog {
   width: auto;
   max-width: 400px;
@@ -14,23 +12,23 @@
   align-items: center;
   flex-direction: column;
 
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }
 
 .button {
-  width: calc(unit * 25);
-  margin-top: unit;
+  width: calc(var(--ring-unit) * 25);
+  margin-top: var(--ring-unit);
 }
 
 .firstButton {
   composes: button;
 
-  margin-top: calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 4);
 }
 
 .title.title {
   margin-top: 0;
-  margin-bottom: unit;
+  margin-bottom: var(--ring-unit);
 
   text-align: center;
 
@@ -38,14 +36,14 @@
 }
 
 .logo {
-  width: calc(unit * 12);
-  height: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
+  height: calc(var(--ring-unit) * 12);
   margin-bottom: 12px;
   object-fit: contain;
 
-  @media (max-height: 400px) {
-    width: calc(unit * 4);
-    height: calc(unit * 4);
+  @media (height <= 400px) {
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 4);
   }
 }
 

package/components/badge/badge.css

@@ -1,13 +1,11 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .badge {
   display: inline-block;
 
   box-sizing: border-box;
   height: 20px;
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   cursor: default;
 

package/components/button/button.css

@@ -1,22 +1,20 @@
 @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);
+@value loaderWidth: calc(var(--ring-unit) * 8);
 
 .heightS {
-  --ring-button-height: calc(unit * 3);
+  --ring-button-height: calc(var(--ring-unit) * 3);
   --ring-button-font-size: var(--ring-font-size-smaller);
 }
 
 .heightM {
-  --ring-button-height: calc(unit * 3.5);
+  --ring-button-height: calc(var(--ring-unit) * 3.5);
   --ring-button-font-size: var(--ring-font-size);
 }
 
 .heightL {
-  --ring-button-height: calc(unit * 4);
+  --ring-button-height: calc(var(--ring-unit) * 4);
   --ring-button-font-size: var(--ring-font-size);
 }
 
@@ -26,9 +24,9 @@
   display: inline-block;
 
   box-sizing: border-box;
-  height: height;
+  height: var(--ring-button-height);
   margin: 0;
-  padding: 0 calc(unit * 2);
+  padding: 0 calc(var(--ring-unit) * 2);
 
   cursor: pointer;
   transition: color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
@@ -45,7 +43,7 @@
   font-family: var(--ring-font-family);
   font-size: var(--ring-button-font-size);
 
-  line-height: height;
+  line-height: var(--ring-button-height);
 
   &:hover {
     transition: none;
@@ -78,7 +76,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
+    cursor: auto;
 
     background-color: var(--ring-disabled-background-color);
     box-shadow: button-shadow var(--ring-border-disabled-color);
@@ -94,7 +92,8 @@
     color: var(--ring-disabled-color);
   }
 
-  &[disabled] .icon {
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled] .icon.icon {
     color: var(--ring-icon-disabled-color);
   }
 
@@ -247,7 +246,7 @@
 }
 
 .withIcon {
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 }
 
 .text {
@@ -278,7 +277,7 @@
   line-height: normal;
 
   &:not(:last-child) {
-    margin-right: calc(unit * 0.5);
+    margin-right: calc(var(--ring-unit) * 0.5);
   }
 }
 
@@ -359,7 +358,7 @@
 }
 
 .short {
-  width: calc(unit * 4);
+  width: calc(var(--ring-unit) * 4);
   padding: 0;
 }
 

package/components/button-group/button-group.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button, active, primary, button-shadow from "../button/button.css";
 
 :root {
@@ -104,8 +103,9 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.buttonGroup .button.button:hover,
-.buttonGroup .button.button:active {
+.buttonGroup .button.button:hover:not(:disabled),
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-border-hover-color);
 }
@@ -154,7 +154,7 @@
 .caption {
   composes: font from "../global/global.css";
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 
   font-size: var(--ring-font-size);
 
@@ -216,7 +216,8 @@
       z-index: var(--ring-button-group-active-z-index);
     }
 
-    &:hover {
+    /* stylelint-disable-next-line selector-max-specificity */
+    &:hover:not(:disabled) {
       z-index: var(--ring-button-group-hover-z-index);
     }
 

package/components/button-set/button-set.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button from "../button/button.css";
 
 .buttonSet {
@@ -13,7 +12,7 @@
   font-size: 0;
 
   & .button {
-    margin: 0 unit 0 0;
+    margin: 0 var(--ring-unit) 0 0;
   }
 
   & > .button:last-child {

package/components/button-toolbar/button-toolbar.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button from "../button/button.css";
 
 .buttonToolbar {
@@ -18,7 +17,7 @@
 .buttonToolbar > .buttonGroup,
 .buttonToolbar > .split,
 .buttonToolbar > .buttonToolbar {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .buttonToolbar > :last-child {

package/components/checkbox/checkbox.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value checkboxSize: 14px;
 
 .checkbox {
@@ -46,8 +45,8 @@
   top: -1px;
   left: -1px;
 
-  width: calc(unit * 2);
-  height: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
 
   opacity: 0;
   color: var(--ring-white-text-color);
@@ -140,7 +139,7 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   line-height: normal;
 }

package/components/code/code.css

@@ -1,16 +1,14 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .code {
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }
 
 /* override hljs */
 .code code {
   display: block;
 
-  padding: calc(unit * 1.5) calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-sidebar-background-color);
@@ -23,7 +21,7 @@
 .inline code {
   display: inline-block;
 
-  padding: 0 calc(unit / 2);
+  padding: 0 calc(var(--ring-unit) / 2);
 }
 
 .softWrap code {

package/components/code/code.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="highlight.js" />
 import React, { PureComponent, Ref } from 'react';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js/lib/core';

package/components/collapse/collapse-content.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    minHeight?: number;
+    className?: string;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseContent
+ */
+export declare const CollapseContent: React.FC<PropsWithChildren<Props>>;
+export default CollapseContent;

package/components/collapse/collapse-content.js

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import { getRect } from '../global/dom';
+import { toPx } from './utils';
+import CollapseContext from './collapse-context';
+import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
+import styles from './collapse.css';
+const DURATION_FACTOR = 0.5;
+const DEFAULT_HEIGHT = 0;
+const VISIBLE = 1;
+const HIDDEN = 0;
+/**
+ * @name CollapseContent
+ */
+export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest }) => {
+    const { collapsed, duration, id, disableAnimation } = useContext(CollapseContext);
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const initialContentHeight = useRef(minHeight);
+    const contentHeight = useRef(DEFAULT_HEIGHT);
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: 0
+    });
+    const [height, setHeight] = useState(toPx(minHeight));
+    const [showFade, setShowFade] = useState(true);
+    useEffect(() => {
+        if (!collapsed) {
+            setShowFade(false);
+        }
+        else {
+            setShowFade(true);
+        }
+    }, [collapsed]);
+    useEffect(() => {
+        if (contentRef.current) {
+            contentHeight.current = getRect(contentRef.current).height;
+        }
+    }, [minHeight, dimensions.height]);
+    useEffect(() => {
+        const nextHeight = collapsed ? initialContentHeight.current : contentHeight.current;
+        setHeight(toPx(nextHeight));
+    }, [collapsed, dimensions.height]);
+    useEffect(() => {
+        if (contentRef.current) {
+            const observer = new ResizeObserver(([entry]) => {
+                if (entry && entry.borderBoxSize) {
+                    const { inlineSize, blockSize } = entry.borderBoxSize[0];
+                    setDimensions({ width: inlineSize, height: blockSize });
+                }
+            });
+            observer.observe(contentRef.current);
+        }
+    }, []);
+    const style = useMemo(() => {
+        const calculatedDuration = duration + contentHeight.current * DURATION_FACTOR;
+        return {
+            '--duration': `${calculatedDuration}ms`,
+            height,
+            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE
+        };
+    }, [duration, height, collapsed, minHeight]);
+    const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
+    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
+      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
+        {children}
+      </div>
+      {fadeShouldBeVisible && <div className={styles.fade}/>}
+    </div>);
+};
+export default CollapseContent;

package/components/collapse/collapse-context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CollapseContextInterface {
+    collapsed: boolean;
+    duration: number;
+    disableAnimation: boolean;
+    setCollapsed: () => void;
+    id: string;
+}
+export declare const CollapseContext: import("react").Context<CollapseContextInterface>;
+export default CollapseContext;

package/components/collapse/collapse-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { BASE_ANIMATION_DURATION } from './consts';
+export const CollapseContext = createContext({
+    collapsed: true,
+    duration: BASE_ANIMATION_DURATION,
+    disableAnimation: false,
+    setCollapsed: () => { },
+    id: ''
+});
+export default CollapseContext;

package/components/collapse/collapse-control.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ChildrenFunction = (collapsed: boolean) => React.ReactNode;
+type Props = {
+    children: ChildrenFunction | React.ReactNode;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseControl
+ */
+export declare const CollapseControl: React.FC<Props>;
+export default CollapseControl;

package/components/collapse/collapse-control.js

@@ -0,0 +1,22 @@
+import React, { useMemo, useContext, cloneElement } from 'react';
+import dataTests from '../global/data-tests';
+import { CollapseContext } from './collapse-context';
+import { COLLAPSE_CONTROL_TEST_ID } from './consts';
+/**
+ * @name CollapseControl
+ */
+export const CollapseControl = ({ children, 'data-test': dataTest }) => {
+    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    const child = useMemo(() => {
+        if (typeof children === 'function') {
+            return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children(collapsed)}</p>;
+        }
+        return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children}</p>;
+    }, [children, collapsed, dataTest]);
+    return cloneElement(child, {
+        onClick: setCollapsed,
+        'aria-controls': `collapse-content-${id}`,
+        'aria-expanded': String(!collapsed)
+    });
+};
+export default CollapseControl;

package/components/collapse/collapse.css

@@ -0,0 +1,40 @@
+.container {
+    position: relative;
+    will-change: height, opacity;
+
+    overflow: hidden;
+
+}
+
+.transition {
+    transition: height var(--duration) ease-in-out 0s, opacity var(--duration) ease-in-out 0s;
+}
+
+.summary {
+    list-style: none;
+
+    cursor: pointer;
+}
+
+.trigger {
+    cursor: pointer;
+
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
+.fade {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: calc(var(--ring-unit) * 3);
+
+    pointer-events: none;
+
+    color: var(--ring-content-background-color);
+    background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
+}

package/components/collapse/collapse.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    onChange?: (collapsed: boolean) => void;
+    duration?: number;
+    disableAnimation?: boolean;
+    className?: string;
+};
+/**
+ * @name Collapse
+ */
+export declare const Collapse: React.FC<PropsWithChildren<Props>>;
+export default Collapse;