@gooddata/sdk-ui-kit 11.12.0-alpha.1 → 11.12.0-alpha.3

package/src/@ui/UiAsyncTable/asyncTable.scss

@@ -65,6 +65,7 @@
 
             &--sorted:hover {
                 color: var(--gd-palette-complementary-8);
+
                 #{$root}__sort svg {
                     fill: var(--gd-palette-complementary-8);
                 }
@@ -191,39 +192,31 @@
     }
 
     &__toolbar {
-        padding: 0;
-        min-height: var(--gd-table-row-height-small);
+        width: calc(100% - var(--gd-spacing-10px));
+        margin-right: var(--gd-spacing-10px);
+        margin-bottom: var(--gd-spacing-20px);
+    }
+
+    &__toolbar-top {
         display: flex;
         align-items: flex-start;
         justify-content: start;
         gap: var(--gd-spacing-10px);
         margin-bottom: var(--gd-spacing-20px);
-        margin-right: var(--gd-spacing-10px);
-        width: calc(100% - var(--gd-spacing-10px));
-
-        #{$root}__cell {
-            visibility: visible;
-            border: 1px solid var(--gd-palette-complementary-3);
-            border-radius: 3px;
-            height: 27px;
-        }
 
         &--mobile-view {
             flex-direction: column-reverse;
             align-items: stretch;
             width: 100%;
-            padding-right: var(--gd-spacing-10px);
             row-gap: var(--gd-spacing-20px);
-            margin-bottom: var(--gd-spacing-10px);
 
-            #{$root}__toolbar-bulk-actions {
-                width: 100%;
-                justify-content: space-between;
+            #{$root}__toolbar-search-section {
+                margin-left: 0;
+                max-width: 100%;
             }
 
             #{$root}__toolbar-search {
-                margin-left: 0;
-                max-width: 100%;
+                flex-grow: 1;
             }
 
             #{$root}__toolbar-filters-section {
@@ -239,10 +232,25 @@
         gap: var(--gd-spacing-10px);
     }
 
+    &__toolbar-bulk-actions {
+        &--mobile-view {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        #{$root}__cell {
+            visibility: visible;
+            border: 1px solid var(--gd-palette-complementary-3);
+            border-radius: 3px;
+            height: 27px;
+        }
+    }
+
     &__toolbar-filters-section {
         display: flex;
         align-items: flex-start;
         gap: var(--gd-spacing-10px);
+        margin-top: 1px;
     }
 
     &__toolbar-label {
@@ -271,15 +279,14 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-
-        &:not(&--short) {
-            min-width: 110px;
-        }
+        min-width: 110px;
     }
 
-    &__toolbar-search {
+    &__toolbar-search-section {
+        display: flex;
+        gap: var(--gd-spacing-10px);
         margin-left: auto;
-        max-width: 200px;
+        max-width: 260px;
     }
 
     &__toolbar-custom-element {
@@ -416,6 +423,7 @@
         #{$root}__row--focused,
         #{$root}__cell--focused {
             @include mixins.focus-ring;
+
             @supports (-webkit-hyphens: none) {
                 outline-offset: -5px;
             }

package/src/@ui/UiButton/UiButton.scss

@@ -95,6 +95,7 @@
                 }
 
                 &:active,
+                &[aria-expanded="true"],
                 &#{$root}--isSelected {
                     background-color: var(--gd-palette-primary-base-d12);
                     box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
@@ -129,6 +130,7 @@
                 }
 
                 &:active,
+                &[aria-expanded="true"],
                 &#{$root}--isSelected {
                     --gd-icon-fill-color: var(--gd-palette-primary-base);
 
@@ -159,6 +161,7 @@
                 &:hover,
                 &:focus-visible,
                 &:active,
+                &[aria-expanded="true"],
                 &#{$root}--isSelected {
                     --gd-icon-fill-color: var(--gd-palette-primary-base);
 

package/src/@ui/UiMenu/UiMenu.scss

@@ -8,12 +8,27 @@
 
     max-height: 300px;
     width: 100%;
-    min-width: 200px;
     position: relative;
     display: flex;
     flex-direction: column;
     user-select: none;
 
