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

package/components/form/form.stories.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import '../input/input-legacy.css';
 import './form.css';
 import '../input-size/input-size.css';
@@ -12,107 +13,126 @@ export default {
   }
 };
 
-export const basic = () => `
-      <div style="width: 700px">
-        <form class="ring-form">
-          <span class="ring-form__title">Form Title</span>
-
-          <div class="ring-form__group">
-            <label for="ring-form-1" class="ring-form__label">Full-Width
-              Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-1" type="text">
-            </div>
-          </div>
+export const basic = () => (
+  <div style={{width: 700}}>
+    <form className="ring-form">
+      <span className="ring-form__title">Form Title</span>
+
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-1" className="ring-form__label">Full-Width
+          Input</label>
+        <div className="ring-form__control">
+          <input className="ring-input" id="ring-form-1" type="text"/>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-2" class="ring-form__label">Medium Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_m" id="ring-form-2"
-                type="text">
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-2" className="ring-form__label">Medium Input</label>
+        <div className="ring-form__control">
+          <input
+            className="ring-input ring-input-size_m"
+            id="ring-form-2"
+            type="text"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input_error ring-input-size_m"
-                id="ring-form-3" type="text">
-              <div class="ring-error-bubble active">Error bubble</div>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-3" className="ring-form__label">Medium Input & Error</label>
+        <div className="ring-form__control">
+          <input
+            className="ring-input ring-input_error ring-input-size_m"
+            id="ring-form-3"
+            type="text"
+          />
+          <div className="ring-error-bubble active">Error bubble</div>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-4" class="ring-form__label">Long Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_l" id="ring-form-4"
-                type="text">
-              <div class="ring-error-bubble active">Error bubble for a long
-                control
-              </div>
-            </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-4" className="ring-form__label">Long Input</label>
+        <div className="ring-form__control">
+          <input
+            className="ring-input ring-input-size_l"
+            id="ring-form-4"
+            type="text"
+          />
+          <div className="ring-error-bubble active">Error bubble for a long
+            control
           </div>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-5" class="ring-form__label">Full-Width
-              Control</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-5" type="text">
-              <div class="ring-error-bubble active">Error bubble for a full-width
-                control
-              </div>
-            </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-5" className="ring-form__label">Full-Width
+          Control</label>
+        <div className="ring-form__control">
+          <input className="ring-input" id="ring-form-5" type="text"/>
+          <div className="ring-error-bubble active">Error bubble for a full-width
+            control
           </div>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-7" class="ring-form__label">Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-7"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-7" className="ring-form__label">Textarea</label>
+        <div className="ring-form__control">
+          <textarea
+            className="ring-input ring-input-size_m"
+            id="ring-form-7"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-8" class="ring-form__label">Long
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_l"
-                id="ring-form-8"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-8" className="ring-form__label">Long
+          Textarea</label>
+        <div className="ring-form__control">
+          <textarea
+            className="ring-input ring-input-size_l"
+            id="ring-form-8"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-9" class="ring-form__label">Full-Width
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input" id="ring-form-9"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-9" className="ring-form__label">Full-Width
+          Textarea</label>
+        <div className="ring-form__control">
+          <textarea className="ring-input" id="ring-form-9"/>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-11" class="ring-form__label">Input in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <input class="ring-input ring-input-size_m" id="ring-form-11"
-                type="text">
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-11" className="ring-form__label">Input in
+          a small container</label>
+        <div className="ring-form__control ring-form__control_small">
+          <input
+            className="ring-input ring-input-size_m"
+            id="ring-form-11"
+            type="text"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-12" class="ring-form__label">Textarea in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-12"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <label htmlFor="ring-form-12" className="ring-form__label">Textarea in
+          a small container</label>
+        <div className="ring-form__control ring-form__control_small">
+          <textarea
+            className="ring-input ring-input-size_m"
+            id="ring-form-12"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__footer">
-            <rg-button mode="primary">Save</rg-button>
-            <rg-button>Cancel</rg-button>
-          </div>
-        </form>
+      <div className="ring-form__footer">
+        <rg-button mode="primary">Save</rg-button>
+        {' '}
+        <rg-button>Cancel</rg-button>
       </div>
-    `;
+    </form>
+  </div>
+);
 
 basic.storyName = 'Form';

