@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/table/table.stories.json

@@ -0,0 +1,45 @@
+[
+  {"id": 1, "country": "Russia", "city": "Moscow", "url": "https://en.wikipedia.org/wiki/Russia", "children": [
+    {"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
+    {"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
+  ]},
+  {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
+  {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
+  {"id": 4, "country": "USA", "city": "NYC", "url": "https://en.wikipedia.org/wiki/USA", "children": [
+    {"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
+    {"id": 42, "country": "New York", "city": "NYC", "url": "https://en.wikipedia.org/wiki/New York", "children": [
+      {"id": 421, "country": "NYC", "city": "NYC", "url": "https://en.wikipedia.org/wiki/NYC", "children": [
+        {"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
+        {"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
+        {"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
+      ]}
+    ]},
+    {"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
+  ]},
+  {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
+  {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
+  {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
+  {"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"},
+  {"id": 9, "country": "Brazil", "city": "Rio", "url": "https://en.wikipedia.org/wiki/Brazil"},
+  {"id": 11, "country": "China", "city": "Beijing", "url": "https://en.wikipedia.org/wiki/China"},
+  {"id": 12, "country": "Germany", "city": "Berlin", "url": "https://en.wikipedia.org/wiki/Germany"},
+  {"id": 13, "country": "Luxembourg", "city": "Luxembourg", "url": "https://en.wikipedia.org/wiki/Luxembourg"},
+  {"id": 14, "country": "Belgium", "city": "Brussels", "url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"},
+  {"id": 15, "country": "Italy", "city": "Rome", "url": "https://en.wikipedia.org/wiki/Italy"},
+  {"id": 16, "country": "Spain", "city": "Madrid", "url": "https://en.wikipedia.org/wiki/Spain"},
+  {"id": 17, "country": "Portugal", "city": "Lisbon", "url": "https://en.wikipedia.org/wiki/Portugal"},
+  {"id": 18, "country": "Greece", "city": "Athens", "url": "https://en.wikipedia.org/wiki/Greece"},
+  {"id": 19, "country": "Israel", "city": "Tel Aviv", "url": "https://en.wikipedia.org/wiki/Israel"},
+  {"id": 20, "country": "Poland", "city": "Warsaw", "url": "https://en.wikipedia.org/wiki/Poland"},
+  {"id": 21, "country": "Bulgaria", "city": "Sofia", "url": "https://en.wikipedia.org/wiki/Bulgaria"},
+  {"id": 22, "country": "Japan", "city": "Tokio", "url": "https://en.wikipedia.org/wiki/Japan"},
+  {"id": 23, "country": "Thailand", "city": "Bangkok", "url": "https://en.wikipedia.org/wiki/Thailand"},
+  {"id": 24, "country": "Vietnam", "city": "Hanoi", "url": "https://en.wikipedia.org/wiki/Vietnam"},
+  {"id": 25, "country": "Iraq", "city": "Baghdad", "url": "https://en.wikipedia.org/wiki/Iraq"},
+  {"id": 26, "country": "Iran", "city": "Tehran", "url": "https://en.wikipedia.org/wiki/Iran"},
+  {"id": 27, "country": "Syria", "city": "Damask", "url": "https://en.wikipedia.org/wiki/Syria"},
+  {"id": 28, "country": "Turkey", "city": "Ankara", "url": "https://en.wikipedia.org/wiki/Turkey"},
+  {"id": 29, "country": "Australia", "city": "Sydney", "url": "https://en.wikipedia.org/wiki/Australia"},
+  {"id": 30, "country": "UK", "city": "London", "url": "https://en.wikipedia.org/wiki/UK"},
+  {"id": 31, "country": "India", "city": "Deli", "url": "https://en.wikipedia.org/wiki/India"}
+]

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

@@ -0,0 +1,348 @@
+@import "./table-legacy__toolbar.css";
+
+@value unit from "../global/global.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 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: bold;
+}
+
+:global(.ring-table__title:first-child) {
+  padding-left: calc(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(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(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 * unit);
+  padding: 0 !important;
+
+  text-align: center;
+}
+
+:global(.ring-table__selector) {
+  display: inline-block;
+
+  margin: 0 0 0 calc(unit / 2);
+}
+
+:global(.ring-table__column) {
+  display: table-cell;
+
+  padding: calc(unit - 2px) 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 * 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(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(unit * 2) !important;
+}
+
+:global(.ring-table__column-title) {
+  font-weight: bold;
+}
+
+:global(.ring-table__column_wide) {
+  min-width: calc(10 * unit);
+}
+
+:global(.ring-table__column_limited) {
+  overflow: hidden;
+
+  max-width: calc(50 * 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 * 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 * 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: unit;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+:global(.ring-table__avatar) {
+  width: calc(3 * unit);
+  height: calc(3 * unit + 3px); /* If avatar is missing */
+}
+
+:global(.ring-table__avatar-img) {
+  width: calc(3 * unit);
+  height: calc(3 * 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 * unit) calc(4 * unit);
+}
+
+:global(.table__pager-links) {
+  margin-bottom: calc(2 * unit);
+}
+
+:global(.table__pager-link) {
+  display: inline-block;
+
+  margin-right: calc(4 * unit);
+}
+
+:global(.table__pager-link_disabled) {
+  color: var(--ring-secondary-color);
+}
+
+:global(.table__pager-select) {
+  display: inline-block;
+  float: right;
+}

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

@@ -0,0 +1,27 @@
+@value unit from "../global/global.css";
+
+:global(.ring-table__toolbar) {
+  background: inherit;
+}
+
+:global(.ring-table__toolbar-controls) {
+  position: relative;
+
+  display: block;
+
+  min-height: calc(unit * 3);
+
+  padding: calc(unit * 2) calc(unit * 4);
+
+  white-space: initial;
+
+  background: inherit;
+
+  &:global(.ring-table__toolbar-controls_fixed) {
+    position: fixed;
+    z-index: calc(var(--ring-fixed-z-index) + 1);
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+}