@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

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

@@ -1,33 +1,139 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button, active, primary, button-shadow from "../button/button.css";
 
 :root {
-  --ring-button-group-default-z-index: 0;
-  --ring-button-group-disabled-z-index: -1;
-  --ring-button-group-active-z-index: 1;
-  --ring-button-group-hover-z-index: 2;
-  --ring-button-group-focus-z-index: 3;
+  --ring-button-group-default-z-index: 1;
+  --ring-button-group-disabled-z-index: 0;
+  --ring-button-group-active-z-index: 2;
+  --ring-button-group-hover-z-index: 3;
+  --ring-button-group-focus-z-index: 4;
+}
+
+.common {
+  display: inline-block;
+
+  white-space: nowrap;
 }
 
 .buttonGroup {
+  composes: common;
   composes: buttonGroup from "../button-toolbar/button-toolbar.css";
 
+  border-radius: var(--ring-border-radius);
+
+  box-shadow: button-shadow var(--ring-borders-color);
+}
+
+.buttonGroup .button {
+  --ring-button-group-button-border-color: var(--ring-borders-color);
+
   position: relative;
-  z-index: 0;
 
-  display: inline-block;
+  transition: none;
 
-  white-space: nowrap;
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset;
 }
 
-.buttonGroup button,
-.buttonGroup .button {
-  margin: 0 0 0 -1px;
+.buttonGroup .button[disabled] {
+  --ring-button-group-button-border-color: var(--ring-border-unselected-disabled-color);
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+
+    width: var(--ring-border-radius);
+
+    content: "";
+
+    background-color: var(--ring-disabled-background-color);
+
+    box-shadow: 0 1px var(--ring-border-unselected-disabled-color) inset, 0 -1px var(--ring-border-unselected-disabled-color) inset;
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    left: calc(var(--ring-border-radius) * -1);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    right: calc(var(--ring-border-radius) * -1);
+  }
+}
+
+.buttonGroup > .button:first-child,
+.buttonGroup > :first-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, 1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::before {
+    display: none;
+  }
+}
+
+.buttonGroup > .button:last-child,
+.buttonGroup > :last-child .button {
+  box-shadow: 0 1px var(--ring-button-group-button-border-color) inset, 0 -1px var(--ring-button-group-button-border-color) inset, -1px 0 var(--ring-button-group-button-border-color) inset;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &::after {
+    display: none;
+  }
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:hover,
+.buttonGroup .button.button:active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:global(.focus-visible) {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button.active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-main-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button:global(.focus-visible).active {
+  border-radius: var(--ring-border-radius);
+  box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.active[disabled] {
+  box-shadow: button-shadow var(--ring-border-disabled-color);
+}
+
+.split {
+  composes: common;
+
+  position: relative;
+  z-index: 0;
+}
 
+.common button,
+.common .button {
   border-radius: 0;
 }
 
+.split button,
+.split .button {
+  margin: 0 0 0 -1px;
+}
+
 .caption {
   composes: font from "../global/global.css";
 
@@ -40,24 +146,31 @@
   }
 }
 
-.buttonGroup > .caption + .button,
-.buttonGroup > button:first-child,
-.buttonGroup > .button:first-child,
-.buttonGroup > :first-child .button {
+.common > button:first-child,
+.common > .button:first-child,
+.common > :first-child .button {
   margin: 0;
 
   border-top-left-radius: var(--ring-border-radius);
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-.buttonGroup > .button:last-child,
-.buttonGroup > button:last-child,
-.buttonGroup > :last-child .button {
+.common > .button:last-child,
+.common > button:last-child,
+.common > :last-child .button {
   border-top-right-radius: var(--ring-border-radius);
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-.buttonGroup {
+.split .primary:not(:last-child) {
+  margin-right: 1px;
+}
+
+.split .primary:not(:first-child) {
+  margin-left: 1px;
+}
+
+.common {
   & .button {
     position: relative;
     z-index: var(--ring-button-group-default-z-index);
@@ -81,5 +194,9 @@
 
   & .active {
     z-index: var(--ring-button-group-active-z-index);
+
+    &[disabled] {
+      z-index: var(--ring-button-group-default-z-index);
+    }
   }
 }

package/components/button-group/button-group.d.ts

@@ -1,10 +1,13 @@
 import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import Caption from './caption';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
+    split?: boolean | null | undefined;
+}
 /**
  * @name Button Group
  */
-export default class ButtonGroup extends PureComponent<HTMLAttributes<HTMLElement>> {
+export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;

package/components/button-group/button-group.js

@@ -12,9 +12,9 @@ export default class ButtonGroup extends PureComponent {
         className: PropTypes.string
     };
     render() {
-        const { className } = this.props;
-        const classes = classNames(styles.buttonGroup, className);
-        return (<div {...this.props} className={classes}/>);
+        const { className, split, ...restProps } = this.props;
+        const classes = classNames(split ? styles.split : styles.buttonGroup, className);
+        return (<div {...restProps} className={classes}/>);
     }
 }
 export { Caption };

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

@@ -1,3 +1,4 @@
 .buttonGroup {
   font-size: 0;
+  line-height: 0;
 }

package/components/button-group-ng/button-group-ng.examples.js

@@ -19,8 +19,8 @@ export const basic = () => {
   angular.module(APP_NAME, [ButtonNG, ButtonGroupNG]);
 
   return `
+      <span rg-button-group-caption>Side</span>
       <div rg-button-group>
-        <span rg-button-group-caption>Side</span>
         <rg-button>Left</rg-button>
         <rg-button>Right</rg-button>
       </div>

package/components/button-ng/button-ng.examples.js

@@ -9,6 +9,7 @@ import IconNG from '../icon-ng/icon-ng';
 import ThemeNG from '../theme-ng/theme-ng';
 import CheckboxNG from '../checkbox-ng/checkbox-ng';
 import Theme from '../global/theme';
+import styles from '../global/variables_dark.css';
 
 import ButtonNG from './button-ng';
 
@@ -88,9 +89,7 @@ export const basic = () => {
     <div ng-controller="testCtrl">
       <div class="buttons">${renderAllButtons()}</div>
 
-      <rg-theme theme="Theme.DARK">
-        <div class="buttons dark">${renderAllButtons()}</div>
-      </rg-theme>
+      <div class="buttons ${styles.dark}">${renderAllButtons()}</div>
     </div>
   `;
 
@@ -108,12 +107,12 @@ basic.parameters = {
   },
   storyStyles: `
 <style>
-  .buttons > button {
-    margin: 8px;
+  .buttons {
+    background-color: var(--ring-content-background-color);
   }
 
-  .dark {
-    background: #000;
+  .buttons > button {
+    margin: 8px;
   }
 </style>`
 };

package/components/button-ng/button-ng.js

@@ -5,10 +5,11 @@ import classNames from 'classnames';
 import RingAngularComponent from '../global/ring-angular-component';
 import {addClasses, applyMethodToClasses, removeClasses} from '../global/dom';
 import IconNG from '../icon-ng/icon-ng';
-import Theme, {applyTheme} from '../global/theme';
 import styles from '../button/button.css';
 import {getButtonClasses} from '../button/button__classes';
 
+import {ControlsHeight} from '../global/controls-height';
+
 import overrides from './button-ng.css';
 
 const {ringIconDefaultColor, iconMarginFix, transcludeSpacer} = overrides;
@@ -92,7 +93,6 @@ class ButtonController extends RingAngularComponent {
       this.updateClasses();
       this.updateIcon();
     });
-    $attrs.$observe('theme', this.updateClasses);
   }
 
   getAttrValue(attribute) {
@@ -103,13 +103,12 @@ class ButtonController extends RingAngularComponent {
   updateClasses = () => {
     const {$attrs} = this.$inject;
 
-    const theme = this.element.classList.contains(styles.light) ? Theme.LIGHT : Theme.DARK;
-
     const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
 
     this.element.className = classNames(
       foreignClasses,
       getButtonClasses({
+        height: ControlsHeight.S,
         className: styles.button,
         active: this.getAttrValue($attrs.active),
         disabled: this.getAttrValue($attrs.disabled),
@@ -120,8 +119,7 @@ class ButtonController extends RingAngularComponent {
         inline: this.getAttrValue($attrs.inline),
         danger: this.getAttrValue($attrs.danger),
         delayed: this.getAttrValue($attrs.delayed),
-        icon: $attrs.icon,
-        theme
+        icon: $attrs.icon
       }),
       {
         // Some overrides for angular buttons
@@ -169,24 +167,13 @@ class ButtonController extends RingAngularComponent {
   };
 }
 
-function changeTheme(element, data) {
-  return applyTheme({
-    element,
-    prevTheme: data.prevTheme && styles[data.prevTheme] || styles.light,
-    currentTheme: styles[data.currentTheme]
-  });
-}
-
 function createButtonDirective(tagName) {
   return () => ({
     restrict: 'E',
     transclude: true,
     replace: true,
-    require: {
-      rgThemeCtrl: '?^^rgTheme'
-    },
     template: `
-  <${tagName} class="${styles.button} ${styles.light}">
+  <${tagName} class="${styles.button}">
   <span class="${styles.content}"
   ><rg-icon class="${classNames(styles.icon, overrides.iconNg, iconMarginFix)}"></rg-icon
   ><ng-transclude></ng-transclude
@@ -194,13 +181,7 @@ function createButtonDirective(tagName) {
   ><div class="js-button-loader"></div>
   </${tagName}>
     `,
-    controller: ButtonController,
-    link: (scope, element, attrs, {rgThemeCtrl}) => {
-      if (rgThemeCtrl) {
-        changeTheme(element[0], {currentTheme: rgThemeCtrl.theme});
-        rgThemeCtrl.on('change', (event, data) => changeTheme(element[0], data));
-      }
-    }
+    controller: ButtonController
   });
 }
 

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

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button from "../button/button.css";
 
 .buttonSet {
   position: relative;

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

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value button from "../button/button.css";
 
 .buttonToolbar {
   display: inline-block;
@@ -8,6 +9,7 @@
   white-space: nowrap;
 
   font-size: 0;
+  line-height: 0;
 }
 
 .buttonToolbar > button,

package/components/checkbox/checkbox.css

@@ -36,7 +36,7 @@
   pointer-events: none;
 
   border: 1px solid var(--ring-borders-color);
-  border-radius: 3px;
+  border-radius: var(--ring-border-radius);
   background-color: var(--ring-content-background-color);
 }
 
@@ -120,14 +120,20 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled][disabled] + .cell {
-    border-color: var(--ring-line-color);
-    background-color: var(--ring-content-background-color);
+    border-color: var(--ring-border-unselected-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled]:checked + .cell,
+  &[disabled]:indeterminate + .cell {
+    border-color: var(--ring-border-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    opacity: 0.5;
+    color: var(--ring-border-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/date-picker/date-input.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Input from '../input/input';
+import { ControlsHeight } from '../global/controls-height';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 export default class DateInput extends React.PureComponent {
@@ -92,6 +93,6 @@ export default class DateInput extends React.PureComponent {
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
-        return (<Input autoComplete="off" borderless data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
+        return (<Input autoComplete="off" borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
     }
 }

package/components/date-picker/date-picker.css

@@ -94,6 +94,7 @@
 .fromInputWithDivider {
   &::after {
     position: absolute;
+    top: 0;
     right: unit;
 
     content: "—";
@@ -243,7 +244,7 @@
 }
 
 .current.current {
-  color: var(--ring-dark-text-color);
+  color: var(--ring-white-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-main-color);
 }

package/components/dialog/dialog.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
+@value header from "../island/island.css";
 
 .container {
   position: fixed;
@@ -39,8 +40,7 @@
 
   & .panel {
     margin-top: 0;
-    padding-right: calc(unit * 4);
-    padding-left: calc(unit * 4);
+    padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
 
     border-top: none;
 
@@ -54,7 +54,7 @@
 }
 
 .content.content {
-  box-shadow: 0 2px 16px var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-dialog-shadow);
 }
 
 .clickableOverlay {
@@ -117,3 +117,10 @@
     pointer-events: initial;
   }
 }
+
+.container .header {
+  padding-top: calc(unit * 4);
+
+  font-size: 24px;
+  line-height: 28px;
+}

package/components/dialog-ng/dialog-ng__template.js

@@ -3,6 +3,7 @@ export default `<div
   ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
   ng-click="dialog.handleClick($event)"
   ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
+  ng-attr-data-test="ring-dialog-container"
 >
   <div ng-class="[dialog.dialogStyles.innerContainer]">
     <div data-anchor="dialog-container"

package/components/error-bubble/error-bubble-legacy.css

@@ -20,7 +20,7 @@
 
   border-radius: var(--ring-border-radius);
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-family: var(--ring-font-family);
 

package/components/error-bubble/error-bubble.css

@@ -30,7 +30,7 @@
   border-radius: var(--ring-border-radius);
 
   background: var(--ring-popup-background-color);
-  box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+  box-shadow: var(--ring-popup-shadow);
 
   font-size: 12px;
   line-height: 22px;

package/components/global/controls-height.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;

package/components/global/controls-height.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+export const ControlsHeightContext = createContext(ControlsHeight.M);

package/components/global/theme.d.ts

@@ -1,26 +1,13 @@
-import React, { RefAttributes, ExoticComponent, PropsWithoutRef, FunctionComponent } from 'react';
+import React, { HTMLAttributes } from 'react';
 declare enum Theme {
+    AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
-export declare const ThemeContext: React.Context<Theme | null>;
-export interface ThemeOuterProps {
-    theme?: Theme | null | undefined;
+export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: Theme;
+    passToPopups?: boolean;
 }
-export interface ThemeProps {
-    theme: Theme;
-}
-declare type ClassComponentType<T, P> = T extends React.Component<P> ? new (props: P) => T : never;
-declare type ExoticComponentType<T, P> = ExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
-declare type AnyComponentType<T, P> = ClassComponentType<T, P> | FunctionComponent<P> | ExoticComponentType<T, P>;
-export declare const withTheme: (defaultTheme?: Theme) => <T, P extends ThemeProps, S>(ComposedComponent: AnyComponentType<T, P> & S) => React.NamedExoticComponent<React.PropsWithRef<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>> & {
-    readonly type: React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>;
-} & { [K in keyof S]: S[K]; };
-export interface ApplyThemeParams {
-    element?: Element | null | undefined;
-    prevTheme?: string | null | undefined;
-    currentTheme?: string | null | undefined;
-}
-declare function applyTheme(params: ApplyThemeParams): void;
-export { applyTheme };
+export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;

package/components/global/theme.js

@@ -1,39 +1,33 @@
-import React, { createContext, forwardRef, memo } from 'react';
+import React, { useMemo, useState, useEffect, forwardRef } from 'react';
+import classNames from 'classnames';
+import { PopupTarget } from '../popup/popup.target';
+import styles from './variables_dark.css';
+import getUID from './get-uid';
 var Theme;
 (function (Theme) {
+    Theme["AUTO"] = "auto";
     Theme["LIGHT"] = "light";
     Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
-export const ThemeContext = createContext(null);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getDisplayName = (Component) => Component.name ?? Component.displayName ?? 'Component';
-export const withTheme = (defaultTheme = Theme.LIGHT) => (ComposedComponent) => {
-    // eslint-disable-next-line react/display-name
-    const WithTheme = memo(forwardRef(({ theme, ...restProps }, ref) => (<ThemeContext.Consumer>
-          {contextTheme => {
-            const usedTheme = theme || contextTheme || defaultTheme;
-            const Component = ComposedComponent;
-            return (<ThemeContext.Provider value={usedTheme}>
-                <Component ref={ref} 
-            // https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
-            {...restProps} theme={usedTheme}/>
-              </ThemeContext.Provider>);
-        }}
-        </ThemeContext.Consumer>)));
-    const WithThemeAndStatics = Object.assign(WithTheme, ComposedComponent, {
-        displayName: `withTheme(${getDisplayName(ComposedComponent)})`,
-        propTypes: null
-    });
-    return WithThemeAndStatics;
-};
-function applyTheme(params) {
-    if (!params || !params.element || !params.currentTheme) {
-        return;
-    }
-    if (params.prevTheme) {
-        params.element.classList.remove(params.prevTheme);
-    }
-    params.element.classList.add(params.currentTheme);
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+export function useTheme() {
+    const [dark, setDark] = useState(darkMatcher.matches);
+    useEffect(() => {
+        const onChange = (e) => setDark(e.matches);
+        darkMatcher.addEventListener('change', onChange);
+        return () => darkMatcher.removeEventListener('change', onChange);
+    }, []);
+    return dark ? Theme.DARK : Theme.LIGHT;
 }
-export { applyTheme };
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, ...restProps }, ref) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    const id = useMemo(() => getUID('popups-with-theme-'), []);
+    return (<div ref={ref} className={classNames(className, { [styles.dark]: resolvedTheme === Theme.DARK })} {...restProps}>{passToPopups
+            ? (<PopupTarget id={id}>
+              {target => <>{children}{target}</>}
+            </PopupTarget>)
+            : children}
+    </div>);
+});
 export default Theme;