@indielayer/ui 1.18.1 → 2.1.0

package/src/components/button/Button.vue

@@ -1,33 +1,58 @@
 <script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+
 const buttonProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
+  ...variantBooleanProps(),
   tag: {
     type: String,
     default: 'button',
+    description: 'Root element tag. Becomes a router-link when `to` is set.',
   },
   type: {
     type: String,
     default: 'button',
+    description: 'Native button type when `tag` is `button` (button, submit, reset).',
+  },
+  icon: {
+    type: String,
+    description: 'Shortcut for `iconLeft`.',
+  },
+  iconLeft: {
+    type: String,
+    description: 'Icon name shown before the label.',
+  },
+  iconRight: {
+    type: String,
+    description: 'Icon name shown after the label.',
+  },
+  to: {
+    type: [String, Object],
+    description: 'Vue Router location; renders as a link when set.',
+  },
+  tooltip: {
+    type: String,
+    description: 'Tooltip text shown on hover. Prefer the tooltip slot for custom content.',
+  },
+  tooltipPosition: {
+    type: String as PropType<TooltipPosition>,
+    default: 'top',
+    description: 'Tooltip placement relative to the button.',
   },
-  icon: String,
-  iconLeft: String,
-  iconRight: String,
-  to: [String, Object],
-  outlined: Boolean,
-  rounded: Boolean,
-  glow: Boolean,
-  ghost: Boolean,
-  light: Boolean,
-  block: Boolean,
-  flat: Boolean,
 }
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 
 type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
-type InternalExtraData = { isButtonGroup: boolean; }
+type InternalExtraData = {
+  isButtonGroup: boolean;
+  buttonGroupPosition: import('../../common/buttonGroupRadius').ButtonGroupPosition | undefined;
+  buttonGroupRounded: boolean;
+  isInsideInputGroup: boolean;
+  inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined;
+}
 export interface ButtonTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -35,43 +60,127 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Button label and content.',
