feat(Tabs): support editable tabs — add and remove tabs (DS-5230)

packages/components/src/components/Tabs/Tabs.mdx

@@ -40,6 +40,17 @@ You can render tabs dynamically by using `items` prop.
 
 <Story of={Stories.Dynamic} />
 
+## Editable
+
+Editable tabs are controlled from outside. Keep the tab list in your app state,
+pass it to the `items` prop, and update it when `onAdd` or `onRemove` is called.
+
+Tabs can be removed with the close button, <kbd>Delete</kbd> or <kbd>Backspace</kbd>.
+
+To see editable tabs in different states, open the [Editable Playground](?path=/story/components-tabs--editable-playground) story.
+
+<Story of={Stories.Editable} />
+
 ## Vertical
 
 Set the tabs to vertical by passing `orientation="vertical"` to `Tabs`.
@@ -104,6 +115,13 @@ You can use the `onSelectionChange` and `selectedKey` props to control the selec
 
 <Story of={Stories.Controlled} />
 
+## Keyboard Activation
+
+Set `keyboardActivation="manual"` to move focus with arrow keys without selecting
+the focused tab until the user presses <kbd>Enter</kbd> or <kbd>Space</kbd>.
+
+<Story of={Stories.KeyboardActivation} />
+
 ## Links
 
 Tabs items can be rendered as links by passing the `href` prop to the `Tab` component.

packages/components/src/components/Tabs/Tabs.module.css

@@ -1,30 +1,56 @@
-@import url('../../styles/mixins.css');
+.container {
+  display: flex;
+  gap: var(--kbq-size-m);
+}
 
 .base {
   display: flex;
   position: relative;
 }
 
-/* container */
-.container {
+.scrollArea {
   display: flex;
-  gap: var(--kbq-size-m);
+  position: relative;
+  flex: 0 1 auto;
+  min-inline-size: 0;
 }
 
-.default {
-  .tab {
-    min-inline-size: 40px;
+.scrollBox {
+  --mask-size: 32px;
 
-    &.selected .content {
-      background-color: var(--kbq-states-background-transparent-active);
-    }
+  &[data-overflow-inline-start] {
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--mask-size),
+      #000 calc(var(--mask-size) * 1.5)
+    );
+  }
 
-    &.hovered .content {
-      background-color: var(--kbq-states-background-transparent-hover);
-    }
+  &[data-overflow-inline-end] {
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--mask-size) * 1.5),
+      transparent calc(100% - var(--mask-size))
+    );
+  }
+
+  &[data-overflow-inline-start][data-overflow-inline-end] {
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--mask-size),
+      #000 calc(var(--mask-size) * 1.5),
+      #000 calc(100% - var(--mask-size) * 1.5),
+      transparent calc(100% - var(--mask-size))
+    );
   }
 }
 
