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

package/components/link/link.css

@@ -1,67 +1,43 @@
 @import "../global/variables.css";
 
-.link {
+.link,
+.withLinks a {
   cursor: pointer;
   transition: color var(--ring-fast-ease);
 
   color: var(--ring-link-color);
 
-  &,
-  &:hover {
-    text-decoration: none;
+  outline: none;
+
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+
+  @media (resolution >= 2dppx) {
+    text-decoration-thickness: 0.5px;
   }
 
   &:hover,
   &.hover {
+    text-decoration-line: underline;
+
     transition: none;
 
     color: var(--ring-link-hover-color);
   }
 
-  &:hover .inner {
-    border-width: 0;
-    border-bottom: 2px solid;
-    border-image-source: linear-gradient(currentcolor 50%, transparent 50%);
-    border-image-slice: 0 0 100% 0;
-  }
-
-  &.active {
-    color: inherit;
-  }
-
-  &.compatibilityUnderlineMode:hover {
-    text-decoration: underline;
-
-    /* stylelint-disable-next-line selector-max-specificity */
-    & .inner {
-      border: none;
-    }
-  }
-
+  /* stylelint-disable-next-line selector-max-specificity */
   &.pseudo:hover {
     text-decoration: none;
-
-    /* stylelint-disable-next-line selector-max-specificity */
-    & .inner {
-      border: none;
-    }
   }
 
-  outline: none;
-
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--ring-border-hover-color);
   }
 }
 
-@media (min-resolution: 2dppx) {
-  .link:hover .inner {
-    border-bottom-width: 1px;
-  }
-}
-
-.text {
-  border-radius: var(--ring-border-radius);
+.link.active {
+  color: inherit;
 }
 
 .inherit:not(:hover) {

package/components/link/link.d.ts

@@ -1,25 +1,20 @@
 import React, { ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ClickableLinkProps } from './clickableLink';
-export declare function setCompatibilityMode(isEnabled: boolean): void;
-export interface WrapTextProps {
-    children: ReactNode;
-    className?: string | null | undefined;
-}
-type ChildrenFunction = (WrapText: ComponentType<WrapTextProps>) => ReactNode;
+/**
+ * @name Link
+ */
 export interface LinkBaseProps {
     active?: boolean | null | undefined;
     inherit?: boolean | null | undefined;
     pseudo?: boolean | null | undefined;
     hover?: boolean | null | undefined;
-    innerClassName?: string | null | undefined;
     'data-test'?: string | null | undefined;
-    children: ReactNode | ChildrenFunction;
+    children: ReactNode;
 }
 export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -43,7 +38,6 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -68,12 +62,11 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
     };
     propTypes: {
         className: PropTypes.Requireable<string>;
-        innerClassName: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -83,7 +76,6 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -107,7 +99,6 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -132,12 +123,11 @@ declare const _default: {
     };
     propTypes: {
         className: PropTypes.Requireable<string>;
-        innerClassName: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/link/link.js

@@ -1,71 +1,42 @@
-import React, { PureComponent, memo } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import memoize from '../global/memoize';
 import dataTests from '../global/data-tests';
 import ClickableLink from './clickableLink';
 import styles from './link.css';
-/**
- * @name Link
- */
-let isCompatibilityMode = false;
-export function setCompatibilityMode(isEnabled) {
-    isCompatibilityMode = isEnabled;
-}
-const makeWrapText = memoize((innerClassName) => {
-    function WrapText({ className, children }) {
-        const classes = classNames(styles.inner, className, innerClassName);
-        return <span className={classes}>{children}</span>;
-    }
-    WrapText.propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    return memo(WrapText);
-});
 export function linkHOC(ComposedComponent) {
     const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
     return class Link extends PureComponent {
         static propTypes = {
             className: PropTypes.string,
-            innerClassName: PropTypes.string,
             active: PropTypes.bool,
             inherit: PropTypes.bool,
             pseudo: PropTypes.bool,
             hover: PropTypes.bool,
-            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+            children: PropTypes.node,
             'data-test': PropTypes.string,
             href: PropTypes.string,
             onPlainLeftClick: PropTypes.func,
             onClick: PropTypes.func
         };
-        getChildren() {
-            const { children, innerClassName } = this.props;
-            const WrapText = makeWrapText(innerClassName);
-            return typeof children === 'function'
-                ? children(WrapText)
-                : <WrapText>{children}</WrapText>;
-        }
         render() {
-            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, innerClassName, children, onPlainLeftClick, onClick, ...restProps } = this.props;
+            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, children, onPlainLeftClick, onClick, ...restProps } = this.props;
             const useButton = pseudo || !isCustom && href == null;
             const classes = classNames(styles.link, className, {
                 [styles.active]: active,
                 [styles.inherit]: inherit,
                 [styles.hover]: hover,
-                [styles.compatibilityUnderlineMode]: isCompatibilityMode,
-                [styles.pseudo]: useButton,
-                [styles.text]: typeof children !== 'function'
+                [styles.pseudo]: useButton
             });
             let props = restProps;
             if (isCustom && !props.activeClassName) {
                 props = { ...props, activeClassName: styles.active };
             }
             if (useButton) {
-                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{this.getChildren()}</button>);
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{children}</button>);
             }
             return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
-          {this.getChildren()}
+          {children}
         </ComposedComponent>);
         }
     };