+    &--size {
+        &-small {
+            --item-padding-vertical: 4px;
+            --item-padding-horizontal: 10px;
+            --item-font-size: 12px;
+            --item-height: 26px;
+        }
+
+        &-medium {
+            --item-padding-vertical: 8px;
+            --item-padding-horizontal: 10px;
+            --item-font-size: 14px;
+            --item-height: 36px;
+        }
+    }
+
     &__content-container {
         display: contents;
     }
@@ -25,12 +40,20 @@
         overflow-x: hidden;
 
         &--container-bottom-padding-small {
-            padding-bottom: 8px;
+            padding-bottom: 6px;
         }
 
         &--container-bottom-padding-medium {
             padding-bottom: 10px;
         }
+
+        &--container-top-padding-small {
+            padding-top: 6px;
+        }
+
+        &--container-top-padding-medium {
+            padding-top: 10px;
+        }
     }
 
     @media #{variables.$small-only} {
@@ -42,20 +65,20 @@
     }
 
     &__menu-header {
-        background: variables.$is-focused-background;
+        background: var(--gd-palette-complementary-2);
 
         &-button {
             cursor: pointer;
             background: none;
             border: none;
             padding: 0;
-            color: variables.$gd-color-state-blank;
+            color: var(--gd-palette-complementary-6);
         }
 
         &-title {
             &-text {
                 flex-grow: 1;
-                color: variables.$gd-color-state-blank;
+                color: var(--gd-palette-complementary-6);
                 margin: 0;
                 white-space: nowrap;
                 font-size: 11px;
@@ -84,7 +107,7 @@
 
     &__group-title {
         text-transform: uppercase;
-        color: variables.$gd-color-text-dimmed;
+        color: var(--gd-palette-complementary-5);
         font-size: 10px;
         font-weight: normal;
         margin: 0;
@@ -113,21 +136,22 @@
     }
 
     &__item {
-        padding: 8px 10px;
+        height: var(--item-height);
+        padding: var(--item-padding-vertical) var(--item-padding-horizontal);
         cursor: pointer;
         display: flex;
         align-items: center;
-        font-size: 14px;
+        font-size: var(--item-font-size);
         line-height: 20px;
-        color: variables.$gd-color-text;
+        color: var(--gd-palette-complementary-8);
         transition: background-color 0.2s;
         box-sizing: border-box;
         gap: 10px;
 
         // Controlled by mouse and has hover
         #{$root}--controlType-mouse &:hover:not(&--isDisabled) {
-            background-color: variables.$is-focused-background;
-            color: variables.$is-focused-color;
+            background-color: var(--gd-palette-complementary-2);
+            color: var(--gd-palette-complementary-9);
         }
         #{$root}--controlType-mouse &:hover:not(&--isDisabled)#{$root}__item--isDestructive {
             background-color: var(--gd-palette-error-dimmed);
@@ -139,31 +163,19 @@
         }
 
         &--isDisabled {
-            color: variables.$gd-color-disabled;
+            color: var(--gd-palette-complementary-5);
             cursor: not-allowed;
         }
 
         &--isSelected {
             font-weight: bold;
-            background-color: variables.$is-selected-background;
-            color: variables.$is-selected-color;
+            background: none;
+            color: var(--gd-palette-primary-base);
         }
 
         #{$root}--controlType-mouse &--isSelected:hover:not(&--isDisabled) {
-            background-color: variables.$is-selected-focused-background;
-            color: variables.$is-selected-color;
-        }
-
-        &--size {
-            &-small {
-                height: 28px;
-                font-size: 12px;
-            }
-
-            &-medium {
-                height: 36px;
-                font-size: 14px;
-            }
+            background-color: var(--gd-palette-primary-dimmed);
+            color: var(--gd-palette-primary-base);
         }
     }
 

package/src/@ui/UiTabs/UiTabs.scss

@@ -48,7 +48,10 @@
         display: flex;
         align-self: stretch;
         flex-shrink: 0;
