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

package/webpack.config.js

@@ -14,8 +14,8 @@ function createConfig() {
       {
         loader: require.resolve('style-loader'),
         options: {
-          esModule: false
-        }
+          esModule: false,
+        },
       },
       {
         loader: require.resolve('css-loader'),
@@ -23,29 +23,24 @@ function createConfig() {
           modules: {
             namedExport: false,
             exportLocalsConvention: 'as-is',
-            localIdentName: '[local]_[hash:4]'
+            localIdentName: '[local]_[hash:4]',
           },
-          importLoaders: 1
-        }
+          importLoaders: 1,
+        },
       },
       {
         loader: require.resolve('postcss-loader'),
         options: {
-          implementation: require('postcss')
-        }
-      }
-    ]
+          implementation: require('postcss'),
+        },
+      },
+    ],
   };
 
   const externalCssLoader = {
     test: /\.css$/,
-    include: [
-      path.dirname(require.resolve('highlight.js/package.json'))
-    ],
-    use: [
-      require.resolve('style-loader'),
-      require.resolve('css-loader')
-    ]
+    include: [path.dirname(require.resolve('highlight.js/package.json'))],
+    use: [require.resolve('style-loader'), require.resolve('css-loader')],
   };
 
   const babelLoader = {
@@ -55,35 +50,35 @@ function createConfig() {
     loader: require.resolve('babel-loader'),
     options: {
       configFile: path.join(__dirname, 'babel.config.js'),
-      cacheDirectory: true
-    }
+      cacheDirectory: true,
+    },
   };
 
   const gifLoader = {
     test: /\.gif$/,
     include: componentsPath,
-    loader: require.resolve('url-loader')
+    loader: require.resolve('url-loader'),
   };
 
   const loaders = {
     cssLoader,
     externalCssLoader,
     babelLoader,
-    gifLoader
+    gifLoader,
   };
 
   return {
     // Minimal config for building components
     config: {
       module: {
-        rules: loadersObjectToArray(loaders)
+        rules: loadersObjectToArray(loaders),
       },
       resolve: {
-        extensions: ['.js', '.ts', '.tsx']
-      }
+        extensions: ['.js', '.ts', '.tsx'],
+      },
     },
     componentsPath,
-    loaders
+    loaders,
   };
 }
 
@@ -93,5 +88,5 @@ module.exports = {
   createConfig,
   config,
   componentsPath,
-  loaders
+  loaders,
 };

package/components/badge/badge.css

@@ -1,42 +0,0 @@
-@import "../global/variables.css";
-
-.badge {
-  display: inline-block;
-
-  box-sizing: border-box;
-  height: 20px;
-  padding: 0 var(--ring-unit);
-
-  cursor: default;
-
-  vertical-align: baseline;
-
-  color: var(--ring-secondary-color);
-  border: 1px var(--ring-line-color) solid;
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-content-background-color);
-
-  font-size: var(--ring-font-size-smaller);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 17px;
-
-  &.gray {
-    color: var(--ring-text-color);
-    background-color: var(--ring-tag-background-color);
-  }
-
-  &.valid {
-    color: var(--ring-success-color);
-  }
-
-  &.invalid {
-    color: var(--ring-error-color);
-  }
-
-  &.disabled {
-    /* Deprecated: duplicates invalid */
-
-    color: var(--ring-error-color);
-  }
-}

package/components/badge/badge.d.ts

@@ -1,14 +0,0 @@
-import { PureComponent, HTMLAttributes } from 'react';
-export interface BadgeProps extends HTMLAttributes<HTMLElement> {
-    gray?: boolean | null | undefined;
-    valid?: boolean | null | undefined;
-    invalid?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Badge
- */
-export default class Badge extends PureComponent<BadgeProps> {
-    render(): import("react").JSX.Element;
-}

package/components/badge/badge.js

@@ -1,29 +0,0 @@
-import { PureComponent } from 'react';
-import classNames from 'classnames';
-import deprecate from 'util-deprecate';
-import dataTests from '../global/data-tests';
-import style from './badge.css';
-const warn = deprecate(() => { }, 'Badge is deprecated and will be removed in RingUI 7.0. Use Tag instead.');
-/**
- * @name Badge
- */
-// TODO remove in 7.0
-export default class Badge extends PureComponent {
-    render() {
-        warn();
-        const { 
-        // Modifiers
-        gray, valid, invalid, disabled, 
-        // Props
-        className, children, 'data-test': dataTest, ...props } = this.props;
-        const classes = classNames(style.badge, className, {
-            [style.gray]: gray,
-            [style.valid]: valid,
-            [style.invalid]: invalid,
-            [style.disabled]: disabled
-        });
-        return (<span {...props} data-test={dataTests('ring-badge', dataTest)} className={classes}>
-        {children}
-      </span>);
-    }
-}

package/components/island-legacy/content-legacy.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes, PureComponent } from 'react';
-import './island-legacy.css';
-export default class Content extends PureComponent<HTMLAttributes<HTMLElement>> {
-    render(): import("react").JSX.Element;
-}

