@rancher/shell 3.0.9 → 3.0.11

package/rancher-components/RcButtonSplit/RcButtonSplit.test.ts

@@ -0,0 +1,253 @@
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import RcButtonSplit from './RcButtonSplit.vue';
+import { ButtonVariant, ButtonSize } from '@components/RcButton/types';
+
+// v-dropdown is provided by floating-vue and must be mocked in unit tests.
+// The default slot is the trigger anchor; the popper slot is the dropdown content.
+const vDropdownMock = defineComponent({
+  template: `
+    <div>
+      <slot />
+      <slot name="popper" />
+    </div>
+  `,
+});
+
+const globalConfig = { global: { components: { 'v-dropdown': vDropdownMock } } };
+
+// RcButton and RcDropdownTrigger both use single-root attribute inheritance, so
+// the class added to the component falls through to the rendered <button> element.
+// Selectors like '.rc-button-split-action' refer directly to the <button> element.
+
+describe('rcButtonSplit.vue', () => {
+  it('renders the main action button', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').exists()).toBe(true);
+  });
+
+  it('renders the dropdown trigger', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-trigger').exists()).toBe(true);
+  });
+
+  it('emits click when the main action button is clicked', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.find('.rc-button-split-action').trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
+    expect(wrapper.emitted('click')![0][0]).toBeInstanceOf(MouseEvent);
+  });
+
+  it('does not emit click when the dropdown trigger is clicked', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.find('.rc-button-split-trigger').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeUndefined();
+  });
+
+  describe('variant prop', () => {
+    it.each([
+      ['primary', 'variant-primary'],
+      ['secondary', 'variant-secondary'],
+      ['tertiary', 'variant-tertiary'],
+    ] as [ButtonVariant, string][])('applies %s variant class to the action button', (variant, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { variant } });
+
+      expect(wrapper.find('.rc-button-split-action').classes()).toContain(className);
+    });
+
+    it.each([
+      ['primary', 'variant-primary'],
+      ['secondary', 'variant-secondary'],
+      ['tertiary', 'variant-tertiary'],
+    ] as [ButtonVariant, string][])('applies %s variant class to the dropdown trigger button', (variant, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { variant } });
+
+      expect(wrapper.find('.rc-button-split-trigger').classes()).toContain(className);
+    });
+  });
+
+  describe('size prop', () => {
+    it.each([
+      ['small', 'btn-small'],
+      ['medium', 'btn-medium'],
+      ['large', 'btn-large'],
+    ] as [ButtonSize, string][])('applies %s size class to the action button', (size, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { size } });
+
+      expect(wrapper.find('.rc-button-split-action').classes()).toContain(className);
+    });
+
+    it.each([
+      ['small', 'btn-small'],
+      ['medium', 'btn-medium'],
+      ['large', 'btn-large'],
+    ] as [ButtonSize, string][])('applies %s size class to the dropdown trigger button', (size, className) => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { size } });
+
+      expect(wrapper.find('.rc-button-split-trigger').classes()).toContain(className);
+    });
+  });
+
+  describe('slots', () => {
+    it('renders default slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: { default: 'Save' },
+      });
+
+      expect(wrapper.find('.rc-button-split-action').text()).toContain('Save');
+    });
+
+    it('renders before slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: {
+          default: 'Save',
+          before:  '<span class="before-content">Before</span>',
+        },
+      });
+
+      expect(wrapper.find('.rc-button-split-action .before-content').exists()).toBe(true);
+    });
+
+    it('renders after slot content in the main button', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: {
+          default: 'Save',
+          after:   '<span class="after-content">After</span>',
+        },
+      });
+
+      expect(wrapper.find('.rc-button-split-action .after-content').exists()).toBe(true);
+    });
+
+    it('renders dropdownCollection slot content', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        slots: { dropdownCollection: '<div class="dropdown-item-test">Item 1</div>' },
+      });
+
+      expect(wrapper.find('.dropdown-item-test').exists()).toBe(true);
+      expect(wrapper.find('.dropdown-item-test').text()).toStrictEqual('Item 1');
+    });
+  });
+
+  it('dropdown trigger has aria-haspopup="menu" attribute', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-trigger').attributes('aria-haspopup')).toBe('menu');
+  });
+
+  it('emits update:open when dropdown open state changes', async() => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    await wrapper.findComponent({ name: 'RcDropdown' }).vm.$emit('update:open', true);
+
+    expect(wrapper.emitted('update:open')).toHaveLength(1);
+    expect(wrapper.emitted('update:open')![0]).toStrictEqual([true]);
+  });
+
+  it('applies default variant "primary" when no variant is provided', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').classes()).toContain('variant-primary');
+  });
+
+  it('applies default size "medium" when no size is provided', () => {
+    const wrapper = mount(RcButtonSplit, globalConfig);
+
+    expect(wrapper.find('.rc-button-split-action').classes()).toContain('btn-medium');
+  });
+
+  describe('aria label props', () => {
+    it('ariaLabel is applied to the action button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabel: 'Save document' } });
+
+      expect(wrapper.find('.rc-button-split-action').attributes('aria-label')).toBe('Save document');
+    });
+
+    it('ariaLabel is absent from the trigger button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabel: 'Save document' } });
+
+      expect(wrapper.find('.rc-button-split-trigger').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('ariaLabelTrigger is applied to the trigger button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelTrigger: 'More save options' } });
+
+      expect(wrapper.find('.rc-button-split-trigger').attributes('aria-label')).toBe('More save options');
+    });
+
+    it('ariaLabelTrigger is absent from the action button', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelTrigger: 'More save options' } });
+
+      expect(wrapper.find('.rc-button-split-action').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('ariaLabelDropdown is forwarded to RcDropdown', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { ariaLabelDropdown: 'Save actions' } });
+
+      expect(wrapper.findComponent({ name: 'RcDropdown' }).props('ariaLabel')).toBe('Save actions');
+    });
+  });
+
+  describe('items prop', () => {
+    const items = [
+      { id: 'draft', label: 'Save as Draft' },
+      { id: 'template', label: 'Save as Template' },
+      { id: 'discard', label: 'Discard Changes' },
+    ];
+
+    it('renders an RcDropdownItem for each entry in items', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      const dropdownItems = wrapper.findAllComponents({ name: 'RcDropdownItem' });
+
+      expect(dropdownItems).toHaveLength(3);
+    });
+
+    it('renders each item\'s label text', () => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      const dropdownItems = wrapper.findAllComponents({ name: 'RcDropdownItem' });
+
+      expect(dropdownItems[0].text()).toContain('Save as Draft');
+      expect(dropdownItems[1].text()).toContain('Save as Template');
+      expect(dropdownItems[2].text()).toContain('Discard Changes');
+    });
+
+    it('emits select with the item id when a prop item is clicked', async() => {
+      const wrapper = mount(RcButtonSplit, { ...globalConfig, props: { items } });
+
+      await wrapper.findAllComponents({ name: 'RcDropdownItem' })[0].trigger('click');
+
+      expect(wrapper.emitted('select')).toHaveLength(1);
+      expect(wrapper.emitted('select')![0]).toStrictEqual(['draft']);
+    });
+
+    it('does not emit select when no items prop is provided', async() => {
+      const wrapper = mount(RcButtonSplit, globalConfig);
+
+      expect(wrapper.emitted('select')).toBeUndefined();
+    });
+
+    it('renders both prop items and dropdownCollection slot content when both are supplied', () => {
+      const wrapper = mount(RcButtonSplit, {
+        ...globalConfig,
+        props: { items: [{ id: 'draft', label: 'Save as Draft' }] },
+        slots: { dropdownCollection: '<div class="slot-item">Slot Item</div>' },
+      });
+
+      expect(wrapper.findAllComponents({ name: 'RcDropdownItem' })).toHaveLength(1);
+      expect(wrapper.find('.slot-item').exists()).toBe(true);
+      expect(wrapper.find('.slot-item').text()).toStrictEqual('Slot Item');
+    });
+  });
+});

