@gooddata/sdk-ui-kit 10.34.0-alpha.16 → 10.34.0-alpha.18

package/src/@ui/UiIconButton/UiIconButton.scss

@@ -55,6 +55,22 @@
                 width: var(--gd-button-L);
             }
         }
+
+        &-xlarge {
+            height: var(--gd-button-XL);
+
+            &#{$root}--type-button {
+                width: var(--gd-button-XL);
+            }
+        }
+
+        &-xxlarge {
+            height: var(--gd-button-XXL);
+
+            &#{$root}--type-button {
+                width: var(--gd-button-XXL);
+            }
+        }
     }
 
     /**
@@ -155,6 +171,27 @@
             }
         }
 
+        &-table {
+            --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            background-color: inherit;
+            border: none;
+            border-radius: 0;
+            transition: inherit;
+
+            &:disabled {
+                --gd-icon-fill-color: var(--gd-palette-complementary-5);
+            }
+
+            &#{$root}--active,
+            &:hover {
+                background-color: var(--gd-palette-complementary-3);
+            }
+
+            &#{$root}--active {
+                --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            }
+        }
+
         &-danger {
             --gd-icon-fill-color: var(--gd-palette-complementary-0);
             background-color: var(--gd-palette-error-base);

package/src/@ui/UiPagedVirtualList/UiPagedVirtualList.scss

@@ -39,6 +39,23 @@
             background-color: var(--gd-palette-complementary-2);
             border-radius: 3px;
         }
+
+        &--hover {
+            &::-webkit-scrollbar {
+                width: 10px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                border-radius: 5px;
+                background-clip: padding-box;
+
+                &:hover {
+                    border: 0;
+                    background-color: var(--gd-palette-complementary-5);
+                }
+            }
+        }
     }
 
     &__item {

package/src/@ui/UiSkeleton/UiSkeleton.scss

@@ -1,4 +1,4 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 @use "react-loading-skeleton/dist/skeleton.css";
 
 .gd-ui-kit-skeleton {
@@ -24,6 +24,7 @@
         border-radius: 3px;
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
     }
 
     .react-loading-skeleton {

package/src/@ui/defaultTheme.scss

@@ -217,7 +217,10 @@
     --gd-spacing-3px: 3px;
     --gd-spacing-14px: 14px;
     --gd-spacing-16px: 16px;
+    --gd-spacing-34px: 34px;
     --gd-transition-all: all 0.25s ease-in-out;
+    --gd-button-XXL: 55px;
+    --gd-button-XL: 45px;
     --gd-button-L: 38px;
     --gd-button-M: 32px;
     --gd-button-S: 27px;
@@ -225,4 +228,18 @@
     --gd-tabs-height-L: 56px;
     --gd-tabs-height-M: 27px;
     --gd-tabs-height-S: 23px;
+    --gd-table-font-size: 14px;
+    --gd-table-row-height-normal: 45px;
+    --gd-table-row-height-large: 55px;
+    --gd-table-row-height-small: 27px;
+    --gd-table-row-line-height: 27px;
+    --gd-table-label-font-size: 11px;
+    --gd-table-counter-font-size: 12px;
+    --gd-table-dropdown-item-font-size: 12px;
+    --gd-table-multi-line-font-size: 12px;
+    --gd-table-multi-line-line-height: 17px;
+    --gd-table-multi-line-font-size-large: 14px;
+    --gd-table-multi-line-line-height-large: 23px;
+    --gd-table-dropdown-item-height: 28px;
+    --gd-table-title-font-size: 24px;
 }

package/src/@ui/index.scss

@@ -12,3 +12,5 @@
 @use "./UiTooltip/UiTooltip.scss";
 @use "./UiLink/UiLink.scss";
 @use "./UiNavigationBypass/UiNavigationBypass.scss";
+@use "./UiBadge/UiBadge.scss";
+@use "./UiCheckbox/UiCheckbox.scss";

package/styles/css/asyncTable.css

@@ -0,0 +1,205 @@
+/* allow vendor prefixes and disable max length */
+/* allow vendor prefixes and disable max length */
+.gd-ui-kit-async-table {
+  font-family: var(--gd-font-family);
+  font-size: var(--gd-table-font-size);
+  font-style: normal;
+  line-height: var(--gd-table-row-line-height);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-async-table__row {
+  display: flex;
+  height: var(--gd-table-row-height-normal);
+}
+.gd-ui-kit-async-table__row--large {
+  height: var(--gd-table-row-height-large);
+}
+.gd-ui-kit-async-table__row:hover .gd-ui-kit-async-table__cell {
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-async-table__header {
+  display: flex;
+  height: var(--gd-table-row-height-normal);
+  line-height: var(--gd-table-row-line-height);
+  color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-async-table__header--small {
+  height: var(--gd-table-row-height-small);
+}
+.gd-ui-kit-async-table__header:focus-visible {
+  outline: none;
+}
+.gd-ui-kit-async-table__header:focus-visible .gd-ui-kit-async-table__cell--isFocused {
+  transition: outline 0s ease-in-out;
+  outline-offset: -2px;
+  outline: auto 5px Highlight; /* For Firefox */
+  outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell {
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell--sortable {
+  cursor: pointer;
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell--sorted .gd-ui-kit-async-table__sort, .gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell:hover .gd-ui-kit-async-table__sort {
+  display: flex;
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell--sorted:hover .gd-ui-kit-async-table__sort svg {
+  fill: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell--desc svg {
+  transform: rotate(0deg);
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell:hover {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-async-table__header .gd-ui-kit-async-table__cell .gd-ui-kit-checkbox {
+  visibility: hidden;
+}
+.gd-ui-kit-async-table__cell {
+  padding: 0 var(--gd-spacing-10px);
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-async-table__cell > * {
+  flex: 0 0 auto;
+}
+.gd-ui-kit-async-table__cell--bold {
+  font-weight: 700;
+}
+.gd-ui-kit-async-table__cell--checkbox {
+  width: var(--gd-spacing-34px);
+  justify-content: center;
+  cursor: pointer;
+}
+.gd-ui-kit-async-table__text {
+  flex: 0 1 auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.gd-ui-kit-async-table__text--multi-line {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--gd-table-multi-line-font-size);
+  line-height: var(--gd-table-multi-line-line-height);
+}
+.gd-ui-kit-async-table__text--multi-line > span:first-child {
+  font-size: var(--gd-table-multi-line-font-size-large);
+  line-height: var(--gd-table-multi-line-line-height-large);
+  font-weight: 700;
+}
+.gd-ui-kit-async-table__role-icon, .gd-ui-kit-async-table__prefix-icon, .gd-ui-kit-async-table__suffix-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gd-ui-kit-async-table__role-icon {
+  margin-right: var(--gd-spacing-10px);
+}
+.gd-ui-kit-async-table__prefix-icon {
+  margin-right: var(--gd-spacing-5px);
+}
+.gd-ui-kit-async-table__suffix-icon {
+  margin-left: var(--gd-spacing-5px);
+}
+.gd-ui-kit-async-table__sort {
+  padding: 0 var(--gd-spacing-5px);
+  display: none;
+}
+.gd-ui-kit-async-table__sort svg {
+  transform: rotate(180deg);
+}
+.gd-ui-kit-async-table__badge {
+  margin-left: var(--gd-spacing-5px);
+}
+.gd-ui-kit-async-table__toolbar {
+  padding: 0;
+  height: var(--gd-table-row-height-small);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: var(--gd-spacing-10px);
+  margin-bottom: var(--gd-spacing-20px);
+}
+.gd-ui-kit-async-table__toolbar .gd-ui-kit-async-table__cell {
+  visibility: hidden;
+  border-bottom: none;
+}
+.gd-ui-kit-async-table__toolbar--checkbox .gd-ui-kit-async-table__cell {
+  visibility: visible;
+  height: 100%;
+  border: 1px solid var(--gd-palette-complementary-3);
+  border-radius: 3px;
+}
+.gd-ui-kit-async-table__toolbar-label {
+  font-size: var(--gd-table-label-font-size);
+  font-weight: 700;
+  line-height: var(--gd-table-row-line-height);
+  text-transform: uppercase;
+  color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-async-table__toolbar-selected-count {
+  color: var(--gd-palette-complementary-7);
+  font-size: var(--gd-table-counter-font-size);
+  padding-right: var(--gd-spacing-20px);
+}
+.gd-ui-kit-async-table__dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--gd-spacing-10px);
+  font-size: var(--gd-table-dropdown-item-font-size);
+  cursor: pointer;
+  height: var(--gd-table-dropdown-item-height);
+}
+.gd-ui-kit-async-table__dropdown-item:hover {
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-async-table__dropdown-item--selected {
+  color: var(--gd-palette-primary-base);
+  font-weight: 700;
+}
+.gd-ui-kit-async-table__title {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  margin-bottom: var(--gd-spacing-20px);
+}
+.gd-ui-kit-async-table__title-text, .gd-ui-kit-async-table__title-icon, .gd-ui-kit-async-table__title-search, .gd-ui-kit-async-table__title-actions {
+  display: flex;
+  flex: none;
+}
+.gd-ui-kit-async-table__title-actions {
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-async-table__title-text {
+  font-size: var(--gd-table-title-font-size);
+}
+.gd-ui-kit-async-table__title-divider {
+  margin: 0 var(--gd-spacing-10px);
+  flex: 1 1 auto;
+}
+.gd-ui-kit-async-table__empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+.gd-ui-kit-async-table__empty-state-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-5);
+  padding: var(--gd-spacing-10px) 0;
+}
+.gd-ui-kit-async-table__empty-state-description {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-5);
+  line-height: 20px;
+}
+
+/*# sourceMappingURL=asyncTable.css.map */

package/styles/css/asyncTable.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/mixins.scss","../scss/asyncTable.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACnLA;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGA;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;EDsMZ;EACA;EACA;;ACnMI;EACI;;AAEA;EACI;;AAKA;EACI;;AAKJ;EACI;;AAKJ;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAKZ;EAGI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIA;EACI;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EAII;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA","file":"asyncTable.css"}