package/components/list/consts.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode, SyntheticEvent } from 'react';
+import React, { ComponentType, ReactNode, ReactElement, SyntheticEvent } from 'react';
 import { LinkProps } from '../link/link';
 import { IconType, Size } from '../icon/icon';
 import { ClickableLinkProps } from '../link/clickableLink';
@@ -14,17 +14,17 @@ export declare enum Type {
     TITLE = 5,
     MARGIN = 6
 }
-export declare enum Dimension {
-    ITEM_PADDING = 16,
-    ITEM_HEIGHT = 32,
-    COMPACT_ITEM_HEIGHT = 24,
-    SEPARATOR_HEIGHT = 25,
-    SEPARATOR_FIRST_HEIGHT = 16,
-    SEPARATOR_TEXT_HEIGHT = 18,
-    TITLE_HEIGHT = 42,
-    INNER_PADDING = 8,
-    MARGIN = 8
-}
+export declare const Dimension: {
+    ITEM_PADDING: number;
+    ITEM_HEIGHT: number;
+    COMPACT_ITEM_HEIGHT: number;
+    SEPARATOR_HEIGHT: number;
+    SEPARATOR_FIRST_HEIGHT: number;
+    SEPARATOR_TEXT_HEIGHT: number;
+    TITLE_HEIGHT: number;
+    INNER_PADDING: number;
+    MARGIN: number;
+};
 export declare const DEFAULT_ITEM_TYPE = Type.ITEM;
 export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' | 'onMouseUp'>> & {
     rgItemType?: Type | null | undefined;
@@ -55,6 +55,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     originalModel?: never;
     LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    labelWrapper?: (children: ReactNode) => ReactElement;
     custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;

package/components/list/consts.js

@@ -11,19 +11,15 @@ export var Type;
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";
 })(Type || (Type = {}));
-// TODO refactor to plain object in 6.0
-export var Dimension;
-(function (Dimension) {
-    Dimension[Dimension["ITEM_PADDING"] = 16] = "ITEM_PADDING";
-    Dimension[Dimension["ITEM_HEIGHT"] = 32] = "ITEM_HEIGHT";
-    Dimension[Dimension["COMPACT_ITEM_HEIGHT"] = 24] = "COMPACT_ITEM_HEIGHT";
-    Dimension[Dimension["SEPARATOR_HEIGHT"] = 25] = "SEPARATOR_HEIGHT";
-    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-    Dimension[Dimension["SEPARATOR_FIRST_HEIGHT"] = 16] = "SEPARATOR_FIRST_HEIGHT";
-    Dimension[Dimension["SEPARATOR_TEXT_HEIGHT"] = 18] = "SEPARATOR_TEXT_HEIGHT";
-    Dimension[Dimension["TITLE_HEIGHT"] = 42] = "TITLE_HEIGHT";
-    Dimension[Dimension["INNER_PADDING"] = 8] = "INNER_PADDING";
-    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-    Dimension[Dimension["MARGIN"] = 8] = "MARGIN";
-})(Dimension || (Dimension = {}));
+export const Dimension = {
+    ITEM_PADDING: 16,
+    ITEM_HEIGHT: 32,
+    COMPACT_ITEM_HEIGHT: 24,
+    SEPARATOR_HEIGHT: 25,
+    SEPARATOR_FIRST_HEIGHT: 16,
+    SEPARATOR_TEXT_HEIGHT: 18,
+    TITLE_HEIGHT: 42,
+    INNER_PADDING: 8,
+    MARGIN: 8
+};
 export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -1,8 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-@value listSpacing: unit;
