frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/TabButtons/Pill.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '../Icon'
+import type { PillProps } from './pillTypes'
+
+const props = withDefaults(defineProps<PillProps>(), {
+  variant: 'default',
+  size: 'md',
+  active: false,
+  browserTabBase: 'none',
+  orientation: 'horizontal',
+  activeStyle: 'raised',
+})
+
+// `icon` means icon-only intent (label, if provided, is rendered as
+// sr-only). `iconLeft`/`iconRight` are accent icons next to a visible
+// label. This matches Button's semantics.
+const isIconOnly = computed(() => Boolean(props.icon))
+
+const rootClasses = computed(() => {
+  const isSm = props.size === 'sm'
+  const iconOnly = isIconOnly.value
+  const active = props.active
+  return [
+    'inline-flex box-border shrink-0 select-none items-center justify-center whitespace-nowrap text-sm leading-[16.1px] outline-none transition-[background-color,color,box-shadow,border-color] duration-150 ease-out motion-reduce:transition-none',
+    active
+      ? props.variant === 'underline'
+        ? 'text-ink-gray-8 font-medium'
+        : 'text-ink-gray-8'
+      : 'text-ink-gray-5',
+    iconOnly
+      ? isSm
+        ? 'size-6.5 gap-1.5 p-[5px]'
+        : 'size-7 gap-1.5 p-[5px]'
+      : props.variant === 'underline'
+        ? props.orientation === 'vertical'
+          ? isSm
+            ? 'h-7 gap-2 pr-2'
+            : 'h-7.5 gap-2 pr-2'
+          : isSm
+            ? 'h-7 gap-2'
+            : 'h-7.5 gap-2'
+        : isSm
+          ? 'h-6.5 gap-2 px-2 py-[5px]'
+          : 'h-7 gap-2 px-2.5 py-1.5',
+    radiusClass.value,
+    variantClass.value,
+  ]
+})
+
+const radiusClass = computed(() => {
+  if (props.variant === 'underline') return ''
+
+  if (props.variant === 'browser-tab') {
+    if (props.browserTabBase === 'left')
+      return props.size === 'sm' ? 'rounded-r-[7px]' : 'rounded-r-[9px]'
+    if (props.browserTabBase === 'right')
+      return props.size === 'sm' ? 'rounded-l-[7px]' : 'rounded-l-[9px]'
+    if (props.browserTabBase === 'default')
+      return props.size === 'sm' ? 'rounded-t-[7px]' : 'rounded-t-[9px]'
+    return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+  }
+
+  return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+})
+
+const variantClass = computed(() => {
+  if (props.variant === 'underline') {
+    const isVertical = props.orientation === 'vertical'
+    const railSlot = isVertical
+      ? 'border-r border-transparent'
+      : 'border-b border-transparent'
+    if (props.active) {
+      // Indicator overlays the container's rail segment so it reads as a
+      // thicker, darker section of the same line — not a separate bar
+      // floating beside the label.
+      const indicator = isVertical
+        ? 'after:absolute after:inset-y-1.5 after:-right-0.5 after:w-px after:bg-[var(--ink-gray-8)]'
+        : 'after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-[var(--ink-gray-8)]'
+      return ['relative', railSlot, indicator]
+    }
+    return [railSlot, 'hover:text-ink-gray-7']
+  }
+
+  if (props.variant === 'browser-tab') {
+    if (!props.active) {
+      return 'border border-transparent hover:bg-surface-gray-2 hover:text-ink-gray-7'
+    }
+
+    // Active tab "punches through" the rail: the white pseudo extends a
+    // few pixels past the rail line so the tab visibly continues into the
+    // area below, instead of terminating exactly at the rail (which the
+    // eye reads as a closed bottom corner). Border is one step darker
+    // than the rail so the tab reads as a distinct, raised shape.
+    // No drop shadow: a downward shadow would paint below the rail and
+    // visually re-close the bottom edge we're trying to open.
+    if (props.browserTabBase === 'left') {
+      return 'relative border border-l-0 border-outline-gray-2 bg-surface-base after:absolute after:-left-[3px] after:-top-px after:-bottom-px after:w-[3px] after:bg-surface-base'
+    }
+
+    if (props.browserTabBase === 'right') {
+      return 'relative border border-r-0 border-outline-gray-2 bg-surface-base after:absolute after:-right-[3px] after:-top-px after:-bottom-px after:w-[3px] after:bg-surface-base'
+    }
+
+    return 'relative border border-b-0 border-outline-gray-2 bg-surface-base after:absolute after:-inset-x-px after:-bottom-[3px] after:h-[3px] after:bg-surface-base'
+  }
+
+  if (props.variant === 'outline') {
+    return props.active
+      ? 'border border-transparent bg-surface-base shadow-sm'
+      : 'border border-outline-gray-1 hover:bg-surface-gray-2 hover:text-ink-gray-7'
+  }
+
+  if (!props.active) {
+    return 'hover:bg-surface-gray-3/80 hover:text-ink-gray-7'
+  }
+
+  return props.activeStyle === 'subtle'
+    ? 'bg-surface-gray-2'
+    : 'bg-surface-elevation-3 shadow-base'
+})
+
+const iconClass = computed(() =>
+  props.size === 'sm' ? 'size-4 shrink-0' : 'size-[18px] shrink-0',
+)
+
+function hasLabel(label: PillProps['label']) {
+  return label !== undefined && label !== null && label !== ''
+}
+
+defineSlots<{
+  prefix?: () => any
+  default?: () => any
+  suffix?: () => any
+}>()
+</script>
+
+<template>
+  <span :class="rootClasses" :data-state="active ? 'active' : 'inactive'">
+    <slot name="prefix">
+      <Icon v-if="icon" :name="icon" :class="iconClass" />
+      <Icon v-else-if="iconLeft" :name="iconLeft" :class="iconClass" />
+    </slot>
+
+    <span
+      v-if="hasLabel(label) || $slots.default"
+      class="min-w-0 truncate"
+      :class="isIconOnly ? 'sr-only' : undefined"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+
+    <slot name="suffix">
+      <Icon
+        v-if="iconRight && !isIconOnly"
+        :name="iconRight"
+        :class="iconClass"
+      />
+    </slot>
+  </span>
+</template>

