@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/input/input.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
-
 .outerContainer {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-background-color: var(--ring-content-background-color);
 }
 
@@ -116,7 +114,7 @@
   color: var(--ring-icon-secondary-color);
 
   [dir="rtl"] & {
-    right: unit;
+    right: var(--ring-unit);
     left: auto;
   }
 }
@@ -138,7 +136,7 @@
 
   [dir="rtl"] & {
     right: auto;
-    left: unit;
+    left: var(--ring-unit);
   }
 }
 
@@ -159,7 +157,7 @@ textarea.input {
 }
 
 .errorText {
-  margin-top: calc(unit / 2);
+  margin-top: calc(var(--ring-unit) / 2);
 
   color: var(--ring-error-color);
 
@@ -168,15 +166,15 @@ textarea.input {
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {

package/components/input-size/input-size.css

@@ -1,12 +1,10 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :root {
-  --ring-input-xs: calc(unit * 12);
-  --ring-input-s: calc(unit * 12);
-  --ring-input-m: calc(unit * 30);
-  --ring-input-l: calc(unit * 50);
+  --ring-input-xs: calc(var(--ring-unit) * 12);
+  --ring-input-s: calc(var(--ring-unit) * 12);
+  --ring-input-m: calc(var(--ring-unit) * 30);
+  --ring-input-l: calc(var(--ring-unit) * 50);
 }
 
 /**

package/components/input-size/input-size.stories.js

@@ -1,210 +1,64 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
 import '../input/input-legacy.css';
 import '../form/form.css';
 import './input-size.css';
 import '../error-bubble/error-bubble-legacy.css';
-
-import SelectNG from '../select-ng/select-ng';
-import QueryAssistNG from '../query-assist-ng/query-assist-ng';
+import React from 'react';
 
 export default {
-  title: 'Style-only/Input Sizes',
-  decorators: [angularDecorator()]
+  title: 'Style-only/Input Sizes'
 };
 
-export const basic = () => {
-  angular.module(APP_NAME, [QueryAssistNG, SelectNG]).controller('ExampleCtrl', function ctrl() {
-    this.dataSource = () => [];
-
-    this.options = ['one', 'two', 'three'];
-    this.selected = null;
-  });
-
-  return `
-      <div ng-controller="ExampleCtrl as exampleCtrl">
-        <h3 class="example-block">Query Assists</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'S'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Extra-short'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Extra-short Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'S'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Short'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Short Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'M'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Medium'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Medium Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'L'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Long'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Long Query Assist</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-query-assist
-              size="'FULL'"
-              x-data-source="exampleCtrl.dataSource"
-              glass="true"
-              placeholder="'Full-width'">
-            </rg-query-assist>
-            <div class="ring-error-bubble active">Full-width Query Assist</div>
-          </div>
-        </div>
-
-        <h3 class="example-block">Rg Selects: Buttons</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_xs"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Extra-short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_s"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_m"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Medium Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_l"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Long Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Full-width Select</div>
-          </div>
-        </div>
-
-        <h3 class="example-block">Rg Selects: Inputs</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_xs"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Extra-short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_s"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Short Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_m"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Medium Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select class="ring-input-size_l"
-              type="input"
-              ng-model="exampleCtrl.selected"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Long Select</div>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <rg-select ng-model="exampleCtrl.selected"
-              type="input"
-              options="item in exampleCtrl.options"
-              label="Select item"></rg-select>
-            <div class="ring-error-bubble active">Full-width Select</div>
-          </div>
-        </div>
-
-        <h3 class="example-block">Inputs</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <input id="extra-short-input" type="number" class="ring-input ring-input-size_xs">
-            <label for="extra-short-input" class="ring-error-bubble active">Extra-short Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="short-input" type="number" class="ring-input ring-input-size_s">
-            <label for="short-input" class="ring-error-bubble active">Short Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="medium-input" type="number" class="ring-input ring-input-size_m">
-            <label for="medium-input" class="ring-error-bubble active">Medium Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="long-input" type="number" class="ring-input ring-input-size_l">
-            <label for="long-input" class="ring-error-bubble active">Long Input</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <input id="full-width-input" type="number" class="ring-input">
-            <label for="full-width-input" class="ring-error-bubble active">Full-width Input</label>
-          </div>
-        </div>
+export const basic = () => (
+  <div>
+    <h3 className="example-block">Inputs</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-input" className="ring-error-bubble active">Extra-short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="short-input" type="number" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-input" className="ring-error-bubble active">Short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="medium-input" type="number" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-input" className="ring-error-bubble active">Medium Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="long-input" type="number" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-input" className="ring-error-bubble active">Long Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="full-width-input" type="number" className="ring-input"/>
+        <label htmlFor="full-width-input" className="ring-error-bubble active">Full-width Input</label>
+      </div>
+    </div>
 
-        <h3 class="example-block">Textareas</h3>
-        <div class="example-block">
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="extra-short-textarea" class="ring-input ring-input-size_xs"></textarea>
-            <label for="extra-short-textarea" class="ring-error-bubble active">Extra-short Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="short-textarea" class="ring-input ring-input-size_s"></textarea>
-            <label for="short-textarea" class="ring-error-bubble active">Short Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="medium-textarea" class="ring-input ring-input-size_m"></textarea>
-            <label for="medium-textarea" class="ring-error-bubble active">Medium Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="long-textarea" class="ring-input ring-input-size_l"></textarea>
-            <label for="long-textarea" class="ring-error-bubble active">Long Textarea</label>
-          </div>
-          <div class="ring-error-bubble-wrapper">
-            <textarea id="full-width-textarea" class="ring-input"></textarea>
-            <label for="full-width-textarea" class="ring-error-bubble active">Full-width Textarea</label>
-          </div>
-        </div>
+    <h3 className="example-block">Textareas</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">Extra-short Textarea</label>
       </div>
-    `;
-};
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="short-textarea" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-textarea" className="ring-error-bubble active">Short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="medium-textarea" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-textarea" className="ring-error-bubble active">Medium Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="long-textarea" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-textarea" className="ring-error-bubble active">Long Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="full-width-textarea" className="ring-input"/>
+        <label htmlFor="full-width-textarea" className="ring-error-bubble active">Full-width Textarea</label>
+      </div>
+    </div>
+  </div>
+);
 
 basic.storyName = 'Input Sizes';
 

package/components/island/island.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value gradientStart: rgba(255, 255, 255, 0);
 @value gradientStop: var(--ring-content-background-color);
 
@@ -24,7 +23,7 @@
 .header {
   box-sizing: border-box;
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4) unit;
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) var(--ring-unit);
 
   transition: border-bottom-color 0.1s;
 
@@ -56,7 +55,7 @@
 }
 
 .narrowIsland .header {
-  padding: 0 calc(unit * 2);
+  padding: 0 calc(var(--ring-unit) * 2);
 }
 
 .content {
@@ -73,7 +72,7 @@
   overflow: auto;
 
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 
   &:focus:not(:focus-visible) {
     outline: none;
@@ -81,7 +80,7 @@
 }
 
 .narrowIsland .scrollableWrapper {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .withoutPaddings .scrollableWrapper {
@@ -96,7 +95,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
 
@@ -120,7 +119,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
   pointer-events: none;

package/components/island-legacy/island-legacy.css

@@ -1,11 +1,9 @@
-@value unit from "../global/global.css";
-
 /**
  * @name Island Legacy
  */
 
 :global(.ring-island) {
-  min-width: calc(unit * 25 - 2px);
+  min-width: calc(var(--ring-unit) * 25 - 2px);
 
   color: var(--ring-text-color);
 
@@ -37,7 +35,7 @@
 }
 
 :global(.ring-island__header) {
-  min-height: calc(unit * 3 - 2px);
+  min-height: calc(var(--ring-unit) * 3 - 2px);
 
   border-bottom: 1px solid var(--ring-line-color);
   border-top-left-radius: var(--ring-border-radius);
@@ -45,14 +43,14 @@
 
   background-color: var(--ring-content-background-color);
 
-  line-height: calc(unit * 3 - 2px);
+  line-height: calc(var(--ring-unit) * 3 - 2px);
 }
 
 :global(.ring-island__header-btn),
 :global(.ring-island__header-button) {
   float: right;
 
-  padding: 0 calc(unit * 2 - 1px);
+  padding: 0 calc(var(--ring-unit) * 2 - 1px);
 
   /* -1 to account for border */
 
@@ -90,11 +88,11 @@
   display: block;
   float: left;
 
-  padding: 0 calc(unit * 4);
+  padding: 0 calc(var(--ring-unit) * 4);
 
   font-weight: bold;
 }
 
 :global(.ring-island__content) {
-  margin: calc(unit * 2) calc(unit * 4);
+  margin: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 }

package/components/line/line.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-line) {
   display: block;
 
@@ -12,5 +10,5 @@
 }
 
 :global(.ring-line_separated) {
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }

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 (min-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,7 +62,6 @@ 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>;
@@ -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,7 +123,6 @@ declare const _default: {
     };
     propTypes: {
         className: PropTypes.Requireable<string>;
-        innerClassName: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;