@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/toggle/toggle.examples.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Toggle, {Size} from './toggle';
+
+export default {
+  title: 'Components/Toggle',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a checkbox as an animated on/off toggle.'
+  }
+};
+
+export const basic = () => (
+  <div>
+    <h1>Size 16</h1>
+    <div>
+      <Toggle>Unchecked by default</Toggle>
+    </div>
+    <div>
+      <Toggle defaultChecked>Checked by default</Toggle>
+    </div>
+    <div>
+      <Toggle disabled>Disabled unchecked</Toggle>
+    </div>
+    <div>
+      <Toggle disabled defaultChecked>Disabled checked</Toggle>
+    </div>
+    <div>
+      <Toggle pale>Pale unchecked by default</Toggle>
+    </div>
+    <div>
+      <Toggle pale defaultChecked>Pale checked by default</Toggle>
+    </div>
+    <div>
+      <Toggle pale disabled>Pale disabled unchecked</Toggle>
+    </div>
+    <div>
+      <Toggle pale disabled defaultChecked>Pale disabled checked</Toggle>
+    </div>
+    <div>
+      <Toggle leftLabel="With label on the left"/>
+    </div>
+    <h1>Size 20</h1>
+    <div style={{lineHeight: '24px'}}>
+      <div>
+        <Toggle size={Size.Size20}>Unchecked by default</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} defaultChecked>Checked by default</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} disabled>Disabled unchecked</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} disabled defaultChecked>Disabled checked</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} pale>Pale unchecked by default</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} pale defaultChecked>Pale checked by default</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} pale disabled>Pale disabled unchecked</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} pale disabled defaultChecked>Pale disabled checked</Toggle>
+      </div>
+      <div>
+        <Toggle size={Size.Size20} leftLabel="With label on the left"/>
+      </div>
+    </div>
+  </div>
+);
+
+basic.storyName = 'Toggle';

package/components/toggle/toggle.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import Toggle, {ToggleAttrs} from './toggle';
+import styles from './toggle.css';
+
+describe('Toggle', () => {
+  const mountToggle = (props?: ToggleAttrs) => mount(<Toggle {...props}/>);
+  const getToggleLabel = (props?: ToggleAttrs) => mountToggle(props).find('label');
+
+  it('should create component', () => {
+    mountToggle().type().should.equal(Toggle.type);
+  });
+
+  it('should wrap children with label', () => {
+    getToggleLabel().should.exist;
+  });
+
+  it('should use passed className', () => {
+    getToggleLabel({
+      className: 'test-class'
+    }).should.have.className('test-class');
+  });
+
+  it('should render input with type checkbox', () => {
+    const toggle = getToggleLabel();
+    toggle.find('input').should.have.attr('type', 'checkbox');
+  });
+
+  it('should render switch', () => {
+    const toggle = getToggleLabel();
+    toggle.find(`.${styles.switch}`).should.exist;
+  });
+});

package/components/toggle/toggle.tsx

