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

package/components/tabs/dumb-tabs.js

@@ -2,7 +2,6 @@ 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';
@@ -11,7 +10,6 @@ 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,
@@ -23,24 +21,23 @@ class Tabs extends PureComponent {
     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 { 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} active key={key} href={href} innerClassName={titleClasses} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)}/>);
+        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, theme, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
-        const classes = classNames(styles.tabs, className, styles[theme]);
+        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)}>
@@ -55,5 +52,4 @@ class Tabs extends PureComponent {
       </div>);
     }
 }
-const ThemedTabs = withTheme()(Tabs);
-export default ThemedTabs;
+export default Tabs;

package/components/tabs/tab.d.ts

@@ -1,7 +1,9 @@
 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;

package/components/tabs/tabs.css

@@ -2,7 +2,7 @@
 
 @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;
 
 .tabs {
   composes: font from "../global/global.css";
@@ -14,14 +14,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 +54,7 @@
   }
 
   &:global(.focus-visible) {
+    color: var(--ring-main-color);
     box-shadow: selected-line-shadow var(--ring-main-color);
   }
 
@@ -75,36 +72,19 @@
   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;
 
-  outline: none;
-  box-shadow: selected-line-shadow var(--ring-text-color);
+  color: var(--ring-active-text-color);
 
-  font-weight: bold;
-}
-
-.dark .selected.selected {
-  color: var(--ring-dark-text-color);
+  outline: none;
   box-shadow: selected-line-shadow var(--ring-main-color);
-}
 
-.dark .title:global(.focus-visible) {
-  color: var(--ring-main-color);
+  font-weight: bold;
 }
 
 .visible {

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

@@ -1,6 +1,7 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+import darkStyles from '../global/variables_dark.css';
 
 import RingTabs from './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 {

package/components/tag/tag.d.ts

@@ -2,6 +2,7 @@ import React, { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 're
 import PropTypes from 'prop-types';
 import { IconType } from '../icon/icon';
 export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
+    disabled: boolean;
     ref: RefCallback<HTMLElement>;
     'data-test': string;
 }

package/components/tag/tag.js

@@ -116,6 +116,7 @@ export default class Tag extends PureComponent {
                 ref: this.tagRef,
                 onClick: this.props.onClick,
                 style: { backgroundColor, color: textColor },
+                disabled: this.props.disabled,
                 children: (<>
               {this.renderAvatar()}
               {this.renderCustomIcon()}

package/components/tags-input/tags-input.css

@@ -1,5 +1,7 @@
 @import "../global/variables.css";
 
+@value outerContainer, container, input from "../input/input.css";
+
 .tagsInput {
   padding-top: 2px;
   padding-bottom: 2px;
@@ -30,6 +32,10 @@
 
   color: var(--ring-disabled-color);
 
+  & .input {
+    background-color: transparent;
+  }
+
   & .underline {
     border-bottom-style: dashed;
   }
@@ -55,12 +61,12 @@
 .tagsSelect {
   margin-bottom: -1px;
 
-  & > div {
-    min-height: 20px;
+  & .outerContainer {
+    --ring-input-padding-block: 0;
   }
 
-  & input {
-    min-height: 20px;
+  & .container {
+    line-height: calc(var(--ring-line-height) - 2px);
   }
 }
 

package/components/toggle/toggle.css

@@ -9,10 +9,10 @@
 .toggle {
   cursor: pointer;
 
-  &:hover {
-    & .switch {
-      background-color: var(--ring-border-hover-color);
-    }
+  &:hover .switch {
+    transition: none;
+
+    background-color: var(--ring-border-hover-color);
   }
 
   &.disabled {
@@ -21,42 +21,17 @@
 }
 
 .label {
-  margin-left: calc(unit / 2);
+  margin-left: unit;
 }
 
 .leftLabel {
-  margin-right: calc(unit / 2);
-}
-
-.light {
-  & .switch {
-    background-color: var(--ring-icon-color);
-
-    &::before {
-      background-color: var(--ring-content-background-color);
-    }
-  }
-}
-
-.dark {
-  & .switch {
-    background-color: var(--ring-hint-color);
-
-    &::before {
-      background-color: var(--ring-navigation-background-color);
-    }
-  }
+  margin-right: unit;
 }
 
 .switchWrapper {
   position: relative;
 
   display: inline-block;
-
-  width: calc(unit * 3);
-  height: calc(unit * 2);
-
-  vertical-align: -3px;
 }
 
 .input {
@@ -82,12 +57,12 @@
 
   transition: background-color timing-function duration;
 
+  background-color: var(--ring-icon-color);
+
   @nest .input:focus + & {
     box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
-  border-radius: unit;
-
   &::before {
     position: absolute;
     top: padding;
@@ -103,6 +78,7 @@
     transform: translateX(padding);
 
     border-radius: calc(unit * 0.75);
+    background-color: var(--ring-content-background-color);
   }
 }
 
@@ -110,8 +86,58 @@
   background-color: var(--ring-main-color);
 }
 
-.input:checked + ::before {
-  transform: translateX(calc(unit * 1.5 - padding));
+:checked:hover + .switch {
+  background-color: var(--ring-main-hover-color);
+}
+
+.size16 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: calc(unit * 2);
+
+    vertical-align: -3px;
+  }
+
+  & .switch {
+    border-radius: unit;
+
+    &::before {
+      width: calc(unit * 1.5);
+      height: calc(unit * 1.5);
+
+      border-radius: calc(unit * 0.75);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(calc(unit * 1.5 - padding));
+  }
+}
+
+.size14 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: 14px;
+
+    vertical-align: -2px;
+  }
+
+  & .switch {
+    border-radius: 7px;
+
+    &::before {
+      width: 10px;
+      height: 10px;
+
+      border-radius: 5px;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(12px);
+  }
 }
 
 .size20 {