package/components/island-legacy/content-legacy.js

@@ -1,12 +0,0 @@
-import { PureComponent } from 'react';
-import classNames from 'classnames';
-import './island-legacy.css';
-export default class Content extends PureComponent {
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames('ring-island__content', className);
-        return (<div {...restProps} className={classes}>
-        {children}
-      </div>);
-    }
-}

package/components/island-legacy/header-legacy.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes, PureComponent } from 'react';
-import './island-legacy.css';
-export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
-    render(): import("react").JSX.Element;
-}

package/components/island-legacy/header-legacy.js

@@ -1,14 +0,0 @@
-import { PureComponent } from 'react';
-import classNames from 'classnames';
-import './island-legacy.css';
-export default class Header extends PureComponent {
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames('ring-island__header', className);
-        return (<div {...restProps} className={classes}>
-        <div className="ring-island__title">
-          {children}
-        </div>
-      </div>);
-    }
-}

package/components/island-legacy/island-legacy.css

@@ -1,98 +0,0 @@
-/**
- * @name Island Legacy
- */
-
-:global(.ring-island) {
-  min-width: calc(var(--ring-unit) * 25 - 2px);
-
-  color: var(--ring-text-color);
-
-  border: 1px solid;
-  border-color: var(--ring-line-color);
-  border-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-content-background-color);
-  box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
-
-  font-family: var(--ring-font-family);
-
-  font-size: var(--ring-font-size);
-}
-
-:global(.ring-island_stack-right) {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  box-shadow: none;
-}
-
-:global(.ring-island_stack-left) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  box-shadow: none;
-}
-
-:global(.ring-island__header) {
-  min-height: calc(var(--ring-unit) * 3 - 2px);
-
-  border-bottom: 1px solid var(--ring-line-color);
-  border-top-left-radius: var(--ring-border-radius);
-  border-top-right-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-content-background-color);
-
-  line-height: calc(var(--ring-unit) * 3 - 2px);
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button) {
-  float: right;
-
-  padding: 0 calc(var(--ring-unit) * 2 - 1px);
-
-  /* -1 to account for border */
-
-  cursor: pointer;
-
-  user-select: none;
-
-  color: var(--ring-secondary-color);
-
-  border-left: 1px solid var(--ring-disabled-color);
-  text-shadow: var(--ring-white-text-color) 0 0 1px;
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:hover) {
-  background:
-    var(--ring-hover-background-color)
-    linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:active) {
-  background: var(--ring-content-background-color) none;
-  box-shadow: 0 0 4px 0 var(--ring-content-background-color) inset;
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:last-child) {
-  border-top-right-radius: 3px;
-}
-
-:global(.ring-island__title) {
-  display: block;
-  float: left;
-
-  padding: 0 calc(var(--ring-unit) * 4);
-
-  font-weight: var(--ring-font-weight-bold);
-}
-
-:global(.ring-island__content) {
-  margin: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
-}

package/components/island-legacy/island-legacy.d.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes, PureComponent } from 'react';
-import './island-legacy.css';
-export default class Island extends PureComponent<HTMLAttributes<HTMLElement>> {
-    render(): import("react").JSX.Element;
-}
-export { default as Header } from './header-legacy';
-export { default as Content } from './content-legacy';

package/components/island-legacy/island-legacy.js

@@ -1,14 +0,0 @@
-import { PureComponent } from 'react';
-import classNames from 'classnames';
-import './island-legacy.css';
-export default class Island extends PureComponent {
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames('ring-island', className);
-        return (<div {...restProps} className={classes}>
-        {children}
-      </div>);
-    }
-}
-export { default as Header } from './header-legacy';
-export { default as Content } from './content-legacy';