@@ -0,0 +1,87 @@
+import React, {ComponentPropsWithRef, InputHTMLAttributes, PureComponent, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {ThemeProps, withTheme} from '../global/theme';
+import dataTests from '../global/data-tests';
+
+import styles from './toggle.css';
+
+export const Size = {
+  Size16: styles.size16,
+  Size20: styles.size20
+};
+
+/**
+  * @name Toggle
+  */
+
+export interface ToggleProps extends ThemeProps,
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  pale?: boolean | null | undefined
+  leftLabel?: ReactNode
+  'data-test'?: string | null | undefined
+  size?: string | null | undefined
+}
+class Toggle extends PureComponent<ToggleProps> {
+  static propTypes = {
+    children: PropTypes.node,
+    name: PropTypes.string,
+    className: PropTypes.string,
+    title: PropTypes.string,
+    leftLabel: PropTypes.node,
+    defaultChecked: PropTypes.bool,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    pale: PropTypes.bool,
+    onChange: PropTypes.func,
+    onTransitionEnd: PropTypes.func,
+    theme: PropTypes.string,
+    size: PropTypes.oneOf(Object.values(Size)),
+    'data-test': PropTypes.string
+  };
+
+  render() {
+    const {className, children, disabled, pale, title, leftLabel, theme, size = Size.Size16,
+      'data-test': dataTest, onTransitionEnd, ...restProps} = this.props;
+
+    const classes = classNames(
+      className,
+      size,
+      styles.toggle,
+      styles[theme],
+      disabled && styles.disabled
+    );
+
+    return (
+      <label
+        className={classes}
+        title={title}
+        data-test={dataTests('ring-toggle', dataTest)}
+      >
+        {leftLabel && <span className={styles.leftLabel}>{leftLabel}</span>}
+
+        <span className={styles.switchWrapper}>
+          <input
+            data-test="ring-toggle-input"
+            {...restProps}
+            type="checkbox"
+            disabled={disabled}
+            className={styles.input}
+          />
+
+          <span
+            className={classNames(styles.switch, pale && styles.paleSwitch)}
+            onTransitionEnd={onTransitionEnd}
+          />
+        </span>
+
+        {children && <span className={styles.label}>{children}</span>}
+      </label>
+    );
+  }
+}
+const ThemedToggle = withTheme()(Toggle);
+ThemedToggle.propTypes = Toggle.propTypes;
+export type ToggleAttrs = ComponentPropsWithRef<typeof ThemedToggle>
+export default ThemedToggle;

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ToggleNG from '@jetbrains/ring-ui/components/toggle-ng/toggle-ng';
+import ToggleNG from './toggle-ng';
 
 export default {
   title: 'Legacy Angular/Toggle Ng',

package/components/tooltip/tooltip.examples.tsx

@@ -0,0 +1,118 @@
+import React, {CSSProperties, Fragment} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+
+import Tooltip from './tooltip';
+
+export default {
+  title: 'Components/Tooltip',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'Displays a tooltip.'
+  }
+};
+
+export const basic = () => (
+  <div style={{paddingBottom: '100px'}}>
+    <Tooltip title="Explanation">
+      <Button id="button-with-tooltip">Button that requires an explanation</Button>
+    </Tooltip>
+  </div>
+);
+
+basic.storyName = 'basic';
+
+basic.parameters = {
+  hermione: {
+    actions: [
+      {type: 'mouseEvent', selector: '[data-test~=ring-tooltip]', eventname: 'mouseover'},
+      {type: 'wait', delay: 500},
+      {type: 'capture', name: '', selector: '#root'}
+    ]
+  }
+};
+
+export const displayedWhenNecessary = () => {
+  const loremIpsum =
+    'Lorem ipsum dolor sit amet, vitae alienum prodesset vis ei, quando nullam ' +
+    'oportere sea eu, vim an labore diceret docendi. Vim ne illud iusto feugait, ' +
+    'sea laudem prompta accommodare eu, vidit noster efficiantur est id. Ex vide ' +
+    'tollit necessitatibus est, eum no quas dicunt. Luptatum singulis usu ne, cu ' +
+    'sit populo semper civibus. Tamquam dolorem qui ea, nec no dolor vidisse conceptam, ' +
+    'an est ponderum eloquentiam.';
+
+  const overflowStyles: CSSProperties = {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+
+  return (
+    <Fragment>
+      <div style={{paddingBottom: '200px'}}>
+        <Tooltip title={loremIpsum} selfOverflowOnly className="lorem-ipsum__text">
+          <b>{"Tooltip won't be displayed:"}</b> {loremIpsum}
+        </Tooltip>
+      </div>
+      <div style={{paddingBottom: '200px'}}>
+        <Tooltip
+          title={loremIpsum}
+          selfOverflowOnly
+          style={overflowStyles}
+          className="lorem-ipsum__text_overflow"
+        >
+          <b>Tooltip will be displayed:</b> {loremIpsum}
+        </Tooltip>
+      </div>
+    </Fragment>
+  );
+};
+
+displayedWhenNecessary.storyName = 'displayed when necessary';
+
+displayedWhenNecessary.parameters = {
+  hermione: {
+    actions: [
+      {type: 'mouseEvent', selector: '.lorem-ipsum__text', eventname: 'mouseover'},
+      {type: 'capture', name: 'full text element', selector: '#root'},
+      {type: 'mouseEvent', selector: '.lorem-ipsum__text_overflow', eventname: 'mouseover'},
+      {type: 'capture', name: 'cut text element', selector: '#root'}
+    ]
+  }
+};
+
+export const nested = () => (
+  <div style={{paddingBottom: '100px'}}>
+    <Tooltip title="Explanation">
+      Some text with an explanation.
+
+      <Tooltip title="Nested Explanation">
+        <strong> Some text inside with a separate explanation. </strong>
+
+        <Tooltip title="Nested Nested Explanation">
+          <Button id="button-with-tooltip">Inline button that requires an explanation too</Button>
+        </Tooltip>
+
+        <strong> Some text inside with a separate explanation. </strong>
+      </Tooltip>
+
+      Some text with an explanation.
+    </Tooltip>
+  </div>
+);
+
+nested.storyName = 'nested';
+
+nested.parameters = {
+  hermione: {
+    actions: [
+      {type: 'mouseEvent', selector: '[data-test~=ring-tooltip]', eventname: 'mouseover'},
+      {type: 'wait', delay: 500},
+      {type: 'capture', name: '', selector: '#root'}
+    ]
+  }
+};

package/components/tooltip/tooltip.test.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  isCompositeComponentWithType
+} from 'react-dom/test-utils';
+import {mount, render} from 'enzyme';
+
+import Popup from '../popup/popup';
+
+import Tooltip, {TooltipAttrs} from './tooltip';
+
+describe('Tooltip', () => {
+  const defaultProps: TooltipAttrs = {
+    title: 'test tooltip',
+    className: 'test-class',
+    children: 'test elem'
+  };
+  const mountTooltip = (props?: TooltipAttrs) =>
+    mount<Tooltip>(<Tooltip {...defaultProps} {...props}/>);
+  const renderTooltip = (props?: TooltipAttrs) => render(<Tooltip {...defaultProps} {...props}/>);
+
+  it('should create component', () => {
+    mountTooltip().should.have.type(Tooltip);
+  });
+
+  describe('Children', () => {
+    it('should wrap text children', () => {
+      const wrapper = renderTooltip();
+      wrapper.should.have.text('test elem');
+      wrapper.should.have.tagName('span');
+    });
+
+    it('should wrap children', () => {
+      const wrapper = renderTooltip({
+        title: 'test tooltip',
+        children: <span>{'test span'}</span>
+      });
+
+      wrapper.should.have.tagName('span');
+      wrapper.children().first().should.have.text('test span');
+      wrapper.children().first().should.have.tagName('span');
+    });
+
+    it('should pass props to children', () => {
+      mountTooltip().should.have.className('test-class');
+    });
+
+    it('should not pass title to children', () => {
+      const wrapper = mountTooltip();
+      wrapper.children().first().should.not.have.prop('title');
+    });
+  });
+
+  describe('Popup', () => {
+    it('should unbind listeners when empty title is provided', () => {
+      const wrapper = mountTooltip();
+      const bindEvents = sandbox.spy(wrapper.getDOMNode(), 'removeEventListener');
+
+      wrapper.setProps({
+        title: ''
+      });
+
+      bindEvents.should.have.been.calledTwice;
+    });
+
+    it('should render popup', () => {
+      const wrapper = mountTooltip();
+      const instance = wrapper.instance();
+      instance.tryToShowPopup();
+
+      isCompositeComponentWithType(instance.popup!, Popup).should.be.true;
+    });
+
+    it('should not render popup when empty title is provided', () => {
+      const wrapper = mountTooltip({
+        title: ''
+      });
+      const instance = wrapper.instance();
+
+      instance.tryToShowPopup();
+      instance.popup!.isVisible().should.be.false;
+    });
+
+    it('should render with delay when provided', () => {
+      const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+      const wrapper = mountTooltip({
+        delay: 100
+      });
+      const instance = wrapper.instance();
+
+      instance.tryToShowPopup();
+
+      instance.popup!.isVisible().should.be.false;
+
+
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      clock.tick(200);
+      instance.popup!.isVisible().should.be.true;
+    });
+
+    it('should pass custom props to popup', () => {
+      const wrapper = mountTooltip({
+        popupProps: {
+          className: 'tooltip-test-popup'
+        }
+      });
+      const instance = wrapper.instance();
+
+      instance.tryToShowPopup();
+      instance.popup!.popup!.should.have.class('tooltip-test-popup');
+    });
+
+    it('should close popup on unmount', () => {
+      const wrapper = mountTooltip();
+      const instance = wrapper.instance();
+      instance.tryToShowPopup();
+      wrapper.unmount();
+
+      should.not.exist(instance.popup);
+    });
+
+    it('should not close popup on click on tooltip', () => {
+      const wrapper = mountTooltip();
+      const instance = wrapper.instance();
+      instance.tryToShowPopup();
+      wrapper.simulate('click');
+
+      instance.popup!.isVisible().should.be.true;
+    });
+  });
+});