package/src/components/TabButtons/TabButtons.api.md

@@ -5,17 +5,65 @@
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 
   const propsData = [
+  {
+    name: 'options',
+    description: 'List of options to render.',
+    required: false,
+    type: 'TabButton[]'
+  },
   {
     name: 'buttons',
     description: '',
-    required: true,
-    type: 'TabButton[]'
+    required: false,
+    type: 'TabButton[]',
+    deprecated: 'Use `options` instead.'
   },
   {
     name: 'modelValue',
     description: '',
     required: false,
     type: 'TabButtonValue'
+  },
+  {
+    name: 'type',
+    description: '',
+    required: false,
+    type: 'TabButtonsType',
+    default: '"subtle"'
+  },
+  {
+    name: 'size',
+    description: '',
+    required: false,
+    type: 'PillSize',
+    default: '"sm"'
+  },
+  {
+    name: 'vertical',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'direction',
+    description: 'Edge the active browser tab attaches to. Only used when `type=\'browser-tab\'` and `vertical`.',
+    required: false,
+    type: 'TabButtonsDirection',
+    default: '"left"'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'prefix',
+    description: '',
+    type: '{ button: { key: string; label: string | number | undefined; icon: TabButtonIcon | undefined; iconLe'
+  },
+  {
+    name: 'suffix',
+    description: '',
+    type: '{ button: { key: string; label: string | number | undefined; icon: TabButtonIcon | undefined; iconLe'
   }
 ]
 
@@ -31,5 +79,7 @@
 
 <PropsTable name="TabButtons" :data="propsData"/> 
 
+<SlotsTable :data="slotsData"/> 
+
 <EmitsTable :data="emitsData"/> 
 

package/src/components/TabButtons/TabButtons.cy.ts

@@ -5,7 +5,7 @@ describe('<TabButtons />', () => {
   it('updates the selected value', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week' },
         ],
@@ -24,7 +24,7 @@ describe('<TabButtons />', () => {
 
     cy.mount(TabButtons, {
       props: {
-        buttons: [{ label: 'Month', value: 'month', onClick }],
+        options: [{ label: 'Month', value: 'month', onClick }],
         modelValue: 'month',
       },
     })
@@ -37,7 +37,7 @@ describe('<TabButtons />', () => {
   it('syncs the model with the active fallback', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week', active: true },
         ],
@@ -60,12 +60,11 @@ describe('<TabButtons />', () => {
 
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           {
             label: 'Calendar',
             value: 'calendar',
             icon: CalendarIcon,
-            hideLabel: true,
           },
         ],
         modelValue: 'calendar',
@@ -77,4 +76,18 @@ describe('<TabButtons />', () => {
       .and('have.attr', 'title', 'Calendar')
     cy.get('[data-cy="calendar-icon"]').should('exist')
   })
+
+  it('rounds the focusable tab element to match the pill', () => {
+    cy.mount(TabButtons, {
+      props: {
+        options: [
+          { label: 'Day', value: 'day' },
+          { label: 'Week', value: 'week' },
+        ],
+        modelValue: 'day',
+      },
+    })
+
+    cy.contains('button', 'Day').should('have.class', 'rounded-[7px]')
+  })
 })

package/src/components/TabButtons/TabButtons.md

@@ -0,0 +1,49 @@
+# TabButtons
+
+A radio-group based tab control for switching between compact views.
+
+> Status: work in progress. The v1 API and implementation are still being
+> polished, especially route/link behavior, option compatibility, and
+> browser-tab details. Treat this component as preview-quality until this note
+> is removed.
+
+## Playground
+
+<ClientOnly><TabButtonsBuilder /></ClientOnly>
+
+## Variants
+
+<ComponentPreview name="TabButtons-Variants" />
+
+## Sizes
+
+<ComponentPreview name="TabButtons-Sizes" />
+
+## Vertical
+
+<ComponentPreview name="TabButtons-Vertical" />
+
+## Prefix and suffix
+
+<ComponentPreview name="TabButtons-PrefixSuffix" />
+
+<!-- @include: ./TabButtons.api.md -->
+
+## Migration from v0
+
+TabButtons no longer wraps `<Button>` internally — each tab is now a native
+`<button>`, `<a href>`, or `<RouterLink>` rendering a `<Pill>` for its visual
+treatment. This is a breaking change for consumers that were passing Button
+props through option entries.
+
+- `theme`, `variant`, `size`, `loading`, `prefix` on individual options are no
+  longer honored. Use `Button` or `Pill` directly if you need per-tab theming or
+  a loading spinner.
+- `hideLabel` on options is gone. Use `icon` for an icon-only tab — its `label`,
+  if provided, is automatically exposed as accessibility text. Use `iconLeft` /
+  `iconRight` when you want an accent icon next to a visible label.
+- `route` and `href` on options are honored: a tab renders as a `<RouterLink>`
+  when `route` is set, or an `<a href target=_blank>` when `href` is set.
+- The per-tab `tooltip` value now surfaces as the native `title` attribute
+  rather than the floating `<Tooltip>` popover. Wrap the `TabButtons` instance
+  in a custom tooltip if you need styled behavior.