+.tabList {
+  flex-grow: 1;
+  display: flex;
+  position: relative;
+}
+
 .underlined {
   .base::after {
     content: '';
@@ -33,61 +59,11 @@
     position: absolute;
     block-size: var(--kbq-size-border-width);
     background: var(--kbq-line-contrast-less);
-    z-index: var(--kbq-layer-absolute);
-  }
-
-  .tab {
-    --tab-content-offset: var(--kbq-size-m);
-
-    min-inline-size: 40px;
-    box-sizing: content-box;
-    padding-block: var(--kbq-size-s);
-    border-inline: var(--tab-content-offset) solid transparent;
-
-    .content {
-      padding-inline: var(--tab-content-offset);
-      margin-inline: calc(-1 * var(--tab-content-offset));
-      inline-size: calc(100% + calc(2 * var(--tab-content-offset)));
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      inline-size: 100%;
-      block-size: 3px;
-      inset-block-end: 0;
-      inset-block-start: unset;
-      border-radius: 2px 2px 0 0;
-      background-color: transparent;
-      z-index: calc(var(--kbq-layer-absolute) + 1);
-    }
-  }
-
-  .tab.onlyIcon {
-    --tab-content-offset: 0px;
-
-    min-inline-size: 32px;
-    border-inline: var(--kbq-size-xs) solid transparent;
-  }
-
-  .tab:first-child {
-    border-inline-start: 0;
-  }
-
-  .tab:last-child {
-    border-inline-end: 0;
-  }
-
-  .tab.selected {
-    &::after {
-      background-color: var(--kbq-line-contrast);
-    }
+    z-index: calc(var(--kbq-layer-absolute) + 3);
   }
 
-  .tab.hovered {
-    &::after {
-      background-color: var(--kbq-line-contrast-fade);
-    }
+  .tabList {
+    overflow: clip;
   }
 }
 
@@ -104,121 +80,79 @@
   .tabList {
     flex-direction: row;
   }
-
-  .tab .content {
-    justify-content: center;
-  }
 }
 
 .vertical {
-  .scrollBox {
-    display: inline-block;
-    inline-size: auto;
-    scrollbar-width: auto;
-    overflow: hidden auto;
+  .base {
+    flex-direction: column;
+    min-block-size: 0;
+    flex-shrink: 0;
   }
 
-  .tabList {
-    flex-direction: column;
+  .scrollArea {
+    inline-size: 100%;
+    min-block-size: 0;
   }
 
-  .tab {
+  .scrollBox {
+    --mask-size: var(--kbq-size-3xl);
+
     inline-size: 100%;
-    padding-block: var(--kbq-size-xxs);
+    display: inline-block;
+    overflow: hidden auto;
+    scrollbar-width: auto;
+    scrollbar-gutter: auto;
+    scrollbar-color: var(--kbq-scrollbar-thumb-default-background)
+      var(--kbq-background-transparent);
+
+    &[data-overflow-block-start][data-overflow-block-end] {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--mask-size),
+        #000 calc(100% - var(--mask-size)),
+        transparent 100%
+      );
+    }
 
-    .content {
-      justify-content: flex-start;
+    &[data-overflow-block-start]:not([data-overflow-block-end]) {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--mask-size)
+      );
     }
-  }
 
-  .tab:first-child {
-    padding-block-start: 0;
+    &:not([data-overflow-block-start])[data-overflow-block-end] {
+      mask-image: linear-gradient(
+        to bottom,
+        #000 calc(100% - var(--mask-size)),
+        transparent 100%
+      );
+    }
   }
 
-  .tab:last-child {
-    padding-block-end: 0;
+  .tabList {
+    flex-direction: column;
   }
 
-  .label {
-    min-inline-size: 0;
+  [data-slot='add-button'] {
+    padding-block-start: var(--kbq-size-s);
+  }
 
-    @mixin ellipsis;
+  &:has(.tabList:empty) {
+    [data-slot='add-button'] {
+      padding-block-start: 0;
+    }
   }
 }
 
 .stretched {
-  .scrollBox {
-    overflow: hidden;
-  }
-
-  .tab {
+  .scrollArea {
     inline-size: 100%;
   }
 
-  .label {
-    min-inline-size: 0;
-
-    @mixin ellipsis;
-  }
-}
-
-/* tab-list */
-.tabList {
-  flex-grow: 1;
-  display: flex;
-  position: relative;
-}
-
-/* tab */
-.tab {
-  display: flex;
-  outline: none;
-  cursor: pointer;
-  position: relative;
-  align-items: stretch;
-  text-decoration: none;
-  box-sizing: border-box;
-  justify-content: center;
-  transition: background-color var(--kbq-transition-default);
-
-  &::after {
-    transition: background-color var(--kbq-transition-default);
+  .scrollBox {
+    overflow: hidden;
   }
 }
-
-.focusVisible .content {
-  outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.disabled .content {
-  color: var(--kbq-states-foreground-disabled);
-  cursor: default;
-}
-
-.content {
-  display: flex;
-  gap: var(--kbq-size-xxs);
-  align-items: center;
-  overflow: hidden;
-  inline-size: 100%;
-  white-space: nowrap;
-  box-sizing: border-box;
-  min-block-size: 32px;
-  padding-inline: var(--kbq-size-m);
-  padding-block: var(--kbq-size-xs);
-  color: var(--kbq-foreground-contrast);
-  border-radius: var(--kbq-size-border-radius);
-  outline-offset: calc(-1 * var(--kbq-size-3xs));
-  outline: var(--kbq-size-3xs) solid;
-  outline-color: transparent;
-  transition:
-    outline-color var(--kbq-transition-default),
-    background-color var(--kbq-transition-default),
-    color var(--kbq-transition-default);
-}
-
-.addon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}