package/components/global/global.css

@@ -1,11 +1,5 @@
 /* https://readymag.com/artemtiunov/RingUILanguage/colours/ */
 
-/*
-Unit shouldn't be CSS custom property because it is not intended to change
-Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
-*/
-@value unit: 8px;
-
 .clearfix {
   &::after {
     display: block;
@@ -93,7 +87,7 @@ Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
 }
 
 /* Note: footer also has top margin which isn't taken into account here */
-@value footer-height: calc(unit * 8);
+@value footer-height: calc(var(--ring-unit) * 8);
 
 /* Media breakpoints (minimal values) */
 @value breakpoint-small: 640px;

package/components/global/react-render-adapter.d.ts

@@ -1,29 +1 @@
-import type { ReactChild, ReactElement, ReactNode } from 'react';
-import { unmountComponentAtNode as legacyUnmountComponentAtNode } from 'react-dom';
-export declare let render: (element: ReactElement, container: Element | DocumentFragment) => void;
-export declare let unmountComponentAtNode: typeof legacyUnmountComponentAtNode;
-export declare let hydrate: (element: ReactElement, container: Element | Document) => void;
-interface Root {
-    render(children: ReactChild | Iterable<ReactNode>): void;
-    unmount(): void;
-}
-interface RootOptions {
-    /**
-     * Prefix for `useId`.
-     */
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown) => void;
-}
-interface HydrationOptions {
-    /**
-     * Prefix for `useId`.
-     */
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown) => void;
-}
-interface Client {
-    createRoot(container: Element | DocumentFragment, options?: RootOptions): Root;
-    hydrateRoot(container: Element | Document, initialChildren: ReactChild | Iterable<ReactNode>, options?: HydrationOptions): Root;
-}
-export declare function setClient({ createRoot, hydrateRoot }: Client): void;
-export {};
+export declare const setClient: () => void;

package/components/global/react-render-adapter.js

@@ -1,24 +1,3 @@
-/* eslint-disable react/no-deprecated */
-import { render as legacyRender, unmountComponentAtNode as legacyUnmountComponentAtNode, hydrate as legacyHydrate } from 'react-dom';
-/* eslint-enable */
-/* eslint-disable import/no-mutable-exports */
-export let render = legacyRender;
-export let unmountComponentAtNode = legacyUnmountComponentAtNode;
-export let hydrate = legacyHydrate;
-// TODO replace with a noop with warning in 6.0, remove in 7.0
-export function setClient({ createRoot, hydrateRoot }) {
-    const roots = new WeakMap();
-    render = (element, container) => {
-        let root = roots.get(container);
-        if (root == null) {
-            root = createRoot(container);
-            roots.set(container, root);
-        }
-        root.render(element);
-    };
-    unmountComponentAtNode = container => roots.get(container)?.unmount();
-    hydrate = (element, container) => {
-        const root = hydrateRoot(container, element);
-        roots.set(container, root);
-    };
-}
+import deprecate from 'util-deprecate';
+// TODO remove in 7.0
+export const setClient = deprecate(() => { }, 'setClient does nothing in Ring UI 6.0 and will be removed in 7.0');

package/components/global/rerender-hoc.d.ts

@@ -1,41 +1,10 @@
-import { Component, RefAttributes } from 'react';
+import React, { Component } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
 export interface RerenderableComponentClass<P, S> {
     new (props: P): RerenderableComponent<P, S>;
 }
-/**
- * Wraps a component to add a "rerender" method
- * @param ComposedComponent
- * @param captureNode, whether the wrapper should capture this.node itself. Set to false if the component already has "node" property captured
- * @returns {Rerenderer}
- */
-export default function rerenderHOC<P extends {}, S>(ComposedComponent: RerenderableComponentClass<P, S>): {
-    new (props: P): {
-        _propsCache: P & RefAttributes<unknown>;
-        rerender(props?: Partial<P>, callback?: () => void): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        setState<K extends keyof S>(state: S | ((prevState: Readonly<S>, props: Readonly<P>) => S | Pick<S, K> | null) | Pick<S, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): import("react").ReactNode;
-        readonly props: Readonly<P>;
-        state: Readonly<S>;
-        refs: {
-            [key: string]: import("react").ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): any;
-        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
-    };
-};
+export default function rerenderHOC<P extends {}, C extends Component<P, unknown>>(ComposedComponent: {
+    new (props: P): C;
+}): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<C>>;