-
 .list {
   position: relative;
 
@@ -24,10 +21,10 @@
 .separator {
   display: block;
 
-  min-height: listSpacing;
+  min-height: var(--ring-unit);
 
-  margin-top: listSpacing;
-  padding: 0 calc(unit * 2) 1px;
+  margin-top: var(--ring-unit);
+  padding: 0 calc(var(--ring-unit) * 2) 1px;
 
   text-align: right;
   white-space: nowrap;
@@ -64,9 +61,9 @@
 }
 
 .item.item {
-  padding: 3px calc(unit * 2) 5px;
+  padding: 3px calc(var(--ring-unit) * 2) 5px;
 
-  line-height: calc(unit * 3);
+  line-height: calc(var(--ring-unit) * 3);
 }
 
 .itemContainer {
@@ -74,7 +71,7 @@
 }
 
 .compact {
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .error {
@@ -90,9 +87,9 @@
 }
 
 .add {
-  padding: unit calc(2 * unit);
+  padding: var(--ring-unit) calc(2 * var(--ring-unit));
 
-  line-height: calc(4 * unit);
+  line-height: calc(4 * var(--ring-unit));
 }
 
 .top {
@@ -125,7 +122,7 @@
   overflow: hidden;
   flex-shrink: 100;
 
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   text-align: right;
   white-space: nowrap;
@@ -191,7 +188,7 @@
 
   width: 20px;
   height: 20px;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 
   background-repeat: no-repeat;
   background-position: center;
@@ -212,7 +209,7 @@
 
   width: 20px;
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 
   color: var(--ring-icon-secondary-color);
 }
@@ -234,7 +231,7 @@
   float: right;
 
   margin-right: 0;
-  margin-left: calc(unit * 2);
+  margin-left: calc(var(--ring-unit) * 2);
 }
 
 .checkboxContainer {
@@ -244,14 +241,14 @@
 
   width: 20px;
   height: 20px;
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .compact .checkboxContainer {
   top: 0;
 
-  width: calc(unit * 2);
-  height: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
 }
 
 .title {
@@ -259,7 +256,7 @@
 
   margin-top: 10px;
   margin-bottom: 6px;
-  padding: listSpacing calc(unit * 2) 0;
+  padding: var(--ring-unit) calc(var(--ring-unit) * 2) 0;
 
   text-align: left;
 
@@ -287,7 +284,7 @@
   bottom: 0;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   pointer-events: none;
 

package/components/list/list.d.ts

@@ -8,7 +8,7 @@ import { Size } from 'react-virtualized/dist/es/AutoSizer';
 import { WindowScrollerChildProps } from 'react-virtualized/dist/es/WindowScroller';
 import { ShortcutsMap } from '../shortcuts/core';
 import ListHint from './list__hint';
-import { Dimension, ListDataItem, ListDataItemProps, Type } from './consts';
+import { ListDataItem, ListDataItemProps, Type } from './consts';
 export type { ListDataItem };
 declare function noop(): void;
 /**
@@ -29,6 +29,7 @@ export interface ListProps<T = unknown> {
     onScrollToBottom: () => void;
     onResize: (info: Size) => void;
     shortcuts: boolean;
+    shortcutsMap?: ShortcutsMap;
     renderOptimization: boolean;
     disableMoveDownOverflow: boolean;
     ariaLabel: string;
@@ -99,6 +100,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
         activateSingleItem: PropTypes.Requireable<boolean>;
         activateFirstItem: PropTypes.Requireable<boolean>;
         shortcuts: PropTypes.Requireable<boolean>;
+        shortcutsMap: PropTypes.Requireable<object>;
         onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
@@ -142,13 +144,22 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     static ListHint: typeof ListHint;
     static ListProps: {
         Type: typeof Type;
-        Dimension: typeof Dimension;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
     };
     virtualizedList?: VirtualizedList | null;
     unmounted?: boolean;
     container?: HTMLElement | null;
     hoverHandler: (arg: number) => () => void;
-    private _activatableItems;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;
@@ -170,7 +181,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     getFirst(): ListDataItem<T> | undefined;
     getSelected(): ListDataItem<T> | null;
     clearSelected: () => void;
-    defaultItemHeight(): Dimension.ITEM_HEIGHT | Dimension.COMPACT_ITEM_HEIGHT;
+    defaultItemHeight(): number;
     scrollEndHandler: () => void;
     checkOverflow: () => void;
     getVisibleListHeight(maxHeight: number): number;

package/components/list/list.js

@@ -1,7 +1,7 @@
 /**
  * @name List
  */
-import React, { cloneElement, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import VirtualizedList from 'react-virtualized/dist/es/List';
@@ -73,6 +73,7 @@ export default class List extends Component {
         activateSingleItem: PropTypes.bool,
         activateFirstItem: PropTypes.bool,
         shortcuts: PropTypes.bool,
+        shortcutsMap: PropTypes.object,
         onMouseOut: PropTypes.func,
         onSelect: PropTypes.func,
         onScrollToBottom: PropTypes.func,
@@ -89,9 +90,9 @@ export default class List extends Component {
     };
     static defaultProps = {
         data: [],
-        restoreActiveIndex: false,
-        activateSingleItem: false,
-        activateFirstItem: false,
+        restoreActiveIndex: false, // restore active item using its "key" property
+        activateSingleItem: false, // if there is only one item, activate it
+        activateFirstItem: false, // if there no active items, activate the first one
         onMouseOut: noop,
         onSelect: noop,
         onScrollToBottom: noop,
@@ -195,7 +196,6 @@ export default class List extends Component {
             });
         }
     }));
-    _activatableItems = false;
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items
@@ -491,7 +491,7 @@ export default class List extends Component {
             </div>)}
         </CellMeasurer>)
             : (<div role="row" id={itemId} key={itemKey}>
-          <div role="cell">{cloneElement(el)}</div>
+          <div role="cell">{el}</div>
         </div>);
     };
     addItemDataTestToProp = (props) => {
@@ -576,7 +576,9 @@ export default class List extends Component {
         <ActiveItemContext.Updater value={this.getId(this.state.activeItem)} skipUpdate={this.props.hidden || !isActivatable(this.state.activeItem)}/>
         <div id={this.props.id} ref={this.containerRef} className={classes} onMouseOut={this.props.onMouseOut} onBlur={this.props.onMouseOut} onMouseLeave={this.clearSelected} data-test="ring-list">
           {this.props.shortcuts &&
-                (<Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>)}
+                (<Shortcuts map={this.props.shortcutsMap
+                        ? { ...this.shortcutsMap, ...this.props.shortcutsMap }
+                        : this.shortcutsMap} scope={this.shortcutsScope}/>)}
           {this.props.renderOptimization
                 ? this.renderVirtualized(maxHeight, rowCount)
                 : this.renderSimple(maxHeight, rowCount)}

package/components/list/list__item.js

@@ -20,7 +20,7 @@ export default class ListItem extends PureComponent {
     stopBubbling = (e) => e.stopPropagation();
     _isString = (val) => typeof val === 'string' || val instanceof String;
     render() {
-        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, ...restProps } = this.props;
+        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, ...restProps } = this.props;
         const checkable = checkbox !== undefined;
         const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
         const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
@@ -56,6 +56,7 @@ export default class ListItem extends PureComponent {
             'ring-list-item-action': !disabled,
             'ring-list-item-selected': checkbox
         }, restProps['data-test']);