package/components/tooltip/tooltip.tsx

@@ -0,0 +1,187 @@
+import React, {AllHTMLAttributes, Component, createContext, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+
+import Popup, {PopupAttrs} from '../popup/popup';
+import {Listeners} from '../global/dom';
+import dataTests from '../global/data-tests';
+import scheduleRAF from '../global/schedule-raf';
+
+import styles from './tooltip.css';
+
+const scheduleScroll = scheduleRAF();
+
+interface Context {
+  onNestedTooltipShow: () => void
+  onNestedTooltipHide: () => void
+}
+
+const TooltipContext = createContext<Context | undefined>(undefined);
+
+export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, 'title'> {
+  delay?: number | null | undefined
+  selfOverflowOnly?: boolean | null | undefined
+  popupProps?: Partial<PopupAttrs> | null | undefined
+  title?: ReactNode | null | undefined
+  'data-test'?: string | null | undefined
+}
+/**
+ * @name Tooltip
+ */
+export default class Tooltip extends Component<TooltipProps> {
+  static propTypes = {
+    delay: PropTypes.number,
+    selfOverflowOnly: PropTypes.bool,
+    popupProps: PropTypes.object,
+    title: PropTypes.node,
+    children: PropTypes.node,
+    'data-test': PropTypes.string
+  };
+
+  static defaultProps = {
+    title: '',
+    selfOverflowOnly: false,
+    popupProps: {}
+  };
+
+  state = {
+    showPopup: false,
+    showNestedPopup: false
+  };
+
+  componentDidMount() {
+    if (this.props.title) {
+      this.addListeners();
+    }
+  }
+
+  componentDidUpdate(prevProps: TooltipProps) {
+    if (!prevProps.title && this.props.title) {
+      this.addListeners();
+    } else if (prevProps.title && !this.props.title) {
+      this.listeners.removeAll();
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+    this.listeners.removeAll();
+  }
+
+  static PopupProps = Popup.PopupProps;
+  static contextType = TooltipContext;
+
+  declare context: React.ContextType<typeof TooltipContext>;
+  timeout?: number;
+  listeners = new Listeners();
+  containerNode?: HTMLElement | null;
+  containerRef = (el: HTMLElement | null) => {
+    this.containerNode = el;
+  };
+
+  tryToShowPopup = () => {
+    const {delay, title} = this.props;
+
+    if (!title) {
+      return;
+    }
+
+    if (delay) {
+      this.timeout = window.setTimeout(this.showPopup, delay);
+    } else {
+      this.showPopup();
+    }
+  };
+
+  showPopup = () => {
+    if (this.props.selfOverflowOnly) {
+      const {containerNode} = this;
+
+      // rare cases when containerNode is null are possible;
+      // probably the collision is due to the asynchronous nature of the code,
+      // i.e. this code runs after the component is unmounted,
+      // although at first glance it looks unlikely.
+      if (!containerNode) {
+        return;
+      }
+
+      // inline element?
+      if (containerNode.clientWidth === 0 && containerNode.clientHeight === 0) {
+        return;
+      }
+      if (
+        containerNode.scrollWidth <= containerNode.clientWidth &&
+        containerNode.scrollHeight <= containerNode.clientHeight
+      ) {
+        return;
+      }
+    }
+
+    this.context?.onNestedTooltipShow();
+    this.setState({showPopup: true});
+  };
+
+  hidePopup = () => {
+    clearTimeout(this.timeout);
+    this.context?.onNestedTooltipHide();
+    this.setState({showPopup: false});
+  };
+
+  addListeners() {
+    if (this.containerNode != null) {
+      this.listeners.add(this.containerNode, 'mouseover', this.tryToShowPopup);
+      this.listeners.add(this.containerNode, 'mouseout', this.hidePopup);
+    }
+    this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), {passive: true});
+  }
+
+  popup?: Popup | null;
+  popupRef = (el: Popup | null) => {
+    this.popup = el;
+  };
+
+  onNestedTooltipShow = () => {
+    this.setState({showNestedPopup: true});
+  };
+
+  onNestedTooltipHide = () => {
+    this.setState({showNestedPopup: false});
+  };
+
+  render() {
+    const {children, 'data-test': dataTest,
+      title, delay, selfOverflowOnly, popupProps, ...restProps} = this.props;
+
+    const ariaProps = typeof title === 'string' && !!title
+      ? {'aria-label': title, role: 'tooltip'}
+      : {};
+
+    const {onNestedTooltipShow, onNestedTooltipHide} = this;
+
+    return (
+      <TooltipContext.Provider value={{onNestedTooltipShow, onNestedTooltipHide}}>
+        <span
+          {...ariaProps}
+          {...restProps}
+          ref={this.containerRef}
+          data-test={dataTests('ring-tooltip', dataTest)}
+          data-test-title={typeof title === 'string' ? title : undefined}
+        >
+          {children}
+          <Popup
+            trapFocus={false}
+            hidden={!this.state.showPopup || this.state.showNestedPopup}
+            onCloseAttempt={this.hidePopup}
+            maxHeight={400}
+            className={styles.tooltip}
+            attached={false}
+            top={4}
+            dontCloseOnAnchorClick
+            ref={this.popupRef}
+            {...popupProps}
+          >{title}</Popup>
+        </span>
+      </TooltipContext.Provider>
+    );
+  }
+}
+export type TooltipAttrs = JSX.LibraryManagedAttributes<typeof Tooltip, TooltipProps>

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

@@ -4,9 +4,9 @@ import warningIcon from '@jetbrains/icons/warning';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
+import IconNG from '../icon-ng/icon-ng';
 
-import TooltipNG from '@jetbrains/ring-ui/components/tooltip-ng/tooltip-ng';
+import TooltipNG from './tooltip-ng';
 
 export default {
   title: 'Legacy Angular/Tooltip Ng',