package/components/table-legacy/table-legacy.css

@@ -1,346 +0,0 @@
-@import "./table-legacy__toolbar.css";
-
-:global(.ring-table) {
-  width: 100%;
-
-  border-spacing: 0;
-
-  border-collapse: collapse;
-  background-color: transparent;
-
-  font-size: var(--ring-font-size);
-}
-
-:global(.ring-table__header) {
-  display: table-row;
-
-  background-color: var(--ring-sidebar-background-color);
-}
-
-:global(.ring-table__header-checkbox) {
-  position: relative;
-  top: 1px;
-  left: -2px;
-
-  display: inline-block;
-}
-
-:global(.ring-table__title) {
-  position: relative;
-
-  display: table-cell;
-
-  padding: 0 var(--ring-unit);
-
-  text-align: left;
-  white-space: nowrap;
-
-  color: var(--ring-text-color);
-  border-top: 1px solid var(--ring-sidebar-background-color);
-  border-bottom: 1px solid var(--ring-line-color);
-
-  font-size: var(--ring-font-size-smaller);
-  font-weight: normal;
-  line-height: 23px;
-}
-
-:global(.ring-table__title.ring-table__title_active) {
-  font-weight: var(--ring-font-weight-bold);
-}
-
-:global(.ring-table__title:first-child) {
-  padding-left: calc(var(--ring-unit) * 4);
-}
-
-/* Have to emulate right border because of Fx weird bug —
-*  https://jetpass.myjetbrains.com/youtrack/issue/JPS-1634
-*  Removing border-collapse: collapse from .ring-table helps too,
-*  but to implement nested items markup without it is next to impossible.
-**/
-:global(.ring-table__title::after) {
-  position: absolute;
-  top: -1px;
-  right: 0;
-  bottom: 0;
-
-  display: block;
-
-  width: 1px;
-
-  content: normal;
-
-  background-color: var(--ring-sidebar-background-color);
-}
-
-:global(.ring-table__title_border::after) {
-  content: "";
-}
-
-:global(.ring-table__title_nested) {
-  padding-left: calc(var(--ring-unit) * 5);
-}
-
-/* fix header checkbox position in nested table */
-:global(.ring-table__title_nested.ring-table__header-checkbox) {
-  left: -26px;
-}
-
-:global(.ring-table__toggle) {
-  position: relative;
-  top: 9px;
-
-  display: inline-block;
-
-  width: 12px;
-  height: 9px;
-
-  margin-left: calc(var(--ring-unit) * 2);
-  padding-bottom: 21px;
-
-  cursor: pointer;
-
-  color: var(--ring-line-color);
-
-  font-size: 14px;
-}
-
-:global(.ring-table__toggle:hover) {
-  color: var(--ring-text-color);
-}
-
-:global(.ring-table__toggle-icon) {
-  float: right;
-}
-
-:global(.ring-table__toggle-icon:hover) {
-  color: var(--ring-link-hover-color);
-}
-
-:global(.ring-table__column-inline-avatar) {
-  display: inline-block;
-
-  vertical-align: middle;
-}
-
-:global(.ring-table__column-inline-avatar-img) {
-  margin: -6px 8px;
-}
-
-:global(.ring-table__column_selector) {
-  min-width: calc(3 * var(--ring-unit));
-  padding: 0 !important;
-
-  text-align: center;
-}
-
-:global(.ring-table__selector) {
-  display: inline-block;
-
-  margin: 0 0 0 calc(var(--ring-unit) / 2);
-}
-
-:global(.ring-table__column) {
-  display: table-cell;
-
-  padding: calc(var(--ring-unit) - 2px) var(--ring-unit);
-
-  vertical-align: middle;
-  white-space: nowrap;
-
-  border-collapse: collapse;
-  border-width: 1px;
-  border-color: var(--ring-line-color);
-  border-top-style: solid;
-  border-bottom-style: solid;
-}
-
-/* Avoid vertical gaps in the middle of the table */
-:global(.ring-table__column:last-child) {
-  width: 100%;
-}
-
-:global(.ring-table__column:first-child) {
-  padding-left: calc(4 * var(--ring-unit));
-}
-
-:global(.ring-table__column.ring-table__column_gap) {
-  border-bottom-color: transparent !important;
-  background-color: var(--ring-line-color);
-}
-
-/* Combined class is required here for specificity */
-:global(.ring-table__column.ring-table__column_toggle) {
-  width: calc(var(--ring-unit) * 2);
-  padding: 0;
-
-  text-align: right;
-
-  vertical-align: top;
-}
-
-:global(.ring-table__column_right) {
-  text-align: right;
-}
-
-:global(.ring-table__column_gray) {
-  color: var(--ring-secondary-color);
-}
-
-:global(.ring-table__column_snuggle-right) {
-  padding-right: 0;
-}
-
-:global(.ring-table__column_snuggle-left) {
-  padding-left: 0;
-}
-
-:global(.ring-table__column_align-right) {
-  text-align: right;
-}
-
-:global(.ring-table__column_gap) {
-  padding-left: calc(var(--ring-unit) * 2) !important;
-}
-
-:global(.ring-table__column-title) {
-  font-weight: var(--ring-font-weight-bold);
-}
-
-:global(.ring-table__column_wide) {
-  min-width: calc(10 * var(--ring-unit));
-}
-
-:global(.ring-table__column_limited) {
-  overflow: hidden;
-
-  max-width: calc(50 * var(--ring-unit));
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-:global(.ring-table__column_unlimited) {
-  overflow: hidden;
-
-  width: 100%;
-  max-width: 1px;
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-:global(.ring-table__column_narrow) {
-  min-width: calc(3 * var(--ring-unit));
-  padding: 0 !important;
-}
-
-:global(.ring-table__column-list:not(:last-child)::after) {
-  content: ", ";
-}
-
-:global(.ring-table__row) {
-  display: table-row;
-
-  width: 100%;
-  height: calc(5 * var(--ring-unit));
-}
-
-:global(.ring-table__row .ring-table__row_ghost) {
-  background-color: var(--ring-content-background-color);
-}
-
-:global(.ring-table__row .ring-table__row_implicit) {
-  opacity: 0.5;
-}
-
-:global(.ring-table__row:hover) {
-  background-color: var(--ring-sidebar-background-color);
-}
-
-:global(.ring-table__row:hover .ring-table__column_gap) {
-  background-color: var(--ring-line-color);
-}
-
-:global(.ring-table__row .ring-table__row_unselectable:hover) {
-  background-color: initial;
-}
-
-:global(.ring-table__row .ring-table__row_checked) {
-  background-color: var(--ring-selected-background-color);
-}
-
-:global(.ring-table__row .ring-table__row_active-checked) {
-  background-color: var(--ring-selected-background-color);
-}
-
-:global(.ring-table__row .ring-table__row_active.ring-table__column) {
-  border-color: var(--ring-main-color);
-  border-top-style: double; /* Using double to override border-top-color because of border collapsed */
-}
-
-:global(.ring-table__row .ring-table__row_active.ring-table__column_gap) {
-  border-color: var(--ring-line-color);
-  border-top-style: none;
-}
-
-:global(.ring-table__row .ring-table__row_active.sidebar__btn) {
-  visibility: visible;
-}
-
-:global(.ring-table__group) {
-  display: table-row-group;
-}
-
-:global(.ring-table__description) {
-  margin-left: var(--ring-unit);
-
-  color: var(--ring-secondary-color);
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-:global(.ring-table__avatar) {
-  width: calc(3 * var(--ring-unit));
-  height: calc(3 * var(--ring-unit) + 3px); /* If avatar is missing */
-}
-
-:global(.ring-table__avatar-img) {
-  width: calc(3 * var(--ring-unit));
-  height: calc(3 * var(--ring-unit));
-}
-
-:global(.ring-table__header_sticky) {
-  position: fixed;
-
-  /* Set z-index to avoid overlaying icons in rows and fixed header */
-
-  z-index: var(--ring-fixed-z-index);
-  top: 0;
-
-  display: none;
-
-  width: auto;
-}
-
-:global(.table__pager) {
-  padding: calc(4 * var(--ring-unit));
-}
-
-:global(.table__pager-links) {
-  margin-bottom: calc(2 * var(--ring-unit));
-}
-
-:global(.table__pager-link) {
-  display: inline-block;
-
-  margin-right: calc(4 * var(--ring-unit));
-}
-
-:global(.table__pager-link_disabled) {
-  color: var(--ring-secondary-color);
-}
-
-:global(.table__pager-select) {
-  display: inline-block;
-  float: right;
-}