+        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>);
         return (<div className={styles.itemContainer} data-test={dataTest}>
         {showCheckbox && (<div className={styles.checkboxContainer}>
             <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
@@ -68,7 +69,7 @@ export default class ListItem extends PureComponent {
                 {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
               </div>)}
 
-            <span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>
+            {labelWrapper ? labelWrapper(labelElement) : labelElement}
 
             {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
 

package/components/loader/loader.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 @keyframes rotation-keyframes {
   100% {
     transform: rotate(360deg);
@@ -11,7 +9,7 @@
 .canvas {
   display: block;
 
-  margin: calc(unit * 2) auto;
+  margin: calc(var(--ring-unit) * 2) auto;
 
   pointer-events: none;
 }

package/components/loader/loader__core.js

@@ -40,12 +40,12 @@ export default class LoaderCore {
         stop: false,
         deterministic: false,
         colors: [
-            { r: 215, g: 60, b: 234 },
-            { r: 145, g: 53, b: 224 },
-            { r: 88, g: 72, b: 224 },
-            { r: 37, g: 183, b: 255 },
-            { r: 89, g: 189, b: 0 },
-            { r: 251, g: 172, b: 2 },
+            { r: 215, g: 60, b: 234 }, //#D73CEA
+            { r: 145, g: 53, b: 224 }, //#9135E0
+            { r: 88, g: 72, b: 224 }, //#5848F4
+            { r: 37, g: 183, b: 255 }, //#25B7FF
+            { r: 89, g: 189, b: 0 }, //#59BD00
+            { r: 251, g: 172, b: 2 }, //#FBAC02
             { r: 227, g: 37, b: 129 } //#E32581
         ]
     };

package/components/loader-inline/loader-inline.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
 
 :root {
   /* stylelint-disable-next-line color-no-hex */
@@ -48,7 +47,7 @@
   animation: spin 1s linear infinite;
   vertical-align: -3px;
 
-  border-radius: unit;
+  border-radius: var(--ring-unit);
 
   &,
   &::after {
@@ -58,17 +57,17 @@
   &::after {
     display: block;
 
-    width: calc(unit * 2);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
 
     content: "";
     animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
 
     background-image: conic-gradient(var(--ring-loader-inline-stops));
-    mask-image: radial-gradient(unit, transparent 71.875%, var(--ring-content-background-color) 71.875%);
+    mask-image: radial-gradient(var(--ring-unit), transparent 71.875%, var(--ring-content-background-color) 71.875%);
   }
 }
 
 .children {
-  margin-left: calc(unit / 2);
+  margin-left: calc(var(--ring-unit) / 2);
 }