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

package/components/toggle/toggle.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value padding: 2px;
 @value disabled-line-color: rgba(255, 255, 255, 0.9);
 @value duration: 300ms;
@@ -21,11 +20,11 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 }
 
 .leftLabel {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .switchWrapper {
@@ -48,6 +47,8 @@
 }
 
 .switch {
+  --ring-toggle-item-color: var(--ring-white-text-color);
+
   position: relative;
 
   display: block;
@@ -68,8 +69,8 @@
     top: padding;
     left: 0;
 
-    width: calc(unit * 1.5);
-    height: calc(unit * 1.5);
+    width: calc(var(--ring-unit) * 1.5);
+    height: calc(var(--ring-unit) * 1.5);
 
     content: "";
 
@@ -77,8 +78,8 @@
 
     transform: translateX(padding);
 
-    border-radius: calc(unit * 0.75);
-    background-color: var(--ring-content-background-color);
+    border-radius: calc(var(--ring-unit) * 0.75);
+    background-color: var(--ring-toggle-item-color);
   }
 }
 
@@ -92,32 +93,32 @@
 
 .size16 {
   & .switchWrapper {
-    width: calc(unit * 3);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 3);
+    height: calc(var(--ring-unit) * 2);
 
     vertical-align: -3px;
   }
 
   & .switch {
-    border-radius: unit;
+    border-radius: var(--ring-unit);
 
     &::before {
-      width: calc(unit * 1.5);
-      height: calc(unit * 1.5);
+      width: calc(var(--ring-unit) * 1.5);
+      height: calc(var(--ring-unit) * 1.5);
 
-      border-radius: calc(unit * 0.75);
+      border-radius: calc(var(--ring-unit) * 0.75);
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 1.5 - padding));
+    transform: translateX(calc(var(--ring-unit) * 1.5 - padding));
   }
 }
 
 .size14 {
   & .switchWrapper {
-    width: calc(unit * 3);
+    width: calc(var(--ring-unit) * 3);
     height: 14px;
 
     vertical-align: -2px;
@@ -142,29 +143,33 @@
 
 .size20 {
   & .switchWrapper {
-    width: calc(unit * 4);
-    height: calc(unit * 2.5);
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 2.5);
 
     vertical-align: -5px;
   }
 
   & .switch {
-    border-radius: calc(unit * 1.25);
+    border-radius: calc(var(--ring-unit) * 1.25);
 
     &::before {
-      width: calc(unit * 2);
-      height: calc(unit * 2);
+      width: calc(var(--ring-unit) * 2);
+      height: calc(var(--ring-unit) * 2);
 
-      border-radius: calc(unit);
+      border-radius: calc(var(--ring-unit));
     }
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(unit * 2 - padding));
+    transform: translateX(calc(var(--ring-unit) * 2 - padding));
   }
 }
 
