@knime/kds-table 6.8.0 → 6.9.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @knime/kds-table
 
+## 6.9.0
+
+### Minor Changes
+
+- 090fd52: - `TableUI`:
+  - with `actionConfig.enableSorting`, every sortable column header now shows a
+    sort button next to its menu button, cycling the column through unsorted,
+    ascending and descending on each click. It appears on hover/focus, and stays
+    visible while the column is sorted to indicate that state. The sort
+    directions are no longer offered in the header context menu.
+  - a column header now only shows its menu button when the column has
+    additional menu items. Previously a sortable column always showed one,
+    because sorting itself contributed the menu items.
+  - each column now has a minimum width fitting the action buttons its header
+    shows. It is enforced on auto-calculated column sizes too, not only on
+    resizing.
+  - tightened the header layout so the column name truncates to make room for
+    the action buttons instead of pushing them out of the header. This applies
+    to every column header, including ones without a sort button.
+
+### Patch Changes
+
+- Updated dependencies [2725ccb]
+  - @knime/utils@2.0.2
+  - @knime/kds-components@6.9.0
+  - @knime/kds-styles@6.9.0
+
+## 6.8.1
+
+### Patch Changes
+
+- Updated dependencies [2d8e635]
+  - @knime/kds-components@6.8.1
+  - @knime/kds-styles@6.8.1
+
 ## 6.8.0
 
 ### Patch Changes

package/dist/index.css