package/components/global/rerender-hoc.js

@@ -1,28 +1,14 @@
-import { createElement } from 'react';
-import { render } from './react-render-adapter';
+import React, { Component, forwardRef } from 'react';
 import composeRefs from './composeRefs';
-/**
- * Wraps a component to add a "rerender" method
- * @param ComposedComponent
- * @param captureNode, whether the wrapper should capture this.node itself. Set to false if the component already has "node" property captured
- * @returns {Rerenderer}
- */
 export default function rerenderHOC(ComposedComponent) {
-    return class Rerenderer extends ComposedComponent {
-        _propsCache = this.props;
-        rerender(props = {}, callback) {
-            let container;
-            try {
-                container = this.node?.parentNode;
-            }
-            finally {
-                if (!container || !(container instanceof Element)) {
-                    throw new Error(`${this.constructor.name} component isn't mounted`);
-                }
-            }
-            this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-            this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
-            render(createElement(this.constructor, this._propsCache), container);
+    class Rerenderer extends Component {
+        state = this.props.props;
+        render() {
+            const ref = composeRefs(this.props.forwardedRef);
+            return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
-    };
+    }
+    return forwardRef(function RerendererForwardRef(props, ref) {
+        return <Rerenderer props={props} forwardedRef={ref}/>;
+    });
 }

package/components/global/variables.css

@@ -17,8 +17,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
   --ring-border-selected-disabled-components: 212, 212, 212;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
-  --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;
@@ -51,7 +49,7 @@
   --ring-button-danger-hover-color: var(--ring-icon-error-color);
   --ring-button-primary-border-components: 0, 98, 178;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
-  --ring-dialog-overlay-components: 255, 255, 255;
+  --ring-dialog-overlay-components: 0, 0, 0;
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
   --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 

package/components/global/variables.d.ts

@@ -6,7 +6,6 @@ export interface RingCSSProperties {
     '--ring-icon-color'?: Property.Color;
     '--ring-icon-secondary-color'?: Property.Color;
     '--ring-border-disabled-color'?: Property.BorderColor;
-    '--ring-border-unselected-disabled-color'?: Property.Color;
     '--ring-icon-disabled-color'?: Property.Color;
     '--ring-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;

package/components/global/variables_dark.css

@@ -15,8 +15,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #37393D */
   --ring-border-selected-disabled-components: 54, 54, 54;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
-  --ring-border-unselected-disabled-components: 51, 52, 56;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #333438 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 64, 66, 71;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #404247 */
   --ring-border-hover-components: 77, 100, 148;
@@ -93,8 +91,8 @@
   --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5e4d33 */
   --ring-added-background-components: 51, 76, 53;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #334c35 */
-  --ring-disabled-background-components: 38, 40, 43;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #26282B */
+  --ring-disabled-background-components: 45, 47, 50;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #2D2F32 */
   --ring-disabled-selected-background-components: 44, 47, 51;
   --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;

package/components/grid/grid.css

@@ -1,10 +1,10 @@
 @import "../global/variables.css";
 
-@value unit, breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
+@value breakpoint-small, breakpoint-middle, breakpoint-large  from "../global/global.css";
 @value large-screen-media, middle-screen-media, small-screen-media from "../global/global.css";
-@value gutterWidth: (unit*2);
+@value gutterWidth: (var(--ring-unit) * 2);
 @value gutterCompensation: calc(gutterWidth / -2);
-@value outerMargin: calc(unit*2);
+@value outerMargin: calc(var(--ring-unit) * 2);
 @value containerSmall: calc(breakpoint-small + gutterWidth);
 @value containerMedium: calc(breakpoint-middle + gutterWidth);
 @value containerLarge: calc(breakpoint-large + gutterWidth);
@@ -28,7 +28,7 @@
 }
 
 .container-fluid {
-  min-width: calc(unit * 40);
+  min-width: calc(var(--ring-unit) * 40);
   padding-right: outerMargin;
   padding-left: outerMargin;
 }
@@ -48,8 +48,8 @@
 }
 
 .col {
-  margin-top: unit;
-  margin-bottom: unit;
+  margin-top: var(--ring-unit);
+  margin-bottom: var(--ring-unit);
 }
 
 .col.reverse {

package/components/grid/row.js

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import styles from './grid.css';
 const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
 const modifierKeys = [
-    'start', 'center', 'end',
-    'around', 'between',
-    'top', 'middle', 'baseline', 'bottom',
+    'start', 'center', 'end', // text-align, justify-content
+    'around', 'between', // justify-content
+    'top', 'middle', 'baseline', 'bottom', // align-items
     'first', 'last' // order
 ];
 /**

package/components/group/group.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .group {
   & > *:not(:last-child) {
-    margin-right: unit;
+    margin-right: var(--ring-unit);
   }
 }

package/components/header/header.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 @value link, active from "../link/link.css";
-@value height: calc(unit * 8);
 @value compensate: 3px;
-@value compensated: calc(height - compensate);
+@value compensated: calc(calc(var(--ring-unit) * 8) - compensate);
 
 :root {
   --ring-header-link-color: var(--ring-link-color);
@@ -22,7 +20,7 @@
   align-items: center;
 
   box-sizing: border-box;
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-text-color);
 
@@ -34,8 +32,8 @@
     display: inline-block;
 
     box-sizing: border-box;
-    height: height;
-    padding: 0 calc(unit * 1.5) compensate;
+    height: calc(var(--ring-unit) * 8);
+    padding: 0 calc(var(--ring-unit) * 1.5) compensate;
   }
 
   /* override link */
@@ -50,11 +48,11 @@
 
 .headerSpaced {
   & > *:first-child {
-    padding-left: calc(unit * 4);
+    padding-left: calc(var(--ring-unit) * 4);
   }
 
   & > *:last-child {
-    padding-right: calc(unit * 4);
+    padding-right: calc(var(--ring-unit) * 4);
   }
 }
 
@@ -62,7 +60,7 @@
   display: inline-flex;
   align-items: center;
 
-  height: height;
+  height: calc(var(--ring-unit) * 8);
 
   color: var(--ring-navigation-background-color);
 
@@ -90,7 +88,7 @@
 }
 
 .icon {
-  width: calc(unit * 5);
+  width: calc(var(--ring-unit) * 5);
 
   text-align: center;
 
@@ -101,7 +99,7 @@
 .icon.icon {
   height: compensated;
 
-  padding-top: calc(unit / 2);
+  padding-top: calc(var(--ring-unit) / 2);
 
   line-height: compensated;
 }
@@ -125,7 +123,7 @@
 
   width: auto;
   height: compensated;
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   vertical-align: bottom;
 }
@@ -159,8 +157,8 @@
 
     display: block;
 
-    width: unit;
-    height: unit;
+    width: var(--ring-unit);
+    height: var(--ring-unit);
 
     content: "";
 

package/components/header/profile.js

@@ -93,7 +93,7 @@ export default class Profile extends PureComponent {
             {
                 rgItemType: PopupMenu.ListProps.Type.LINK,
                 label: translations?.profile ?? translate('profile'),
-                target: '_self',
+                target: '_self', // Full page reload in Angular
                 href: profileUrl,
                 LinkComponent
             },

package/components/header/services-link.js

@@ -15,14 +15,12 @@ export default class ServicesLink extends PureComponent {
     render() {
         const { service, ...props } = this.props;
         return (<Link target="_self" href={service.homeUrl} {...props}>
-        {WrapText => (service.iconUrl
+        {service.iconUrl
                 ? [
                     <span key="icon" className={styles.itemLogo} style={{ backgroundImage: `url(${service.iconUrl})` }}/>,
-                    <div key="text">
-              <WrapText>{service.name}</WrapText>
-            </div>
+                    <div key="text">{service.name}</div>
                 ]
-                : <WrapText>{service.name}</WrapText>)}
+                : service.name}
       </Link>);
     }
 }