package/rancher-components/RcButtonSplit/RcButtonSplit.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+/**
+ * A split button that combines a primary action button with a dropdown trigger
+ * for secondary actions.
+ *
+ * Example:
+ *
+ *  <rc-button-split variant="primary" @click="doAction" @update:open="onOpen">
+ *    Save
+ *    <template #dropdownCollection>
+ *      <rc-dropdown-item @click="doOtherAction">Save as Draft</rc-dropdown-item>
+ *    </template>
+ *  </rc-button-split>
+ */
+import { RcButton } from '@components/RcButton';
+import { RcDropdown, RcDropdownItem, RcDropdownTrigger } from '@components/RcDropdown';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { ButtonVariant, ButtonSize, IconProps } from '@components/RcButton/types';
+import type { Placement } from 'floating-vue';
+
+type RcButtonSplitVariant = Exclude<ButtonVariant, 'link' | 'ghost' | 'multiAction'>;
+
+type RcButtonSplitItem = {
+  id: string;
+  label: string;
+};
+
+type RcButtonSplitProps = {
+  disabled?: boolean;
+  variant?: RcButtonSplitVariant;
+  size?: ButtonSize;
+  ariaLabel?: string;
+  ariaLabelTrigger?: string;
+  ariaLabelDropdown?: string;
+  placement?: Placement;
+  distance?: number;
+  items?: RcButtonSplitItem[];
+} & IconProps;
+
+withDefaults(
+  defineProps<RcButtonSplitProps>(),
+  {
+    disabled:          false,
+    variant:           'primary',
+    size:              'medium',
+    ariaLabel:         undefined,
+    ariaLabelTrigger:  undefined,
+    ariaLabelDropdown: undefined,
+    placement:         'bottom-end',
+    distance:          undefined,
+    items:             undefined,
+  });
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  'update:open': [open: boolean];
+  select: [id: string];
+}>();
+</script>
+
+<template>
+  <RcDropdown
+    :aria-label="ariaLabelDropdown"
+    :placement="placement"
+    :distance="distance"
+    @update:open="emit('update:open', $event)"
+  >
+    <div class="rc-button-split">
+      <RcButton
+        class="rc-button-split-action"
+        :aria-label="ariaLabel"
+        :disabled="disabled"
+        :variant="variant"
+        :size="size"
+        :left-icon="leftIcon"
+        :right-icon="rightIcon"
+        @click="emit('click', $event)"
+      >
+        <template
+          v-if="$slots.before"
+          #before
+        >
+          <slot name="before" />
+        </template>
+        <slot />
+        <template
+          v-if="$slots.after"
+          #after
+        >
+          <slot name="after" />
+        </template>
+      </RcButton>
+
+      <RcDropdownTrigger
+        class="rc-button-split-trigger"
+        :aria-label="ariaLabelTrigger"
+        :disabled="disabled"
+        :variant="variant"
+        :size="size"
+      >
+        <RcIcon
+          type="chevron-down"
+          size="inherit"
+        />
+      </RcDropdownTrigger>
+    </div>
+
+    <template #dropdownCollection>
+      <RcDropdownItem
+        v-for="item in items"
+        :key="item.id"
+        @click="emit('select', item.id)"
+      >
+        {{ item.label }}
+      </RcDropdownItem>
+      <slot name="dropdownCollection" />
+    </template>
+  </RcDropdown>
+</template>
+
+<style lang="scss" scoped>
+.rc-button-split {
+  display: inline-flex;
+
+  // Round only the outer left edge of the main button
+  :deep(.rc-button-split-action) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // Round only the outer right edge of the trigger button; narrow padding
+  :deep(button.rc-button-split-trigger) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    min-width: unset;
+  }
+
+  :deep(button.btn-small.rc-button-split-trigger) {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  // Primary: semi-transparent right border as separator
+  :deep(.rc-button-split-trigger.variant-primary),
+  :deep(.rc-button-split-trigger.variant-secondary),
+  :deep(.rc-button-split-trigger.variant-tertiary) {
+    border-left: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  // Link/Ghost: subtle separator
+  :deep(.rc-button-split-action.variant-link),
+  :deep(.rc-button-split-action.variant-ghost) {
+    border-right: 1px solid var(--border);
+  }
+}
+</style>

package/rancher-components/RcButtonSplit/index.ts

@@ -0,0 +1 @@
+export { default as RcButtonSplit } from './RcButtonSplit.vue';

package/rancher-components/RcIcon/types.ts

@@ -148,8 +148,8 @@ export const RcIconTypeToClass = {
 export const RcIconSizeToCSS = {
   xxlarge: '40px',
   xlarge:  '32px',
-  large:   '25px',
-  medium:  '18px',
+  large:   '24px',
+  medium:  '16px',
   small:   '14px',
   inherit: 'inherit'
 };