@@ -236,7 +236,7 @@ tr {
 }
 
 .column-header {
-&[data-v-31a6758f] {
+&[data-v-0f9137cc] {
   /* Need to set position relative here to position the resize handle absolutely within the header cell */
   position: relative;
   display: flex;
@@ -250,10 +250,10 @@ tr {
   text-align: left;
   white-space: nowrap;
 }
-&.header-focused[data-v-31a6758f] {
+&.header-focused[data-v-0f9137cc] {
     background-color: var(--kds-color-focus-background);
 }
-&.colored-header[data-v-31a6758f] {
+&.colored-header[data-v-0f9137cc] {
     /* stylelint-disable no-unknown-custom-properties -- runtime variable set via inline :style */
     background-image: linear-gradient(
       90deg,
@@ -265,48 +265,70 @@ tr {
     background-size: var(--kds-spacing-container-0-25x);
 }
 & .column-header-content {
-&[data-v-31a6758f] {
+&[data-v-0f9137cc] {
     display: flex;
+    flex-shrink: 1;
     flex-direction: column;
     justify-content: center;
     width: 100%;
+
+    /* Allows this flex item to shrink below its content's width, so the
+       column name truncates (and, if there is no room left at all,
+       disappears) instead of pushing the header-action buttons outside. */
+    min-width: 0;
 }
-&[data-v-31a6758f]:focus {
+&[data-v-0f9137cc]:focus {
       outline: none;
 }
-&.with-button-in-header[data-v-31a6758f] {
+&.with-button-in-header[data-v-0f9137cc] {
       width: calc(
         100% - var(--kds-dimension-component-width-1-5x)
       ); /* due to .sub-menu-select-header / .delete-column-button: width */
 }
 & .main-header {
-&[data-v-31a6758f] {
+&[data-v-0f9137cc] {
       display: flex;
+      min-width: 0;
 }
-& .header-text-container[data-v-31a6758f] {
+& .header-text-container[data-v-0f9137cc] {
+        min-width: 0;
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-title-medium-strong);
 }
 }
-& .sub-header-text-container[data-v-31a6758f] {
+& .sub-header-text-container[data-v-0f9137cc] {
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-subtext-small);
 }
 }
-& .menu-button-hidden[data-v-31a6758f] {
-    pointer-events: none;
-    opacity: 0;
+& .header-action-button {
+&[data-v-0f9137cc] {
+    flex-shrink: 0;
+
+    /* Collapsed to zero width by default so it reserves no space in the
+       header; it only claims room once hovered/focused (or sorted), at
+       which point the column name shrinks/truncates to make room for it. */
+}
+& + .header-action-button[data-v-0f9137cc] {
+      margin-left: var(--kds-spacing-container-0-12x);
+}
+&.action-button-hidden[data-v-0f9137cc] {
+      width: 0;
+      overflow: hidden;
+      pointer-events: none;
+      opacity: 0;
+}
 }
-& .delete-column-button[data-v-31a6758f] {
+& .delete-column-button[data-v-0f9137cc] {
     display: flex;
     align-items: center;
     width: var(--kds-dimension-component-width-2x);
 }
 & .resize-handle-area {
-&[data-v-31a6758f] {
+&[data-v-0f9137cc] {
     position: absolute;
 
     /* resize handle should range into top border */
@@ -332,26 +354,26 @@ tr {
     cursor: col-resize;
     opacity: 0;
 }
-& .resize-handle[data-v-31a6758f] {
+& .resize-handle[data-v-0f9137cc] {
       border-right: var(--kds-border-resize-handle-hover);
       border-radius: var(--kds-border-radius-container-0-25x);
 }
-&.hover[data-v-31a6758f] {
+&.hover[data-v-0f9137cc] {
       opacity: 1;
 }
-&.drag[data-v-31a6758f] {
+&.drag[data-v-0f9137cc] {
       opacity: 1;
 }
 }
 }
 
 thead {
-&[data-v-fc0a0ecb] {
+&[data-v-885a5768] {
   background-color: var(--kds-color-page-default);
   border-bottom: var(--kds-border-base-subtle);
 }
 & tr {
-&[data-v-fc0a0ecb] {
+&[data-v-885a5768] {
     display: flex;
     height: 100%;
     transition:
@@ -359,51 +381,51 @@ thead {
       box-shadow 0.15s;
 }
 & th {
-&[data-v-fc0a0ecb] {
+&[data-v-885a5768] {
       min-height: var(--kds-dimension-component-height-2-5x);
       max-height: var(--kds-dimension-component-height-5x);
       text-align: left;
       white-space: nowrap;
 }
-&.deletion-cell-spacer[data-v-fc0a0ecb] {
+&.deletion-cell-spacer[data-v-885a5768] {
         width: var(--kds-dimension-component-width-2x);
 }
 &.select-cell {
-&[data-v-fc0a0ecb] {
+&[data-v-885a5768] {
         display: flex;
         justify-content: center;
         width: var(--kds-dimension-component-width-2x);
         padding: var(--kds-spacing-container-0-75x);
 }
-& .select-checkbox[data-v-fc0a0ecb] {
+& .select-checkbox[data-v-885a5768] {
           /* With this added padding the checkbox appears centered initially */
           padding: var(--kds-spacing-container-0-10x);
 }
 }
-&.new-column-head[data-v-fc0a0ecb] {
+&.new-column-head[data-v-885a5768] {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: var(--kds-spacing-container-0-5x);
 }
 }
-&[data-v-fc0a0ecb]:hover {
+&[data-v-885a5768]:hover {
       outline: none;
 }
 }
-&.sub-menu-active tr[data-v-fc0a0ecb] {
+&.sub-menu-active tr[data-v-885a5768] {
     padding-right: var(--kds-dimension-component-width-2x);
 }
 }
 .header-selection-overlay {
-&[data-v-fc0a0ecb] {
+&[data-v-885a5768] {
   position: absolute;
   top: 0;
   height: 100%;
   pointer-events: none;
   border: var(--kds-border-action-selected-accent);
 }
-&.header-focused[data-v-fc0a0ecb] {
+&.header-focused[data-v-885a5768] {
     border: var(--kds-border-action-focused);
 }
 }
@@ -623,7 +645,7 @@ table {
 }
 }
 
-.table-column-size-calculation[data-v-11d56c71] {
+.table-column-size-calculation[data-v-f3ef2f4b] {
   position: absolute;
   top: -9999px;
   left: -9999px;