@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/tabs/collapsible-tabs.js

@@ -6,18 +6,16 @@ import { FakeMoreButton, MoreButton } from './collapsible-more';
 import getTabTitles from './collapsible-tab';
 const DEFAULT_DEBOUNCE_INTERVAL = 100;
 const MEASURE_TOLERANCE = 0.5;
-export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }) => {
+export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }) => {
     const [sizes, setSizes] = useState({ tabs: [], more: undefined });
     const [lastVisibleIndex, setLastVisibleIndex] = useState(null);
     const elements = { sizes, lastVisibleIndex };
     const [preparedElements, setPreparedElements] = useState({
         visible: [],
-        hidden: []
+        hidden: [],
     });
     const measureRef = useRef(null);
-    const selectedIndex = useMemo(() => children.
-        filter(tab => tab.props.alwaysHidden !== true).
-        findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
+    const selectedIndex = useMemo(() => children.filter(tab => tab.props.alwaysHidden !== true).findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
     const visibleElements = useMemo(() => {
         let items;
         if (preparedElements.ready) {
@@ -31,22 +29,15 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
         return getTabTitles({
             items,
             selected,
-            onSelect
+            onSelect,
         });
-    }, [
-        initialVisibleItems,
-        children,
-        preparedElements.ready,
-        preparedElements.visible,
-        onSelect,
-        selected
-    ]);
+    }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
     const adjustTabs = useCallback((entry) => {
         const containerWidth = entry.contentRect.width;
         const { tabs: tabsSizes, more = 0 } = elements.sizes;
         let renderMore = children.some(tab => tab.props.alwaysHidden);
         const tabsToRender = [];
-        let filledWidth = renderMore ? more ?? 0 : 0;
+        let filledWidth = renderMore ? (more ?? 0) : 0;
         for (let i = 0; i < tabsSizes.length; i++) {
             if (filledWidth + tabsSizes[i] < containerWidth + MEASURE_TOLERANCE) {
                 filledWidth += tabsSizes[i];
@@ -90,8 +81,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
     useEffect(() => {
         const timeout = setTimeout(() => {
             const res = children.reduce((accumulator, tab) => {
-                if (tab.props.alwaysHidden !== true &&
-                    accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
+                if (tab.props.alwaysHidden !== true && accumulator.visible.length - 1 < (elements.lastVisibleIndex ?? 0)) {
                     accumulator.visible.push(tab);
                 }
                 else {
@@ -132,15 +122,17 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
             const descendants = [...(container?.children ?? [])];
             const moreButton = descendants.pop();
             let moreButtonWidth = moreButton?.offsetWidth ?? 0;
-            const { marginLeft: moreButtonMarginLeft = '0', marginRight: moreButtonMarginRight = '0' } = moreButton ? getComputedStyle(moreButton) : {};
+            const { marginLeft: moreButtonMarginLeft = '0', marginRight: moreButtonMarginRight = '0' } = moreButton
+                ? getComputedStyle(moreButton)
+                : {};
             moreButtonWidth += +moreButtonMarginLeft.replace('px', '') + +moreButtonMarginRight.replace('px', '');
             const tabsWidth = descendants.map(node => {
                 const { marginLeft, marginRight } = getComputedStyle(node);
                 const width = node.getBoundingClientRect().width;
                 return width + +marginLeft.replace('px', '') + +marginRight.replace('px', '');
             });
-            const newSummaryWidth = tabsWidth.reduce((acc, curr) => (acc + curr), 0);
-            const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => (acc + curr), 0);
+            const newSummaryWidth = tabsWidth.reduce((acc, curr) => acc + curr, 0);
+            const oldSummaryWidth = elements.sizes.tabs.reduce((acc, curr) => acc + curr, 0);
             if (elements.sizes.more !== moreButtonWidth || newSummaryWidth !== oldSummaryWidth) {
                 fastdom.mutate(() => setSizes({ more: moreButtonWidth, tabs: tabsWidth }));
             }
@@ -167,8 +159,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, moreClassName, m
             resizeObserver.disconnect();
         };
     }, [adjustTabs]);
-    const isAdjusted = (elements.lastVisibleIndex !== null &&
-        preparedElements.ready === true) || initialVisibleItems;
+    const isAdjusted = (elements.lastVisibleIndex !== null && preparedElements.ready === true) || initialVisibleItems;
     const className = classNames(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
     return (<div className={styles.autoCollapseContainer}>
       <div className={classNames(className, styles.rendered)}>

package/components/tabs/dumb-tabs.js

@@ -10,7 +10,7 @@ import { CustomItem } from './custom-item';
 export { CustomItem };
 class Tabs extends PureComponent {
     static defaultProps = {
-        onSelect() { }
+        onSelect() { },
     };
     handleSelect = memoize((key) => () => this.props.onSelect(key));
     getTabTitle = (child, i) => {
@@ -22,21 +22,18 @@ class Tabs extends PureComponent {
         const key = id || String(i);
         const isSelected = key === selected;
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
-            [styles.selected]: isSelected
+            [styles.selected]: isSelected,
         });
         return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
     };
     render() {
         const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
-        const childrenArray = React.Children.toArray(children).
-            filter(Boolean);
+        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}>
-              {childrenArray.map(this.getTabTitle)}
-            </div>)}
+        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={this.handleSelect} selected={selected}>
+            {childrenArray}
+          </CollapsibleTabs>) : (<div className={styles.titles}>{childrenArray.map(this.getTabTitle)}</div>)}
         <div className={classNames(tabContainerClassName)}>
           {childrenArray.find(({ props }, i) => (props.id || String(i)) === selected)}
         </div>

package/components/tabs/smart-tabs.js

@@ -5,15 +5,15 @@ export default class SmartTabs extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            selected: this.props.initSelected ||
-                (Array.isArray(this.props.children) && this.props.children[0].props.id) ||
-                '0'
+            selected: this.props.initSelected || (Array.isArray(this.props.children) && this.props.children[0].props.id) || '0',
         };
     }
     state;
     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>);
+        return (<Tabs data-test={dataTests('ring-smart-tabs', dataTest)} selected={this.state.selected} onSelect={this.handleSelect} {...restProps}>
+        {children}
+      </Tabs>);
     }
 }

package/components/tabs/tab-link.js

@@ -2,9 +2,7 @@ import { memo } from 'react';
 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;
+    const renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
     return (<Link {...restProps}>
       <div className={styles.container}>
         <span className={styles.visible}>{renderedTitle}</span>

package/components/tabs/tabs.css

@@ -3,20 +3,18 @@
 /* ensure styles order */
 @import "../link/link.css";
 
-@value dark from "../global/variables_dark.css";
-@value line-shadow: inset 0 -1px 0 0;
-@value selected-line-shadow: inset 0 -2px 0 0;
-
 :root {
   --ring-selected-tab-color: var(--ring-text-color);
 }
 
-.dark,
 :global(.ring-ui-theme-dark) {
   --ring-selected-tab-color: var(--ring-text-color);
 }
 
 .tabs {
+  --ring-tabs-line-shadow: inset 0 -1px 0 0;
+  --ring-tabs-selected-line-shadow: inset 0 -2px 0 0;
+
   composes: font from "../global/global.css";
 }
 
@@ -31,7 +29,7 @@
 }
 
 .titles {
-  box-shadow: line-shadow var(--ring-line-color);
+  box-shadow: var(--ring-tabs-line-shadow) var(--ring-line-color);
 }
 
 .title {
@@ -62,13 +60,13 @@
     &.selected,
     &.collapsed {
       color: inherit;
-      box-shadow: selected-line-shadow var(--ring-text-color);
+      box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-text-color);
     }
   }
 
   &:focus-visible {
     color: var(--ring-main-color);
-    box-shadow: selected-line-shadow var(--ring-main-color);
+    box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-main-color);
   }
 
   &[disabled] {
@@ -91,7 +89,7 @@
   color: var(--ring-active-text-color);
 
   outline: none;
-  box-shadow: selected-line-shadow var(--ring-selected-tab-color);
+  box-shadow: var(--ring-tabs-selected-line-shadow) var(--ring-selected-tab-color);
 
   font-weight: var(--ring-font-weight-bold);
 }

package/components/tag/tag.css

@@ -1,8 +1,8 @@
 @import "../global/variables.css";
 
-@value max-height: 20px;
-
 .tag {
+  --ring-tag-max-height: 20px;
+
   composes: resetButton from "../global/global.css";
 
   position: relative;
@@ -12,7 +12,7 @@
 
   box-sizing: border-box;
   max-width: 100%;
-  height: max-height;
+  height: var(--ring-tag-max-height);
 
   padding: 0 var(--ring-unit);
 
@@ -81,7 +81,7 @@
 .remove {
   position: absolute;
   z-index: 1;
-  top: 1px;
+  top: 2px;
   right: 0;
 
   height: auto;
@@ -110,8 +110,8 @@
   overflow: hidden;
 
   box-sizing: border-box;
-  width: max-height;
-  height: max-height;
+  width: var(--ring-tag-max-height);
+  height: var(--ring-tag-max-height);
   margin-right: calc(var(--ring-unit) / 2);
   margin-left: calc(var(--ring-unit) * -1);
 
@@ -131,7 +131,7 @@
 }
 
 .avatarIcon {
-  width: max-height;
+  width: var(--ring-tag-max-height);
 
   margin-right: -4px;
 

package/components/tag/tag.d.ts

@@ -7,7 +7,7 @@ export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
     'data-test': string;
 }
 export interface TagProps {
-    onRemove: (event: React.MouseEvent<HTMLElement>) => void;
+    onRemove?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     readOnly: boolean;
     disabled: boolean;

package/components/tag/tag.js

@@ -11,15 +11,14 @@ import styles from './tag.css';
  */
 export default class Tag extends PureComponent {
     static defaultProps = {
-        onRemove: () => { },
         onClick: () => { },
         readOnly: false,
         disabled: false,
         focused: false,
-        render: props => <button type="button" {...props}/>
+        render: props => <button type="button" {...props}/>,
     };
     state = {
-        focused: false
+        focused: false,
     };
     componentDidUpdate(prevProps) {
         if (this.props.focused !== prevProps.focused) {
@@ -53,16 +52,16 @@ export default class Tag extends PureComponent {
     }
     renderCustomIcon() {
         if (this.props.rgTagIcon) {
-            return (<Icon className={styles.icon} title={this.props.rgTagTitle} glyph={this.props.rgTagIcon}/>);
+            return <Icon className={styles.icon} title={this.props.rgTagTitle} glyph={this.props.rgTagIcon}/>;
         }
         return null;
     }
     _renderImageElement(avatarSrc) {
         const classes = classNames({
             [styles.customIcon]: this.props.icon,
-            [styles.avatarIcon]: avatarSrc
+            [styles.avatarIcon]: avatarSrc,
         });
-        return (<img alt={avatarSrc ? 'Avatar' : 'Icon'} className={classes} src={avatarSrc || this.props.icon}/>);
+        return <img alt={avatarSrc ? 'Avatar' : 'Icon'} className={classes} src={avatarSrc || this.props.icon}/>;
     }
     renderImage() {
         if (this.props.icon && !this.props.avatar) {
@@ -72,14 +71,12 @@ export default class Tag extends PureComponent {
     }
     renderAvatar() {
         if (this.props.avatar) {
-            return (<span className={styles.avatarContainer}>
-          {this._renderImageElement(this.props.avatar)}
-        </span>);
+            return <span className={styles.avatarContainer}>{this._renderImageElement(this.props.avatar)}</span>;
         }
         return null;
     }
     renderRemoveIcon() {
-        if (!this.props.readOnly) {
+        if (!this.props.readOnly && this.props.onRemove) {
             return (<Button title="Remove" icon={closeIcon} data-test="ring-tag-remove" className={styles.remove} iconClassName={styles.removeIcon} onClick={this.props.onRemove} style={{ '--ring-icon-secondary-color': this.props.textColor }} height={ControlsHeight.M}/>);
         }
         return null;
@@ -88,7 +85,7 @@ export default class Tag extends PureComponent {
         const classes = classNames('ring-js-shortcuts', styles.tag, {
             [styles.focused]: this.state.focused,
             [styles.disabled]: this.props.disabled,
-            [styles.withRemove]: !this.props.readOnly
+            [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
         return (<span className={styles.container}>
@@ -104,7 +101,7 @@ export default class Tag extends PureComponent {
               {this.renderCustomIcon()}
               {this.renderImage()}
               <span className={styles.content}>{this.props.children}</span>
-            </>)
+            </>),
             })}
         {this.renderRemoveIcon()}
       </span>);

package/components/tags-input/tags-input.js

@@ -33,7 +33,7 @@ export default class TagsInput extends PureComponent {
         allowAddNewTags: false,
         filter: { fn: () => true },
         placeholder: 'Select an option',
-        size: Size.M
+        size: Size.M,
     };
     constructor(props) {
         super(props);
@@ -46,7 +46,7 @@ export default class TagsInput extends PureComponent {
         loading: true,
         focused: false,
         query: '',
-        activeIndex: 0
+        activeIndex: 0,
     };
     static getDerivedStateFromProps({ tags }, { prevTags }) {
         const nextState = { prevTags: tags };
@@ -99,15 +99,14 @@ export default class TagsInput extends PureComponent {
         this.select?.filterValue('');
         if (isUniqueTag) {
             this.setState(prevState => ({
-                tags: prevState.tags.concat([tag])
+                tags: prevState.tags.concat([tag]),
             }));
             this.props.onAddTag({ tag });
             this.setActiveIndex();
         }
     };
     onRemoveTag(tagToRemove) {
-        return Promise.resolve(this.props.onRemoveTag({ tag: tagToRemove })).
-            then(() => {
+        return Promise.resolve(this.props.onRemoveTag({ tag: tagToRemove })).then(() => {
             const tags = this.state.tags.filter(tag => tag !== tagToRemove);
             if (this.node) {
                 this.setState({ tags });
@@ -129,9 +128,7 @@ export default class TagsInput extends PureComponent {
     loadSuggestions = (query = '') => this.setState({ loading: true, query }, async () => {
         try {
             const suggestionsResult = this.props.dataSource({ query });
-            const allSuggestions = Array.isArray(suggestionsResult)
-                ? suggestionsResult
-                : await suggestionsResult;
+            const allSuggestions = Array.isArray(suggestionsResult) ? suggestionsResult : await suggestionsResult;
             const suggestions = this.filterExistingTags(allSuggestions);
             if (this.node && query === this.state.query) {
                 this.setState({ suggestions, loading: false });
@@ -149,9 +146,7 @@ export default class TagsInput extends PureComponent {
         this.setState({ focused: false });
     };
     selectTag = (moveForward) => {
-        const activeIndex = typeof this.state.activeIndex === 'number'
-            ? this.state.activeIndex
-            : this.state.tags.length + 1;
+        const activeIndex = typeof this.state.activeIndex === 'number' ? this.state.activeIndex : this.state.tags.length + 1;
         let newActiveIndex = activeIndex + (moveForward ? 1 : -1);
         if (newActiveIndex >= this.state.tags.length) {
             newActiveIndex = this.state.tags.length - 1;
@@ -165,8 +160,7 @@ export default class TagsInput extends PureComponent {
     };
     handleKeyDown = (event) => {
         const key = getEventKey(event);
-        const isInputFocused = () => event.target instanceof Element &&
-            event.target.matches(this.getInputNode()?.tagName ?? '');
+        const isInputFocused = () => event.target instanceof Element && event.target.matches(this.getInputNode()?.tagName ?? '');
         if (key === ' ' && this.props.allowAddNewTags) {
             event.stopPropagation();
             const value = this.getInputNode()?.value;
@@ -205,10 +199,10 @@ export default class TagsInput extends PureComponent {
                 this.onRemoveTag(this.state.tags[tagsLength - 1]);
                 return false;
             }
-            if ((key === 'Delete' || key === 'Backspace') && this.state.activeIndex != null &&
+            if ((key === 'Delete' || key === 'Backspace') &&
+                this.state.activeIndex != null &&
                 this.state.tags[this.state.activeIndex]) {
-                this.onRemoveTag(this.state.tags[this.state.activeIndex]).
-                    then(() => this.selectTag(true));
+                this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
                 return false;
             }
         }
@@ -227,15 +221,17 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label, } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
-            [styles.tagsInputFocused]: focused
+            [styles.tagsInputFocused]: focused,
         }, this.props.className);
         return (<div 
         // it transfers focus to input
         role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
-        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>
+            {label}
+          </ControlLabel>)}
 
         <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
           <Select id={this.id} ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage} hint={this.props.hint}/>

package/components/tags-list/tags-list.d.ts

@@ -24,8 +24,8 @@ export default class TagsList<T extends TagType> extends Component<TagsListProps
         customTagComponent: null;
         canNotBeEmpty: boolean;
         disabled: boolean;
-        handleClick: typeof noop;
-        handleRemove: typeof noop;
+        handleClick: () => typeof noop;
+        handleRemove: () => typeof noop;
     };
     renderTag(tag: T, focusTag: boolean): React.JSX.Element;
     render(): React.JSX.Element;

package/components/tags-list/tags-list.js

@@ -11,15 +11,16 @@ export default class TagsList extends Component {
         customTagComponent: null,
         canNotBeEmpty: false,
         disabled: false,
-        handleClick: noop,
-        handleRemove: noop
+        handleClick: () => noop,
+        handleRemove: () => noop,
     };
     renderTag(tag, focusTag) {
         const TagComponent = this.props.customTagComponent || Tag;
-        const readOnly = this.props.disabled || tag.readOnly ||
-            (this.props.canNotBeEmpty && this.props.tags.length === 1);
+        const readOnly = this.props.disabled || tag.readOnly || (this.props.canNotBeEmpty && this.props.tags.length === 1);
         const { tagClassName } = this.props;
-        return (<TagComponent {...tag} key={tag.key} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>{tag.label}</TagComponent>);
+        return (<TagComponent {...tag} key={tag.key} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>
+        {tag.label}
+      </TagComponent>);
     }
     render() {
         const { children, className, customTagComponent, canNotBeEmpty, handleClick, tagClassName, handleRemove, tags, activeIndex, ...props } = this.props;

package/components/text/text.js

@@ -4,7 +4,7 @@ import styles from './text.css';
 const TextSize = {
     S: 's',
     M: 'm',
-    L: 'l'
+    L: 'l',
 };
 /**
  * @name Text
@@ -18,8 +18,10 @@ export default class Text extends Component {
             [styles.bold]: bold,
             [styles.sizeS]: size === Text.Size.S,
             [styles.sizeM]: size === Text.Size.M,
-            [styles.sizeL]: size === Text.Size.L
+            [styles.sizeL]: size === Text.Size.L,
         });
-        return (<span className={classes} {...restProps}>{children}</span>);
+        return (<span className={classes} {...restProps}>
+        {children}
+      </span>);
     }
 }

package/components/toggle/toggle.css

@@ -1,10 +1,10 @@
 @import "../global/variables.css";
 
-@value padding: 2px;
-@value duration: 300ms;
-@value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-
 .toggle {
+  --ring-toggle-padding: 2px;
+  --ring-toggle-duration: 300ms;
+  --ring-toggle-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+
   display: inline-flex;
   align-items: baseline;
 
@@ -70,14 +70,16 @@
   width: 100%;
   height: 100%;
 
-  transition: background-color timing-function duration;
+  transition: background-color var(--ring-toggle-timing-function) var(--ring-toggle-duration);
 
   border: solid 1px var(--ring-toggle-border-color);
 
   background-color: var(--ring-toggle-background-color);
 
   .input:focus + & {
-    box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+    box-shadow:
+      inset 0 0 0 1px var(--ring-border-hover-color),
+      0 0 0 1px var(--ring-border-hover-color);
   }
 
   &::before {
@@ -92,9 +94,9 @@
 
     content: "";
 
-    transition: transform timing-function duration;
+    transition: transform var(--ring-toggle-timing-function) var(--ring-toggle-duration);
 
-    transform: translateX(padding) translateY(-50%);
+    transform: translateX(var(--ring-toggle-padding)) translateY(-50%);
 
     border: solid 1px var(--ring-switch-border-color);
 
@@ -132,7 +134,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(var(--ring-unit) * 1.5 - padding)) translateY(-50%);
+    transform: translateX(calc(var(--ring-unit) * 1.5 - var(--ring-toggle-padding))) translateY(-50%);
   }
 }
 
@@ -182,7 +184,7 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   & .input:checked + ::before {
-    transform: translateX(calc(var(--ring-unit) * 2 - padding)) translateY(-50%);
+    transform: translateX(calc(var(--ring-unit) * 2 - var(--ring-toggle-padding))) translateY(-50%);
   }
 }
 

package/components/toggle/toggle.d.ts

@@ -5,8 +5,8 @@ export declare const Size: {
     Size20: string;
 };
 /**
-  * @name Toggle
-  */
+ * @name Toggle
+ */
 export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     size: string;
     leftLabel?: ReactNode;

package/components/toggle/toggle.js

@@ -6,17 +6,18 @@ import styles from './toggle.css';
 export const Size = {
     Size14: styles.size14,
     Size16: styles.size16,
-    Size20: styles.size20
+    Size20: styles.size20,
 };
 class Toggle extends PureComponent {
     static defaultProps = {
-        size: Size.Size16
+        size: Size.Size16,
     };
     render() {
         const { className, children, disabled, title, leftLabel, size = Size.Size16, 'data-test': dataTest, help, onTransitionEnd, ...restProps } = this.props;
         const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);
         return (<label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
-        {leftLabel && (<span className={styles.leftLabel}>{leftLabel}
+        {leftLabel && (<span className={styles.leftLabel}>
+            {leftLabel}
             {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
           </span>)}
 

package/components/tooltip/tooltip.d.ts

@@ -1,7 +1,8 @@
-import { AllHTMLAttributes, Component, ReactNode } from 'react';
 import * as React from 'react';
+import { AllHTMLAttributes, Component, ReactNode } from 'react';
 import Popup, { PopupAttrs } from '../popup/popup';
 import { Listeners } from '../global/dom';
+import Theme from '../global/theme';
 interface Context {
     onNestedTooltipShow: () => void;
     onNestedTooltipHide: () => void;
@@ -12,6 +13,7 @@ export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, '
     selfOverflowOnly?: boolean | null | undefined;
     popupProps?: Partial<PopupAttrs> | null | undefined;
     title?: ReactNode | null | undefined;
+    theme?: Theme;
     'data-test'?: string | null | undefined;
     long?: boolean | null | undefined;
 }
@@ -22,6 +24,7 @@ export default class Tooltip extends Component<TooltipProps> {
     static defaultProps: {
         title: string;
         selfOverflowOnly: boolean;
+        theme: Theme;
         popupProps: {};
     };
     state: {