@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/tabs/dumb-tabs.js

@@ -1,107 +1,55 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import memoize from '../global/memoize';
-
-import Theme, {withTheme} from '../global/theme';
 import dataTests from '../global/data-tests';
-
 import styles from './tabs.css';
-
 import TabLink from './tab-link';
 import CollapsibleTabs from './collapsible-tabs';
-import {CustomItem} from './custom-item';
-
-export {CustomItem};
-
+import { CustomItem } from './custom-item';
+export { CustomItem };
 class Tabs extends PureComponent {
-  static propTypes = {
-    theme: PropTypes.string,
-    selected: PropTypes.string,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    children: PropTypes.node.isRequired,
-    onSelect: PropTypes.func,
-    'data-test': PropTypes.string,
-    autoCollapse: PropTypes.bool
-  };
-
-  static defaultProps = {
-    onSelect() {}
-  };
-
-  static Theme = Theme;
-
-  handleSelect = memoize(key => () => this.props.onSelect(key));
-
-  getTabTitle = (child, i) => {
-    if (child == null || typeof child !== 'object' || child.type === CustomItem) {
-      return child;
-    }
-
-    const {selected} = this.props;
-    const {title, id, disabled, href, className, activeClassName} = child.props;
-    const key = id || String(i);
-    const isSelected = key === selected;
-    const titleClasses = classNames(
-      styles.title,
-      className,
-      isSelected && activeClassName,
-      {
-        [styles.selected]: isSelected
-      }
-    );
-
-    return (
-      <TabLink
-        title={title}
-        isSelected={isSelected}
-        active
-        key={key}
-        href={href}
-        innerClassName={titleClasses}
-        className={titleClasses}
-        disabled={disabled}
-        onPlainLeftClick={this.handleSelect(key)}
-      />
-    );
-  };
-
-  render() {
-    const {
-      className,
-      children,
-      selected,
-      theme,
-      autoCollapse,
-      'data-test': dataTest,
-      ...restProps
-    } = this.props;
-
-    const classes = classNames(styles.tabs, className, styles[theme]);
-    const childrenArray = React.Children.toArray(children).filter(Boolean);
-
-    return (
-      <div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
+    static propTypes = {
+        selected: PropTypes.string,
+        className: PropTypes.string,
+        href: PropTypes.string,
+        children: PropTypes.node.isRequired,
+        onSelect: PropTypes.func,
+        'data-test': PropTypes.string,
+        autoCollapse: PropTypes.bool
+    };
+    static defaultProps = {
+        onSelect() { }
+    };
+    handleSelect = memoize((key) => () => this.props.onSelect(key));
+    getTabTitle = (child, i) => {
+        if (child == null || typeof child !== 'object' || child.type === CustomItem) {
+            return child;
+        }
+        const { selected } = this.props;
+        const { title, titleProps, id, disabled, href, className, activeClassName } = child.props;
+        const key = id || String(i);
+        const isSelected = key === selected;
+        const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
+            [styles.selected]: isSelected
+        });
+        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
+    };
+    render() {
+        const { className, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.tabs, className);
+        const childrenArray = React.Children.toArray(children).
+            filter(Boolean);
+        return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
         {autoCollapse === true
-          ? (
-            <CollapsibleTabs
-              {...restProps}
-              onSelect={this.handleSelect}
-              selected={selected}
-            >{childrenArray}</CollapsibleTabs>
-          )
-          : (
-            <div className={styles.titles}>
+                ? (<CollapsibleTabs {...restProps} onSelect={this.handleSelect} selected={selected}>{childrenArray}</CollapsibleTabs>)
+                : (<div className={styles.titles}>
               {childrenArray.map(this.getTabTitle)}
-            </div>
-          )}
+            </div>)}
         <div className={styles.tab}>
-          {childrenArray.find(({props}, i) => (props.id || String(i)) === selected)}
+          {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
         </div>
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-export default withTheme()(Tabs);
+export default Tabs;

package/components/tabs/smart-tabs.d.ts

@@ -0,0 +1,20 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { TabsAttrs } from './dumb-tabs';
+import { TabProps } from './tab';
+export interface SmartTabsProps extends TabsAttrs {
+    children: ReactElement<TabProps>[];
+    initSelected?: string | null | undefined;
+}
+export default class SmartTabs extends PureComponent<SmartTabsProps> {
+    static propTypes: {
+        children: PropTypes.Validator<(PropTypes.ReactElementLike | null | undefined)[]>;
+        initSelected: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    state: {
+        selected: string;
+    };
+    handleSelect: (selected: string) => void;
+    render(): JSX.Element;
+}

package/components/tabs/smart-tabs.js

@@ -1,32 +1,19 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-
 import dataTests from '../global/data-tests';
-
 import Tabs from './dumb-tabs';
-
 export default class SmartTabs extends PureComponent {
-  static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    initSelected: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
-  state = {
-    selected: this.props.initSelected || this.props.children[0].props.id || '0'
-  };
-
-  handleSelect = selected => this.setState({selected});
-
-  render() {
-    const {children, initSelected, 'data-test': dataTest, ...restProps} = this.props;
-    return (
-      <Tabs
-        data-test={dataTests('ring-smart-tabs', dataTest)}
-        selected={this.state.selected}
-        onSelect={this.handleSelect}
-        {...restProps}
-      >{children}</Tabs>
-    );
-  }
+    static propTypes = {
+        children: PropTypes.arrayOf(PropTypes.element).isRequired,
+        initSelected: PropTypes.string,
+        'data-test': PropTypes.string
+    };
+    state = {
+        selected: this.props.initSelected || this.props.children[0].props.id || '0'
+    };
+    handleSelect = (selected) => this.setState({ selected });
+    render() {
+        const { children, initSelected, 'data-test': dataTest, ...restProps } = this.props;
+        return (<Tabs data-test={dataTests('ring-smart-tabs', dataTest)} selected={this.state.selected} onSelect={this.handleSelect} {...restProps}>{children}</Tabs>);
+    }
 }

package/components/tabs/tab-link.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+export interface TabLinkProps extends Omit<LinkProps, 'title' | 'children'> {
+    isSelected: boolean;
+    collapsed?: boolean;
+    title: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+}
+declare function TabLink({ isSelected, title, collapsed, ...restProps }: TabLinkProps): JSX.Element;
+declare namespace TabLink {
+    var propTypes: {
+        isSelected: PropTypes.Requireable<boolean>;
+        collapsed: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof TabLink>;
+export default _default;

package/components/tabs/tab-link.js

@@ -1,34 +1,24 @@
-import React, {memo} from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-
 import Link from '../link/link';
-
 import styles from './tabs.css';
-
-function TabLink({isSelected, title, collapsed, ...restProps}) {
-  const renderedTitle = typeof title === 'function'
-    ? title(isSelected, collapsed)
-    : title;
-
-  return (
-    <Link {...restProps}>
-      {() => (
-        <div className={styles.container}>
+function TabLink({ isSelected, title, collapsed, ...restProps }) {
+    const renderedTitle = typeof title === 'function'
+        ? title(isSelected, collapsed)
+        : title;
+    return (<Link {...restProps}>
+      {() => (<div className={styles.container}>
           <span className={styles.visible}>{renderedTitle}</span>
           {/* hack for preserving constant tab width*/}
           <span className={styles.hidden}>{renderedTitle}</span>
           <span className={styles.hiddenBold}>{renderedTitle}</span>
           <span className={styles.hiddenRegular}>{renderedTitle}</span>
-        </div>
-      )}
-    </Link>
-  );
+        </div>)}
+    </Link>);
 }
-
 TabLink.propTypes = {
-  isSelected: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
+    isSelected: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
 };
-
 export default memo(TabLink);

package/components/tabs/tab.d.ts

@@ -0,0 +1,27 @@
+import { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TabLinkProps } from './tab-link';
+export interface TabProps {
+    title?: ReactNode | ((isSelected: boolean, collapsed: boolean | undefined) => ReactNode);
+    titleProps?: Partial<TabLinkProps>;
+    id?: string | null | undefined;
+    className?: string | null | undefined;
+    children?: ReactNode;
+    'data-test'?: string | null | undefined;
+    alwaysHidden?: boolean | null | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+    activeClassName?: string | null | undefined;
+    collapsedClassName?: string | null | undefined;
+    collapsedActiveClassName?: string | null | undefined;
+}
+export default class Tab extends PureComponent<TabProps> {
+    static propTypes: {
+        title: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        id: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): JSX.Element;
+}

package/components/tabs/tab.js

@@ -1,25 +1,19 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import dataTests from '../global/data-tests';
-
 import styles from './tabs.css';
-
 export default class Tab extends PureComponent {
-  static propTypes = {
-    title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-    id: PropTypes.string,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {className, children, 'data-test': dataTest} = this.props;
-    const classes = classNames(styles.tab, className);
-    return (
-      <div data-test={dataTests('ring-tab', dataTest)} className={classes}>{children}</div>
-    );
-  }
+    static propTypes = {
+        title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+        id: PropTypes.string,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { className, children, 'data-test': dataTest } = this.props;
+        const classes = classNames(styles.tab, className);
+        return (<div data-test={dataTests('ring-tab', dataTest)} className={classes}>{children}</div>);
+    }
 }

package/components/tabs/tabs.css

@@ -1,8 +1,17 @@
 @import "../global/variables.css";
 
+@value dark from "../global/variables_dark.css";
 @value unit from "../global/global.css";
 @value line-shadow: inset 0 -1px 0 0;
-@value selected-line-shadow: inset 0 -3px 0 0;
+@value selected-line-shadow: inset 0 -2px 0 0;
+
+:root {
+  --ring-selected-tab-color: var(--ring-text-color);
+}
+
+.dark {
+  --ring-selected-tab-color: var(--ring-main-color);
+}
 
 .tabs {
   composes: font from "../global/global.css";
@@ -14,14 +23,10 @@
   margin-bottom: calc(unit * 2);
 }
 
-.light .titles {
+.titles {
   box-shadow: line-shadow var(--ring-line-color);
 }
 
-.dark .titles {
-  box-shadow: line-shadow var(--ring-dark-line-color);
-}
-
 .title {
   composes: font from "../global/global.css";
 
@@ -58,6 +63,7 @@
   }
 
   &:global(.focus-visible) {
+    color: var(--ring-main-color);
     box-shadow: selected-line-shadow var(--ring-main-color);
   }
 
@@ -75,38 +81,21 @@
   margin-left: calc(unit * 3);
 }
 
-.light .title {
-  &[disabled] {
-    color: var(--ring-disabled-color);
-  }
-}
-
-.dark .title {
-  color: var(--ring-dark-secondary-color);
-
-  &[disabled] {
-    color: var(--ring-text-color);
-  }
+.title[disabled] {
+  color: var(--ring-disabled-color);
 }
 
 .selected {
   cursor: default;
 
+  color: var(--ring-active-text-color);
+
   outline: none;
-  box-shadow: selected-line-shadow var(--ring-text-color);
+  box-shadow: selected-line-shadow var(--ring-selected-tab-color);
 
   font-weight: bold;
 }
 
-.dark .selected.selected {
-  color: var(--ring-dark-text-color);
-  box-shadow: selected-line-shadow var(--ring-main-color);
-}
-
-.dark .title:global(.focus-visible) {
-  color: var(--ring-main-color);
-}
-
 .visible {
   position: absolute;
   top: 0;

package/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @name Tabs
+ */
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

package/components/tabs/tabs.js

@@ -1,8 +1,7 @@
 /**
  * @name Tabs
  */
-
-export {CustomItem} from './custom-item';
-export {default as Tabs} from './dumb-tabs';
-export {default as SmartTabs} from './smart-tabs';
-export {default as Tab} from './tab';
+export { CustomItem } from './custom-item';
+export { default as Tabs } from './dumb-tabs';
+export { default as SmartTabs } from './smart-tabs';
+export { default as Tab } from './tab';

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

@@ -1,8 +1,9 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import darkStyles from '../global/variables_dark.css';
 
-import RingTabs from '@jetbrains/ring-ui/components/tabs-ng/tabs-ng';
+import RingTabs from './tabs-ng';
 
 export default {
   title: 'Legacy Angular/Tabs Ng',
@@ -33,13 +34,15 @@ export const dark = () => {
   angular.module(APP_NAME, [RingTabs]);
 
   return `
-      <rg-tabs class="container container_tabs" theme="dark">
+    <div class="${darkStyles.dark}">
+      <rg-tabs class="container container_tabs">
         <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
         <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
       </rg-tabs>
+    </div>
     `;
 };
 
@@ -49,8 +52,13 @@ dark.parameters = {
   storyStyles: `
     <style>
       body {
-        background: #000;
-        color: #fff;
+        margin: 0 !important;
+      }
+
+      .container {
+        padding: 8px;
+        background: var(--ring-content-background-color);
+        color: var(--ring-text-color);
       }
     </style>`
 };

package/components/tabs-ng/tabs-ng.js

@@ -3,7 +3,6 @@ import angular from 'angular';
 import className from 'classnames';
 
 import styles from '../tabs/tabs.css';
-import Theme from '../global/theme';
 
 import template from './tabs-ng__template';
 
@@ -24,15 +23,13 @@ angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope
       tabParameter: '@',
       tabsClass: '=',
       control: '=?',
-      disableLocationChanging: '=',
-      theme: '@?'
+      disableLocationChanging: '='
     },
 
     controller: function controller($scope) {
       $scope.panes = [];
       $scope.current = null;
       $scope.styles = styles;
-      $scope.theme = $scope.theme || Theme.LIGHT;
 
       function getTabIdFromUrl() {
         return $location.search()[$scope.tabParameter];

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

@@ -1,5 +1,5 @@
 export default `<div
-  ng-class=":: [styles.tabs, styles[theme]]"
+  ng-class=":: styles.tabs"
   rg-shortcuts="ring-tabs"
   shortcuts-map="keyMap"
   shortcuts-focus="focus"

package/components/tag/tag.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value background-color: var(--ring-tag-background-color);
 @value max-height: 20px;
 
 .tag {
@@ -19,18 +18,26 @@
   margin-bottom: 1px;
   padding: 0 unit;
 
+  cursor: pointer;
+
   vertical-align: top;
 
   color: var(--ring-text-color);
 
   border: none;
   border-radius: var(--ring-border-radius);
-  background-color: background-color;
 
   font-size: 12px;
   line-height: var(--ring-line-height);
 }
 
+.tag,
+.tagAngled::before {
+  transition: background-color var(--ring-ease);
+
+  background-color: var(--ring-tag-background-color);
+}
+
 .withRemove {
   padding-right: 22px;
 }
@@ -48,13 +55,24 @@
 }
 
 .focused,
-.tag:focus {
+.tag:global(.focus-visible) {
   position: relative;
 
   outline: none;
   box-shadow: 0 0 0 2px var(--ring-border-hover-color);
 }
 
+.focused,
+.focused.tagAngled::before,
+.tag:global(.focus-visible),
+.tagAngled:global(.focus-visible)::before,
+.tag:hover,
+.tagAngled:hover::before {
+  transition: none;
+
+  background-color: var(--ring-tag-hover-background-color);
+}
+
 .tagAngled {
   /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
 
@@ -81,8 +99,6 @@
     transform-origin: 0 0;
 
     border: none;
-
-    background-color: background-color;
   }
 
   &.focused,
@@ -101,17 +117,24 @@
   composes: ellipsis from "../global/global.css";
 }
 
-.disabled {
-  opacity: 0.5;
+.disabled.tag,
+.disabled.tagAngled::before {
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+  background-color: var(--ring-disabled-background-color);
 }
 
 .remove {
   position: absolute;
   z-index: 1;
-  top: -1px;
+  top: 1px;
   right: 0;
 
+  height: auto;
   padding: 0 calc(unit / 2);
+
+  line-height: calc(unit * 2);
 }
 
 .removeIcon.removeIcon {