+.input[disabled] + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+}
+
 .input[disabled] + ::after {
   position: absolute;
   top: 0;
@@ -175,7 +180,7 @@
 
   content: "";
 
-  border-radius: unit;
+  border-radius: var(--ring-unit);
   background-image:
     linear-gradient(
       45deg,

package/components/tooltip/tooltip.css

@@ -1,10 +1,8 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .tooltip {
-  max-width: calc(unit * 50);
-  padding: unit;
+  max-width: calc(var(--ring-unit) * 50);
+  padding: var(--ring-unit);
 
   text-align: left;
 
@@ -12,7 +10,7 @@
 }
 
 .long {
-  padding: unit calc(unit * 1.5);
+  padding: var(--ring-unit) calc(var(--ring-unit) * 1.5);
 
   font-size: var(--ring-font-size-smaller);
   line-height: var(--ring-line-height-lowest);

package/components/user-agreement/service.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { UserAgreementAttrs, UserAgreementTranslations } from './user-agreement';
 export declare const showMessage = "userAgreementShow";
 export declare const hideMessage = "userAgreementHide";
@@ -11,7 +12,7 @@ export interface ConsentResponse {
     endUserAgreementConsent?: Consent | null | undefined;
 }
 export interface Agreement {
-    text: string;
+    content: ReactNode;
     enabled?: boolean | null | undefined;
     majorVersion?: number | null | undefined;
     minorVersion?: number | null | undefined;
@@ -40,6 +41,7 @@ export default class UserAgreementService {
     tabId: number;
     interval: number;
     container: HTMLDivElement;
+    reactRoot: import("react-dom/client").Root;
     storage: import("../storage/storage").StorageInterface;
     checkingPromise: Promise<[Agreement, Consent]> | null;
     guest: boolean | null | undefined;

package/components/user-agreement/service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import Storage from '../storage/storage';
 import alertService from '../alert-service/alert-service';
 import Link from '../link/link';
@@ -22,7 +22,7 @@ const DEFAULT_AGREEMENT = {
     majorVersion: 0,
     minorVersion: 0,
     requiredForREST: false,
-    text: ''
+    content: ''
 };
 export default class UserAgreementService {
     config;
@@ -47,6 +47,7 @@ export default class UserAgreementService {
     tabId = Math.random();
     interval = ONE_HOUR;
     container = document.createElement('div');
+    reactRoot = createRoot(this.container);
     storage = new Storage();
     checkingPromise = null;
     guest = false;
@@ -160,7 +161,7 @@ export default class UserAgreementService {
     };
     showDialog = (withoutNotifications, preview = false, restOptions) => {
         const { translations, onDialogShow } = this.config;
-        const { text } = this.userAgreement;
+        const { content } = this.userAgreement;
         const show = true;
         if (!this._dialogPromise) {
             this._dialogPromise = new Promise((resolve, reject) => {
@@ -174,7 +175,7 @@ export default class UserAgreementService {
                 };
                 const onClose = this.hideDialogAndAlert;
                 const props = {
-                    text,
+                    children: content,
                     show,
                     onAccept,
                     onDecline,
@@ -182,9 +183,9 @@ export default class UserAgreementService {
                     translations,
                     preview, ...restOptions
                 };
-                render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+                this.reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
               <UserAgreement {...props}/>
-            </ControlsHeightContext.Provider>), this.container);
+            </ControlsHeightContext.Provider>));
                 if (onDialogShow) {
                     onDialogShow();
                 }
@@ -197,7 +198,7 @@ export default class UserAgreementService {
     };
     hideDialog = (withoutNotifications) => {
         const { onDialogHide } = this.config;
-        unmountComponentAtNode(this.container);
+        this.reactRoot.unmount();
         if (onDialogHide) {
             onDialogHide();
             this._dialogPromise = null;

package/components/user-agreement/user-agreement.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media from "../global/global.css";
+@value extra-small-screen-media from "../global/global.css";
 
 .agreementDialog {
   padding-bottom: 80px;
@@ -17,7 +17,7 @@
 }
 
 .suggestion {
-  padding-bottom: unit;
+  padding-bottom: var(--ring-unit);
 
   white-space: nowrap;
 

package/components/user-agreement/user-agreement.d.ts

@@ -1,7 +1,7 @@
 /**
  * @name User Agreement
  */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 declare function noop(): void;
 export interface UserAgreementTranslations {
@@ -13,8 +13,8 @@ export interface UserAgreementTranslations {
     remindLater: string;
 }
 export interface UserAgreementProps {
-    text: string;
     translations?: UserAgreementTranslations | null | undefined;
+    children: ReactNode;
     show: boolean;
     onAccept: () => void;
     onDecline: () => void;
@@ -30,7 +30,6 @@ export default class UserAgreement extends PureComponent<UserAgreementProps> {
     static propTypes: {
         show: PropTypes.Requireable<boolean>;
         preview: PropTypes.Requireable<boolean>;
-        text: PropTypes.Validator<string>;
         onAccept: PropTypes.Requireable<(...args: any[]) => any>;
         onDecline: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;

package/components/user-agreement/user-agreement.js

@@ -8,7 +8,6 @@ import Dialog from '../dialog/dialog';
 import { Content, Header } from '../island/island';
 import Panel from '../panel/panel';
 import Button from '../button/button';
-import Markdown from '../markdown/markdown';
 import { I18nContext } from '../i18n/i18n-context';
 import style from './user-agreement.css';
 function noop() { }
@@ -19,7 +18,6 @@ export default class UserAgreement extends PureComponent {
     static propTypes = {
         show: PropTypes.bool,
         preview: PropTypes.bool,
-        text: PropTypes.string.isRequired,
         onAccept: PropTypes.func,
         onDecline: PropTypes.func,
         onClose: PropTypes.func,
@@ -46,12 +44,12 @@ export default class UserAgreement extends PureComponent {
     onScrollToBottom = () => this.setState({ scrolledDown: true });
     render() {
         const { scrolledDown } = this.state;
-        const { translations, onAccept, onDecline, onClose, onRemindLater, text, show, preview, className } = this.props;
+        const { translations, onAccept, onDecline, onClose, onRemindLater, children, show, preview, className } = this.props;
         return (<I18nContext.Consumer>
         {({ translate }) => (<Dialog label={translations?.userAgreement ?? translate('userAgreement')} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
             <Header>{translations?.userAgreement ?? translate('userAgreement')}</Header>
             <Content fade onScrollToBottom={this.onScrollToBottom}>
-              <Markdown>{text}</Markdown>
+              {children}
             </Content>
             {!preview && (<Panel>
                 {onRemindLater && !scrolledDown && (<div className={style.suggestion}>

package/components/user-card/card.d.ts

@@ -11,7 +11,7 @@ export interface UserCardUser {
     banReason?: string | undefined;
     unverifiedEmail?: boolean | null | undefined;
 }
-export interface UserCardWording {
+export interface UserCardTranslations {
     banned: string;
     online: string;
     offline: string;
@@ -22,8 +22,7 @@ export interface UserCardWording {
 }
 export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
     user: UserCardUser;
-    wording?: UserCardWording | null | undefined;
-    translations?: UserCardWording | null | undefined;
+    translations?: UserCardTranslations | null | undefined;
     info?: ReactElement | readonly ReactElement[] | string;
     avatarInfo?: ReactElement | readonly ReactElement[] | string;
     'data-test'?: string | null | undefined;

package/components/user-card/card.js

@@ -40,13 +40,13 @@ export default class UserCard extends PureComponent {
     static contextType = I18nContext;
     copyEmail = () => {
         const { translate } = this.context;
-        const wording = this.props.translations || this.props.wording;
-        clipboard.copyText(this.props.user.email || '', wording?.copiedToClipboard ?? translate('copyToClipboard'), wording?.copingToClipboardError ?? translate('copingToClipboardError'));
+        const translations = this.props.translations;
+        clipboard.copyText(this.props.user.email || '', translations?.copiedToClipboard ?? translate('copyToClipboard'), translations?.copingToClipboardError ?? translate('copingToClipboardError'));
     };
     render() {
         const { children, info, className, user, avatarInfo, ...restProps } = this.props;
         const { translate } = this.context;
-        const wording = this.props.translations || this.props.wording;
+        const translations = this.props.translations;
         const classes = classNames(className, {});
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (<div className={classes} {...restProps}>
@@ -64,11 +64,11 @@ export default class UserCard extends PureComponent {
                 {!user.href && <span className={styles.userName}>{user.name}</span>}
                 {typeof user.online === 'boolean' &&
                 (<span className={userActiveStatusClasses} title={user.online
-                        ? (wording?.online ?? translate('online'))
-                        : (wording?.offline ?? translate('offline'))}/>)}
+                        ? (translations?.online ?? translate('online'))
+                        : (translations?.offline ?? translate('offline'))}/>)}
                 {!!info && <span className={styles.userNameInfo}>{info}</span>}
                 {user.banned &&
-                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording?.banned ?? translate('banned')}</span>)}
+                (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{translations?.banned ?? translate('banned')}</span>)}
               </div>
               <div className={styles.userLogin}>{user.login}</div>
               {user.email && (<span className={styles.userEmailWrapper}>
@@ -76,9 +76,9 @@ export default class UserCard extends PureComponent {
                     {user.email}
                   </Link>
                   {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>
-                        {wording?.unverified ?? translate('unverified')}
+                        {translations?.unverified ?? translate('unverified')}
                       </span>)}
-                  <Icon title={wording?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                  <Icon title={translations?.copyToClipboard ?? translate('copyToClipboard')} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
                 </span>)}
             </div>
             {children}

package/components/user-card/user-card.css

@@ -1,9 +1,7 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .userCardSpaced {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .userInformationContainer {
@@ -111,8 +109,8 @@
 .userActiveStatus {
   display: inline-block;
 
-  width: unit;
-  height: unit;
+  width: var(--ring-unit);
+  height: var(--ring-unit);
   margin-right: var(--ring-unit);
   margin-left: 6px;