+      tooltip: 'Custom tooltip content; overrides the `tooltip` prop.',
+    },
+    methods: {
+      focus: 'Focus the underlying control.',
+      blur: 'Remove focus from the underlying control.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
+import { computed, ref, inject, onMounted, onUnmounted, useAttrs, useSlots, unref, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInteractive } from '../../composables/useInteractive'
-import { injectButtonGroupKey } from '../../composables/keys'
+import { injectButtonGroupKey, injectInputGroupKey } from '../../composables/keys'
 
 import XLoader from '../loader/Loader.vue'
 import XIcon from '../icon/Icon.vue'
+import XTooltip from '../tooltip/Tooltip.vue'
+
+import type { TooltipPosition } from '../tooltip/Tooltip.vue'
 
 const props = defineProps(buttonProps)
+const resolvedProps = useResolvedComponentProps('Button', props)
+const slots = useSlots()
 
 const elRef = ref<HTMLElement | null>(null)
 
-// Button group props
 const buttonGroup = inject(injectButtonGroupKey, {
   isButtonGroup: false,
   groupProps: {},
+  registerChild: () => {},
+  unregisterChild: () => {},
+  getPosition: () => 'only' as const,
+  childOrder: computed(() => []),
+})
+
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
+const childId = `btn-${Math.random().toString(36).slice(2)}`
+
+onMounted(() => {
+  if (buttonGroup.isButtonGroup) buttonGroup.registerChild(childId)
+  if (inputGroup.isInsideInputGroup) inputGroup.registerChild(childId)
+})
+
+onUnmounted(() => {
+  if (buttonGroup.isButtonGroup) buttonGroup.unregisterChild(childId)
+  if (inputGroup.isInsideInputGroup) inputGroup.unregisterChild(childId)
 })
 
 const { isButtonGroup } = buttonGroup
-const computedSize = computed(() => buttonGroup.groupProps.size || props.size)
-const computedFlat = computed(() => buttonGroup.groupProps.flat || props.flat)
-const computedColor = computed(() => props.color || buttonGroup.groupProps.color)
-const computedGhost = computed(() => props.ghost || buttonGroup.groupProps.ghost)
-const computedLight = computed(() => props.light || buttonGroup.groupProps.light)
-const computedOutlined = computed(() => props.outlined || buttonGroup.groupProps.outlined)
-const computedDisabled = computed(() => props.disabled || buttonGroup.groupProps.disabled)
+const buttonGroupPosition = computed(() => {
+  if (!buttonGroup.isButtonGroup) return undefined
+
+  void buttonGroup.childOrder.value
+
+  return buttonGroup.getPosition(childId)
+})
+const buttonGroupRounded = computed(() => !!buttonGroup.groupProps?.rounded)
+const isInsideInputGroup = computed(() => inputGroup.isInsideInputGroup)
+const inputGroupPosition = computed(() => {
+  if (!inputGroup.isInsideInputGroup) return undefined
+
+  void inputGroup.childOrder.value
+
+  return inputGroup.getPosition(childId)
+})
+
+const group = () => buttonGroup.groupProps
+
+const computedSize = computed(() => {
+  if (inputGroup.isInsideInputGroup && inputGroup.groupProps?.size) {
+    return inputGroup.groupProps.size
+  }
+
+  return group().size ?? resolvedProps.value.size
+})
+const computedFlat = computed(() => group().flat ?? resolvedProps.value.flat)
+const computedColor = computed(() => resolvedProps.value.color ?? group().color)
+const computedGhost = computed(() => group().ghost ?? resolvedProps.value.ghost)
+const computedLight = computed(() => group().light ?? resolvedProps.value.light)
+const computedOutlined = computed(() => group().outlined ?? resolvedProps.value.outlined)
+const computedDisabled = computed(() => props.disabled || group().disabled || !!inputGroup.groupProps?.disabled)
 const computedIconLeft = computed(() => props.icon || props.iconLeft)
 
 const attrs = useAttrs()
 const htmlTag = computed(() => (attrs.href ? 'a' : props.to ? 'router-link' : props.tag))
 
+const hasTooltip = computed(() => !!(props.tooltip || slots.tooltip))
+const isIconOnly = computed(() => !slots.default)
+const ariaLabel = computed(() => {
+  const fromAttrs = attrs['aria-label']
+
+  if (fromAttrs !== undefined && fromAttrs !== null) return fromAttrs as string
+  if (isIconOnly.value && props.tooltip) return props.tooltip
+
+  return undefined
+})
+const tooltipWrapperClass = computed(() => {
+  if (resolvedProps.value.block) return 'block w-full'
+  if (isButtonGroup) return 'inline-flex self-stretch'
+
+  return undefined
+})
+
 const computedProps = computed(() => ({
   size: unref(computedSize),
   flat: unref(computedFlat),
@@ -81,15 +190,19 @@ const computedProps = computed(() => ({
   outlined: unref(computedOutlined),
   disabled: unref(computedDisabled),
   loading: props.loading,
-  block: props.block,
-  glow: props.glow,
+  block: resolvedProps.value.block,
+  glow: resolvedProps.value.glow,
   iconLeft: unref(computedIconLeft),
   iconRight: props.iconRight,
-  rounded: props.rounded,
+  rounded: resolvedProps.value.rounded,
 }))
 
 const { className, classes, styles } = useTheme('Button', {}, computedProps, {
   isButtonGroup,
+  buttonGroupPosition,
+  buttonGroupRounded,
+  isInsideInputGroup,
+  inputGroupPosition,
 })
 
 const { focus, blur } = useInteractive(elRef)
@@ -98,16 +211,79 @@ defineExpose({ focus, blur })
 </script>
 
 <template>
+  <x-tooltip
+    v-if="hasTooltip"
+    :position="tooltipPosition"
+    :class="tooltipWrapperClass"
+  >
+    <template #tooltip>
+      <slot name="tooltip">
+        {{ tooltip }}
+      </slot>
+    </template>
+    <component
+      :is="htmlTag"
+      ref="elRef"
+      :to="to"
+      :class="[
+        className,
+        $style['button'],
+        (resolvedProps.glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+        classes.wrapper,
+        {
+          'w-full': resolvedProps.block,
+          'h-full': isButtonGroup,
+        }
+      ]"
+      :style="styles"
+      :aria-label="ariaLabel"
+      :aria-busy="loading ? 'true' : null"
+      :aria-disabled="tag !== 'button' && computedDisabled ? 'true' : null"
+      :disabled="computedDisabled || loading"
+      :type="tag === 'button' ? type : null"
+    >
+      <x-loader
+        v-if="loading"
+        class="absolute"
+        :size="computedSize"
+        :label="loadingLabel"
+        :status="loadingStatus"
+      />
+      <div class="inline-flex items-center justify-center" :class="{ 'invisible': loading }">
+        <x-icon
+          v-if="computedIconLeft"
+          :size="computedSize"
+          :icon="computedIconLeft"
+          :class="[
+            classes.iconLeft,
+          ]"
+        />
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+      <x-icon
+        v-if="iconRight"
+        :size="computedSize"
+        :icon="iconRight"
+        :class="[
+          classes.iconRight,
+          { 'invisible': loading },
+        ]"
+      />
+    </component>
+  </x-tooltip>
   <component
     :is="htmlTag"
+    v-else
     ref="elRef"
     :to="to"
     :class="[
       className,
       $style['button'],
-      (glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+      (resolvedProps.glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
       classes.wrapper,
-      { 'w-full': block }
+      { 'w-full': resolvedProps.block }
     ]"
     :style="styles"
     :aria-busy="loading ? 'true' : null"
@@ -147,45 +323,47 @@ defineExpose({ focus, blur })
   </component>
 </template>
 
-<style lang="postcss" scoped module>
+<style scoped module>
 .button {
   color: var(--x-button-text);
   background-color: var(--x-button-bg);
   border-color: var(--x-button-border);
+}
 
-  &--glow {
-    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
-  }
+.button--glow {
+  box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
+}
 
-  &:hover {
-    color: var(--x-button-text-hover, var(--x-button-text));
-    background-color: var(--x-button-bg-hover, var(--x-button-bg));
-    border-color: var(--x-button-border-hover, var(--x-button-border));
-  }
+.button:hover {
+  color: var(--x-button-text-hover, var(--x-button-text));
+  background-color: var(--x-button-bg-hover, var(--x-button-bg));
+  border-color: var(--x-button-border-hover, var(--x-button-border));
+}
 
-  &:active {
-    color: var(--x-button-text-active, var(--x-button-text));
-    background-color: var(--x-button-bg-active, var(--x-button-bg));
-    border-color: var(--x-button-border-active, var(--x-button-border));
-  }
+.button:active {
+  color: var(--x-button-text-active, var(--x-button-text));
+  background-color: var(--x-button-bg-active, var(--x-button-bg));
+  border-color: var(--x-button-border-active, var(--x-button-border));
+}
 
-  :global(.dark) &,
-  &:global(.dark) {
-    color: var(--x-button-dark-text, var(--x-button-text));
-    background-color: var(--x-button-dark-bg, var(--x-button-bg));
-    border-color: var(--x-button-dark-border, var(--x-button-border));
-
-    &:hover {
-      color: var(--x-button-dark-text-hover, var(--x-button-dark-text, var(--x-button-text)));
-      background-color: var(--x-button-dark-bg-hover, var(--x-button-dark-bg, var(--x-button-bg)));
-      border-color: var(--x-button-dark-border-hover, var(--x-button-dark-border, var(--x-button-border)));
-    }
-
-    &:active {
-      color: var(--x-button-dark-text-active, var(--x-button-dark-text));
-      background-color: var(--x-button-dark-bg-active, var(--x-button-dark-bg, var(--x-button-bg)));
-      border-color: var(--x-button-dark-border-active, var(--x-button-dark-border, var(--x-button-border)));
-    }
-  }
+:global(.dark) .button,
+.button:global(.dark) {
+  color: var(--x-button-dark-text, var(--x-button-text));
+  background-color: var(--x-button-dark-bg, var(--x-button-bg));
+  border-color: var(--x-button-dark-border, var(--x-button-border));
+}
+
+:global(.dark) .button:hover,
+.button:global(.dark):hover {
+  color: var(--x-button-dark-text-hover, var(--x-button-dark-text, var(--x-button-text)));
+  background-color: var(--x-button-dark-bg-hover, var(--x-button-dark-bg, var(--x-button-bg)));
+  border-color: var(--x-button-dark-border-hover, var(--x-button-dark-border, var(--x-button-border)));
+}
+
+:global(.dark) .button:active,
+.button:global(.dark):active {
+  color: var(--x-button-dark-text-active, var(--x-button-dark-text));
+  background-color: var(--x-button-dark-bg-active, var(--x-button-dark-bg, var(--x-button-bg)));
+  border-color: var(--x-button-dark-border-active, var(--x-button-dark-border, var(--x-button-border)));
 }
 </style>

package/src/components/button/ButtonGroup.vue

@@ -1,23 +1,27 @@
 <script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+import type { ButtonGroupPosition } from '../../common/buttonGroupRadius'
+
 const buttonGroupProps = {
   ...useCommon.props(),
   ...useColors.props(),
   ...useInteractive.props(),
+  ...variantBooleanProps(),
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag for the group wrapper.',
   },
-  outlined: Boolean,
-  rounded: Boolean,
-  ghost: Boolean,
-  light: Boolean,
-  flat: Boolean,
 }
 
 export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>
 export type ButtonGroupInjection = {
   groupProps: ButtonGroupProps;
   isButtonGroup: boolean;
+  registerChild: (id: string) => void;
+  unregisterChild: (id: string) => void;
+  getPosition: (id: string) => ButtonGroupPosition;
+  childOrder: ComputedRef<string[]>;
 }
 
 type InternalClasses = 'wrapper'
@@ -29,25 +33,61 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Grouped buttons (typically x-button children).',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { provide, type ExtractPublicPropTypes } from 'vue'
+import { provide, ref, computed, type ExtractPublicPropTypes, type ComputedRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useInteractive } from '../../composables/useInteractive'
 import { injectButtonGroupKey } from '../../composables/keys'
 
 const props = defineProps(buttonGroupProps)
+const resolvedProps = useResolvedComponentProps('ButtonGroup', props)
+
+const childOrder = ref<string[]>([])
+const childOrderReadonly = computed(() => childOrder.value)
+
+function getPosition(id: string): ButtonGroupPosition {
+  const order = childOrderReadonly.value
+  const index = order.indexOf(id)
+
+  if (index === -1 || order.length === 0) return 'only'
+  if (order.length === 1) return 'only'
+  if (index === 0) return 'first'
+  if (index === order.length - 1) return 'last'
+
+  return 'middle'
+}
+
+function registerChild(id: string) {
+  if (!childOrder.value.includes(id)) {
+    childOrder.value = [...childOrder.value, id]
+  }
+}
+
+function unregisterChild(id: string) {
+  childOrder.value = childOrder.value.filter((n) => n !== id)
+}
 
 provide(injectButtonGroupKey, {
   groupProps: props,
   isButtonGroup: true,
+  registerChild,
+  unregisterChild,
+  getPosition,
+  childOrder: childOrderReadonly,
 })
 
-const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
+const { className, classes, styles } = useTheme('ButtonGroup', {}, resolvedProps)
 </script>
 
 <template>
@@ -56,35 +96,9 @@ const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
     :style="styles"
     :class="[
       className,
-      $style['button-group'],
-      rounded ? $style['button-group--rounded'] : '',
       classes.wrapper
     ]"
   >
     <slot></slot>
   </component>
 </template>
-
-<style lang="postcss" module>
-.button-group {
-  &:not(&--rounded) {
-    > :first-child {
-      @apply rounded-l-md;
-    }
-
-    > :last-child {
-      @apply rounded-r-md;
-    }
-  }
-
-  &--rounded {
-    > :first-of-type {
-      @apply rounded-l-full;
-    }
-
-    > :last-child {
-      @apply rounded-r-full;
-    }
-  }
-}
-</style>

package/src/components/button/__tests__/ Button.spec.ts

@@ -8,4 +8,45 @@ describe('Button', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('passes tooltip to the tooltip wrapper', () => {
+    const wrapper = mount(Button, {
+      props: { icon: 'check', tooltip: 'Save' },
+      global: {
+        stubs: {
+          XIcon: true,
+          XLoader: true,
+          XTooltip: {
+            props: ['position'],
+            template: `
+              <div class="tooltip-stub">
+                <slot />
+                <div class="tooltip-content"><slot name="tooltip" /></div>
+              </div>
+            `,
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.tooltip-content').text()).toBe('Save')
+    expect(wrapper.find('[aria-label="Save"]').exists()).toBe(true)
+  })
+
+  it('does not wrap in tooltip when tooltip is absent', () => {
+    const wrapper = mount(Button, {
+      props: { icon: 'check' },
+      global: {
+        stubs: {
+          XIcon: true,
+          XLoader: true,
+          XTooltip: {
+            template: '<div class="tooltip-stub"><slot /></div>',
+          },
+        },
+      },
+    })
+
+    expect(wrapper.find('.tooltip-stub').exists()).toBe(false)
+  })
 })

package/src/components/button/__tests__/ ButtonGroup.spec.ts

@@ -1,6 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { h, defineComponent } from 'vue'
 import ButtonGroup from '../ButtonGroup.vue'
+import Button from '../Button.vue'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
 
 describe('ButtonGroup', () => {
   it('renders without errors', () => {
@@ -8,4 +12,32 @@ describe('ButtonGroup', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('applies end radius to the last button even when wrapped', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(ButtonGroup, null, {
+          default: () => [
+            h(Button, null, () => 'Add New'),
+            h('div', { class: 'wrapper' }, [h(Button, { icon: 'chevron-down' })]),
+          ],
+        })
+      },
+    })
+
+    const wrapper = mount(Wrapper, {
+      global: {
+        provide: {
+          [injectThemeKey as symbol]: BaseTheme,
+        },
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons[0].classes().some((c) => c.includes('rounded-s'))).toBe(true)
+    expect(buttons[1].classes().some((c) => c.includes('rounded-e'))).toBe(true)
+  })
 })

package/src/components/button/theme/Button.base.theme.ts

@@ -1,4 +1,6 @@
 import type { ButtonTheme } from '../Button.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
+import { buttonGroupRadiusClasses } from '../../../common/buttonGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -6,10 +8,16 @@ const theme: ButtonTheme = {
       const classes = ['relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0']
 
       // radius
-      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+      if (data.isInsideInputGroup) {
+        classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
+      } else if (data.isButtonGroup) {
+        classes.push(...buttonGroupRadiusClasses(data.buttonGroupPosition, data.buttonGroupRounded))
+      } else {
+        classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+      }
 
       // shadow
-      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-sm')
+      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-xs')
 
       // size
       if (props.size === 'xs') classes.push(slots.default ? `py-1 text-xs ${props.icon ? 'px-2' : 'px-2'}` : 'leading-none p-1')

package/src/components/button/theme/Button.carbon.theme.ts

@@ -1,4 +1,6 @@
 import type { ButtonTheme } from '../Button.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
+import { buttonGroupRadiusClasses } from '../../../common/buttonGroupRadius'
 
 const theme: ButtonTheme = {
   classes: {
@@ -6,8 +8,13 @@ const theme: ButtonTheme = {
       const classes = ['relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
 
       // radius
-      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')
-      else classes.push('!rounded-none')
+      if (data.isInsideInputGroup) {
+        classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
+      } else if (data.isButtonGroup) {
+        classes.push(...buttonGroupRadiusClasses(data.buttonGroupPosition, data.buttonGroupRounded).map((c) => `!${c}`))
+      } else if (props.rounded) {
+        classes.push('rounded-full')
+      }
 
       // size
       if (slots.default) {