-        margin-right: calc(-1 * var(--gd-spacing-5px));
+
+        &--mobile {
+            margin-right: calc(-1 * var(--gd-spacing-5px));
+        }
 
         &::after {
             position: absolute;
@@ -76,7 +79,7 @@
     &__dropdown .gd-ui-kit-icon-button {
         height: 100%;
         width: 100%;
-        color: var(--gd-palette-complementary-7);
+        color: var(--gd-palette-complementary-6);
     }
 
     &__dropdown .gd-ui-kit-button {
@@ -149,6 +152,7 @@
         cursor: pointer;
         align-items: center;
         transition: background-color 0.2s;
+        font-size: 12px;
 
         &:hover {
             background-color: var(--gd-palette-complementary-2);
@@ -196,7 +200,12 @@
     &__tab-list-item-value {
         padding: var(--gd-spacing-10px) var(--gd-spacing-10px);
         flex-grow: 1;
-        flex-shrink: 0;
+        flex-shrink: 1;
+        overflow: hidden;
+    }
+
+    &__tab-list-item-value-button {
+        white-space: nowrap;
     }
 
     &__tab-list-item-actions {
@@ -211,13 +220,14 @@
     }
 
     &__tab-list {
-        width: 250px;
+        max-width: 250px;
         max-height: 400px;
         overflow-y: auto;
         overflow-x: hidden;
+        padding: 6px 0;
 
         &--mobile {
-            width: unset;
+            max-width: unset;
             height: unset;
         }
     }

package/styles/css/main.css

@@ -386,7 +386,7 @@
   background-color: var(--gd-palette-primary-base-d06);
   box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
-.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):active, .gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled).gd-ui-kit-button--isSelected {
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):active, .gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled)[aria-expanded=true], .gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled).gd-ui-kit-button--isSelected {
   background-color: var(--gd-palette-primary-base-d12);
   box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85) inset;
 }
@@ -409,7 +409,7 @@
   background-color: var(--gd-palette-complementary-1);
   box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40) inset;
 }
-.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):active, .gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled).gd-ui-kit-button--isSelected {
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):active, .gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled)[aria-expanded=true], .gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled).gd-ui-kit-button--isSelected {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
   border-color: var(--gd-palette-complementary-5);
@@ -429,7 +429,7 @@
   background-color: transparent;
   border-color: transparent;
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus-visible, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled).gd-ui-kit-button--isSelected {
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus-visible, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active, .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled)[aria-expanded=true], .gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled).gd-ui-kit-button--isSelected {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
 }
@@ -1356,12 +1356,23 @@
 .gd-ui-kit-menu {
   max-height: 300px;
   width: 100%;
-  min-width: 200px;
   position: relative;
   display: flex;
   flex-direction: column;
   user-select: none;
 }
+.gd-ui-kit-menu--size-small {
+  --item-padding-vertical: 4px;
+  --item-padding-horizontal: 10px;
+  --item-font-size: 12px;
+  --item-height: 26px;
+}
+.gd-ui-kit-menu--size-medium {
+  --item-padding-vertical: 8px;
+  --item-padding-horizontal: 10px;
+  --item-font-size: 14px;
+  --item-height: 36px;
+}
 .gd-ui-kit-menu__content-container {
   display: contents;
 }
@@ -1372,11 +1383,17 @@
   overflow-x: hidden;
 }
 .gd-ui-kit-menu__items-container--container-bottom-padding-small {
-  padding-bottom: 8px;
+  padding-bottom: 6px;
 }
 .gd-ui-kit-menu__items-container--container-bottom-padding-medium {
   padding-bottom: 10px;
 }
+.gd-ui-kit-menu__items-container--container-top-padding-small {
+  padding-top: 6px;
+}
+.gd-ui-kit-menu__items-container--container-top-padding-medium {
+  padding-top: 10px;
+}
 @media only screen and (max-width: 640px) {
   .gd-ui-kit-menu {
     /* stylelint-disable-next-line declaration-no-important */
@@ -1386,18 +1403,18 @@
   }
 }
 .gd-ui-kit-menu__menu-header {
-  background: var(--gd-palette-complementary-2, #ebeff4);
+  background: var(--gd-palette-complementary-2);
 }
 .gd-ui-kit-menu__menu-header-button {
   cursor: pointer;
   background: none;
   border: none;
   padding: 0;
-  color: var(--gd-palette-complementary-6, #94a1ad);
+  color: var(--gd-palette-complementary-6);
 }
 .gd-ui-kit-menu__menu-header-title-text {
   flex-grow: 1;
-  color: var(--gd-palette-complementary-6, #94a1ad);
+  color: var(--gd-palette-complementary-6);
   margin: 0;
   white-space: nowrap;
   font-size: 11px;
@@ -1420,7 +1437,7 @@
 }
 .gd-ui-kit-menu__group-title {
   text-transform: uppercase;
-  color: var(--gd-palette-complementary-5, #b0beca);
+  color: var(--gd-palette-complementary-5);
   font-size: 10px;
   font-weight: normal;
   margin: 0;
@@ -1445,20 +1462,21 @@
   width: 100%;
 }
 .gd-ui-kit-menu__item {
-  padding: 8px 10px;
+  height: var(--item-height);
+  padding: var(--item-padding-vertical) var(--item-padding-horizontal);
   cursor: pointer;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--item-font-size);
   line-height: 20px;
-  color: var(--gd-palette-complementary-8, #464e56);
+  color: var(--gd-palette-complementary-8);
   transition: background-color 0.2s;
   box-sizing: border-box;
   gap: 10px;
 }
 .gd-ui-kit-menu--controlType-mouse .gd-ui-kit-menu__item:hover:not(.gd-ui-kit-menu__item--isDisabled) {
-  background-color: var(--gd-palette-complementary-2, #ebeff4);
-  color: var(--gd-palette-complementary-9, #000);
+  background-color: var(--gd-palette-complementary-2);
+  color: var(--gd-palette-complementary-9);
 }
 .gd-ui-kit-menu--controlType-mouse .gd-ui-kit-menu__item:hover:not(.gd-ui-kit-menu__item--isDisabled).gd-ui-kit-menu__item--isDestructive {
   background-color: var(--gd-palette-error-dimmed);
@@ -1468,25 +1486,17 @@
   fill: var(--gd-palette-error-base);
 }
 .gd-ui-kit-menu__item--isDisabled {
-  color: var(--gd-palette-complementary-5, #b0beca);
+  color: var(--gd-palette-complementary-5);
   cursor: not-allowed;
 }
 .gd-ui-kit-menu__item--isSelected {
   font-weight: bold;
-  background-color: none;
-  color: var(--gd-palette-primary-base, #14b2e2);
+  background: none;
+  color: var(--gd-palette-primary-base);
 }
 .gd-ui-kit-menu--controlType-mouse .gd-ui-kit-menu__item--isSelected:hover:not(.gd-ui-kit-menu__item--isDisabled) {
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-  color: var(--gd-palette-primary-base, #14b2e2);
-}
-.gd-ui-kit-menu__item--size-small {
-  height: 28px;
-  font-size: 12px;
-}
-.gd-ui-kit-menu__item--size-medium {
-  height: 36px;
-  font-size: 14px;
+  background-color: var(--gd-palette-primary-dimmed);
+  color: var(--gd-palette-primary-base);
 }
 .gd-ui-kit-menu__item-title {
   width: 100%;
@@ -1530,6 +1540,8 @@
   display: flex;
   align-self: stretch;
   flex-shrink: 0;
+}
+.gd-ui-kit-tabs__dropdown-wrapper--mobile {
   margin-right: calc(-1 * var(--gd-spacing-5px));
 }
 .gd-ui-kit-tabs__dropdown-wrapper::after {
@@ -1553,7 +1565,7 @@
 .gd-ui-kit-tabs__dropdown .gd-ui-kit-button, .gd-ui-kit-tabs__dropdown .gd-ui-kit-icon-button {
   height: 100%;
   width: 100%;
-  color: var(--gd-palette-complementary-7);
+  color: var(--gd-palette-complementary-6);
 }
 .gd-ui-kit-tabs__dropdown .gd-ui-kit-button {
   padding-left: var(--gd-spacing-10px);
@@ -1616,6 +1628,7 @@
   cursor: pointer;
   align-items: center;
   transition: background-color 0.2s;
+  font-size: 12px;
 }
 .gd-ui-kit-tabs__tab-list-item:hover {
   background-color: var(--gd-palette-complementary-2);
@@ -1647,7 +1660,11 @@
 .gd-ui-kit-tabs__tab-list-item-value {
   padding: var(--gd-spacing-10px) var(--gd-spacing-10px);
   flex-grow: 1;
-  flex-shrink: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+}
+.gd-ui-kit-tabs__tab-list-item-value-button {
+  white-space: nowrap;
 }
 .gd-ui-kit-tabs__tab-list-item-actions {
   flex-grow: 0;
@@ -1659,13 +1676,14 @@
   fill: var(--gd-palette-primary-base);
 }
 .gd-ui-kit-tabs__tab-list {
-  width: 250px;
+  max-width: 250px;
   max-height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
+  padding: 6px 0;
 }
 .gd-ui-kit-tabs__tab-list--mobile {
-  width: unset;
+  max-width: unset;
   height: unset;
 }
 .gd-ui-kit-tabs__actions-wrapper {
@@ -2088,39 +2106,31 @@
   margin-top: 2px;
 }
 .gd-ui-kit-async-table__toolbar {
-  padding: 0;
-  min-height: var(--gd-table-row-height-small);
+  width: calc(100% - var(--gd-spacing-10px));
+  margin-right: var(--gd-spacing-10px);
+  margin-bottom: var(--gd-spacing-20px);
+}
+.gd-ui-kit-async-table__toolbar-top {
   display: flex;
   align-items: flex-start;
   justify-content: start;
   gap: var(--gd-spacing-10px);
   margin-bottom: var(--gd-spacing-20px);
-  margin-right: var(--gd-spacing-10px);
-  width: calc(100% - var(--gd-spacing-10px));
-}
-.gd-ui-kit-async-table__toolbar .gd-ui-kit-async-table__cell {
-  visibility: visible;
-  border: 1px solid var(--gd-palette-complementary-3);
-  border-radius: 3px;
-  height: 27px;
 }
-.gd-ui-kit-async-table__toolbar--mobile-view {
+.gd-ui-kit-async-table__toolbar-top--mobile-view {
   flex-direction: column-reverse;
   align-items: stretch;
   width: 100%;
-  padding-right: var(--gd-spacing-10px);
   row-gap: var(--gd-spacing-20px);
-  margin-bottom: var(--gd-spacing-10px);
 }
-.gd-ui-kit-async-table__toolbar--mobile-view .gd-ui-kit-async-table__toolbar-bulk-actions {
-  width: 100%;
-  justify-content: space-between;
-}
-.gd-ui-kit-async-table__toolbar--mobile-view .gd-ui-kit-async-table__toolbar-search {
+.gd-ui-kit-async-table__toolbar-top--mobile-view .gd-ui-kit-async-table__toolbar-search-section {
   margin-left: 0;
   max-width: 100%;
 }
-.gd-ui-kit-async-table__toolbar--mobile-view .gd-ui-kit-async-table__toolbar-filters-section {
+.gd-ui-kit-async-table__toolbar-top--mobile-view .gd-ui-kit-async-table__toolbar-search {
+  flex-grow: 1;
+}
+.gd-ui-kit-async-table__toolbar-top--mobile-view .gd-ui-kit-async-table__toolbar-filters-section {
   width: 100%;
   flex-direction: column;
 }
@@ -2128,10 +2138,21 @@
   display: flex;
   gap: var(--gd-spacing-10px);
 }
+.gd-ui-kit-async-table__toolbar-bulk-actions--mobile-view {
+  width: 100%;
+  justify-content: space-between;
+}
+.gd-ui-kit-async-table__toolbar-bulk-actions .gd-ui-kit-async-table__cell {
+  visibility: visible;
+  border: 1px solid var(--gd-palette-complementary-3);
+  border-radius: 3px;
+  height: 27px;
+}
 .gd-ui-kit-async-table__toolbar-filters-section {
   display: flex;
   align-items: flex-start;
   gap: var(--gd-spacing-10px);
+  margin-top: 1px;
 }
 .gd-ui-kit-async-table__toolbar-label {
   font-size: var(--gd-table-label-font-size);
@@ -2157,13 +2178,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-.gd-ui-kit-async-table__toolbar-selected-count:not(.gd-ui-kit-async-table__toolbar-selected-count--short) {
   min-width: 110px;
 }
-.gd-ui-kit-async-table__toolbar-search {
+.gd-ui-kit-async-table__toolbar-search-section {
+  display: flex;
+  gap: var(--gd-spacing-10px);
   margin-left: auto;
-  max-width: 200px;
+  max-width: 260px;
 }
 .gd-ui-kit-async-table__toolbar-custom-element {
   margin-left: auto;