@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

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

@@ -2,22 +2,22 @@ import { mount } from '@vue/test-utils';
 import RcButton from './RcButton.vue';
 
 describe('rcButton.vue', () => {
-  it('renders with default role', () => {
+  it('renders with default variant', () => {
     const wrapper = mount(RcButton);
     const button = wrapper.find('button');
 
     expect(button.classes()).toContain('btn');
-    expect(button.classes()).toContain('role-primary');
+    expect(button.classes()).toContain('variant-primary');
   });
 
-  it('applies correct role', () => {
+  it('applies correct variant', () => {
     const wrapper = mount(RcButton, { props: { primary: true } });
     const button = wrapper.find('button');
 
-    expect(button.classes()).toContain('role-primary');
+    expect(button.classes()).toContain('variant-primary');
   });
 
-  it('defaults to primary role if multiple roles are provided', () => {
+  it('defaults to primary variant if multiple variants are provided', () => {
     const wrapper = mount(
       RcButton,
       {
@@ -30,10 +30,10 @@ describe('rcButton.vue', () => {
     );
     const button = wrapper.find('button');
 
-    expect(button.classes()).toContain('role-primary');
+    expect(button.classes()).toContain('variant-primary');
   });
 
-  it('defaults to secondary role if both secondary and tertiary roles are provided', () => {
+  it('defaults to secondary variant if both secondary and tertiary variants are provided', () => {
     const wrapper = mount(
       RcButton,
       {
@@ -45,7 +45,7 @@ describe('rcButton.vue', () => {
     );
     const button = wrapper.find('button');
 
-    expect(button.classes()).toContain('role-secondary');
+    expect(button.classes()).toContain('variant-secondary');
   });
 
   it('applies correct size class', () => {
@@ -92,6 +92,50 @@ describe('rcButton.vue', () => {
     const wrapper = mount(RcButton, { props: { ghost: true } });
     const button = wrapper.find('button');
 
-    expect(button.classes()).toContain('role-ghost');
+    expect(button.classes()).toContain('variant-ghost');
+  });
+
+  describe('variant prop', () => {
+    it('applies variant-primary class when variant="primary"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'primary' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-primary');
+    });
+
+    it('applies variant-secondary class when variant="secondary"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'secondary' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-secondary');
+    });
+
+    it('applies variant-tertiary class when variant="tertiary"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'tertiary' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-tertiary');
+    });
+
+    it('applies variant-link class when variant="link"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'link' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-link');
+    });
+
+    it('applies variant-multi-action class when variant="multiAction"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'multiAction' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-multi-action');
+    });
+
+    it('applies variant-ghost class when variant="ghost"', () => {
+      const wrapper = mount(RcButton, { props: { variant: 'ghost' } });
+      const button = wrapper.find('button');
+
+      expect(button.classes()).toContain('variant-ghost');
+    });
   });
 });

package/rancher-components/RcButton/RcButton.vue

@@ -5,36 +5,82 @@
  *
  * Example:
  *
- * <rc-button primary @click="doAction">Perform an Action</rc-button>
+ * <rc-button variant="primary" @click="doAction">Perform an Action</rc-button>
  */
 import { computed, ref } from 'vue';
-import { ButtonRoleProps, ButtonSizeProps } from './types';
-
-const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [
-  { role: 'primary', className: 'role-primary' },
-  { role: 'secondary', className: 'role-secondary' },
-  { role: 'tertiary', className: 'role-tertiary' },
-  { role: 'link', className: 'role-link' },
-  { role: 'multiAction', className: 'role-multi-action' },
-  { role: 'ghost', className: 'role-ghost' },
+import {
+  ButtonVariantProps, ButtonSizeProps, ButtonVariantNewProps, ButtonSizeNewProps, ButtonSize,
+  IconProps
+} from './types';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+
+const buttonVariants: { variant: keyof ButtonVariantProps, className: string }[] = [
+  { variant: 'primary', className: 'variant-primary' },
+  { variant: 'secondary', className: 'variant-secondary' },
+  { variant: 'tertiary', className: 'variant-tertiary' },
+  { variant: 'link', className: 'variant-link' },
+  { variant: 'multiAction', className: 'variant-multi-action' },
+  { variant: 'ghost', className: 'variant-ghost' },
 ];
 
 const buttonSizes: { size: keyof ButtonSizeProps, className: string }[] = [
   { size: 'small', className: 'btn-sm' },
 ];
 
-const props = defineProps<ButtonRoleProps & ButtonSizeProps>();
+const buttonSizesNew: { size: ButtonSize, className: string }[] = [
+  { size: 'small', className: 'btn-small' },
+  { size: 'medium', className: 'btn-medium' },
+  { size: 'large', className: 'btn-large' },
+];
 
-const buttonClass = computed(() => {
-  const activeRole = buttonRoles.find(({ role }) => props[role]);
-  const isButtonSmall = buttonSizes.some(({ size }) => props[size]);
+const props = withDefaults(defineProps<ButtonVariantProps & ButtonSizeProps & ButtonVariantNewProps & ButtonSizeNewProps & IconProps>(), { size: 'medium' });
 
-  return {
-    btn: true,
+const activeVariantClassName = computed(() => {
+  if (props.variant === 'multiAction' || props.multiAction) {
+    console.warn('[RcButton] The "multiAction" variant is deprecated and will be removed in a future version.'); // eslint-disable-line no-console
+  }
+
+  const activeVariant = buttonVariants.find(({ variant }) => props[variant]);
+
+  if (activeVariant) {
+    console.warn( // eslint-disable-line no-console
+      `[RcButton] The "${ activeVariant.variant }" prop is deprecated and will be removed in a future version. ` +
+      `Please use variant="${ activeVariant.variant }" instead.`
+    );
+
+    return activeVariant.className;
+  } else {
+    const variantConfig = buttonVariants.find(({ variant }) => variant === props.variant);
+
+    return variantConfig?.className || 'variant-primary';
+  }
+});
+
+const activeSizeClassName = computed(() => {
+  const activeSize = buttonSizes.find(({ size }) => props[size]);
+
+  if (activeSize) {
+    /* eslint-disable no-console */
+    console.warn(
+      `[RcButton] The "${ activeSize.size }" prop is deprecated and will be removed in a future version. ` +
+      `Please use size="${ activeSize.size }" instead.`
+    );
+    /* eslint-enable no-console */
 
-    [activeRole?.className || 'role-primary']: true,
+    return activeSize.className;
+  } else {
+    const sizeConfig = buttonSizesNew.find(({ size }) => size === props.size);
+
+    return sizeConfig?.className || '';
+  }
+});
 
-    'btn-sm': isButtonSmall,
+const buttonClass = computed(() => {
+  return {
+    'rc-button':                    true,
+    btn:                            true,
+    [activeVariantClassName.value]: true,
+    [activeSizeClassName.value]:    !!activeSizeClassName.value,
   };
 });
 
@@ -53,33 +99,142 @@ defineExpose({ focus });
     role="button"
     :class="{ ...buttonClass }"
   >
-    <slot name="before">
-      <!-- Empty Content -->
+    <slot
+      v-if="$slots.before || props.leftIcon"
+      name="before"
+    >
+      <RcIcon
+        v-if="props.leftIcon"
+        class="left-icon"
+        :type="props.leftIcon"
+        size="inherit"
+      />
     </slot>
     <slot>
       <!-- Empty Content -->
     </slot>
-    <slot name="after">
-      <!-- Empty Content -->
+    <slot
+      v-if="$slots.after || props.rightIcon"
+      name="after"
+    >
+      <RcIcon
+        v-if="props.rightIcon"
+        class="right-icon"
+        :type="props.rightIcon"
+        size="inherit"
+      />
     </slot>
   </button>
 </template>
 
 <style lang="scss" scoped>
 button {
-  &.role-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // Much of the styling in here came from _button.scss. Because we're making changes from role to variant and we don't want to impact existing use cases we're pulling in some of these styles. We should in the long run deprecate that file.
+  // Variant styles
+  &.variant-primary {
+    background: var(--primary);
+    color: var(--primary-text);
+
+    &:hover, &._hover {
+      background-color: var(--primary-hover-bg);
+      color: var(--primary-text);
+    }
+
     &:focus, &.focused {
+      background-color: var(--primary-hover-bg);
+      color: var(--primary-text);
+    }
+
+    &:focus-visible {
       @include focus-outline;
-      outline-offset: -2px;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      background: var(--primary);
+      color: var(--primary-text);
+      opacity: 0.5;
+    }
+  }
+
+  &.variant-secondary {
+    background: var(--secondary, transparent);
+    color: var(--on-secondary, var(--primary));
+    border: solid 1px var(--secondary-border, var(--primary));
+
+    &:hover, &._hover {
+      background: var(--secondary-hover, transparent);
+      color: var(--on-secondary, var(--lightest));
+    }
+
+    &:focus, &.focused {
+      background-color: var(--secondary-hover, var(--primary-hover-bg));
+      color: var(--on-secondary, var(--primary-text));
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
     }
+  }
+
+  &.variant-tertiary {
+    background: var(--tertiary, var(--accent-btn));
+    color: var(--on-tertiary, var(--primary));
+    border: solid 1px var(--tertiary-border, var(--primary));
 
     &:hover {
+      background: var(--tertiary-hover, var(--accent-btn));
+      color: var(--on-tertiary-hover, var(--lightest));
+    }
+
+    &:focus, &.focused {
+      background-color: var(--tertiary-hover, var(--primary-hover-bg));
+      color: var(--on-tertiary, var(--primary-text));
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
+  }
+
+  &.variant-link {
+    background: transparent;
+    color: var(--link);
+
+    &:hover, &._hover {
+      color: var(--lightest);
       background-color: var(--accent-btn);
       box-shadow: none;
     }
+
+    &:focus, &.focused {
+      @include focus-outline;
+      outline-offset: -2px;
+      background: transparent;
+      color: var(--link);
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 
-  &.role-ghost {
+  &.variant-multi-action {
+    background: var(--accent-btn);
+    border: solid thin var(--primary);
+    color: var(--primary);
+    border-radius: 2px;
+  }
+
+  &.variant-ghost {
     padding: 0;
     background-color: transparent;
 
@@ -93,4 +248,41 @@ button {
       outline-offset: 0;
     }
   }
+
+  // Size styles
+  &.btn-small {
+    //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
+    &, &:not(.btn-sm) {
+      line-height: 15px;
+      font-size: 12px;
+      min-height: 24px;
+
+      padding: 0 8px;
+      gap: 8px;
+    }
+  }
+
+  &.btn-medium {
+    //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
+    &, &:not(.btn-sm) {
+      line-height: 18px;
+      font-size: 14px;
+      min-height: 32px;
+
+      padding: 0 12px;
+      gap: 8px;
+    }
+  }
+
+  &.btn-large {
+    // This is the default size brought by the global button styling
+    &, &:not(.btn-sm) {
+      line-height: 20px;
+      font-size: 16px;
+      min-height: 40px;
+
+      padding: 0 16px;
+      gap: 12px;
+    }
+  }
 }</style>

package/rancher-components/RcButton/types.ts

@@ -1,18 +1,44 @@
+import { RcIconType } from '@components/RcIcon/types';
+
 // TODO: 13211 Investigate why `InstanceType<typeof RcButton>` fails prod builds
 // export type RcButtonType = InstanceType<typeof RcButton>
 export type RcButtonType = {
   focus: () => void;
 }
 
-export type ButtonRoleProps = {
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link' | 'multiAction' | 'ghost';
+
+export type ButtonVariantNewProps = {
+  variant?: ButtonVariant;
+}
+
+/**
+ * @deprecated Use the `variant` property instead. These boolean props will be removed in a future version.
+ */
+export type ButtonVariantProps = {
   primary?: boolean;
   secondary?: boolean;
   tertiary?: boolean;
   link?: boolean;
   multiAction?: boolean;
   ghost?: boolean;
+
 }
 
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export type ButtonSizeNewProps = {
+  size?: ButtonSize;
+}
+
+/**
+ * @deprecated Use the `size` property instead. The `small` boolean prop will be removed in a future version.
+ */
 export type ButtonSizeProps = {
   small?: boolean;
 }
+
+export type IconProps = {
+  leftIcon?: RcIconType;
+  rightIcon?: RcIconType;
+}

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -9,8 +9,8 @@ import { RcDropdownMenuComponentProps, DropdownOption } from './types';
 import IconOrSvg from '@shell/components/IconOrSvg';
 
 withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
-  buttonRole: 'primary',
-  buttonSize: undefined,
+  buttonVariant: 'primary',
+  buttonSize:    undefined,
 });
 
 const emit = defineEmits(['update:open', 'select']);
@@ -26,8 +26,8 @@ const hasOptions = (options: DropdownOption[]) => {
     @update:open="(e: boolean) => emit('update:open', e)"
   >
     <rc-dropdown-trigger
-      :[buttonRole]="true"
-      :[buttonSize]="true"
+      :variant="buttonVariant"
+      :size="buttonSize"
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >

package/rancher-components/RcDropdown/types.ts

@@ -1,6 +1,6 @@
 import { Ref, ref } from 'vue';
 import type { RcButtonType } from '@components/RcButton';
-import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
+import { ButtonVariant, ButtonSize } from '@components/RcButton/types';
 
 export type DropdownContext = {
   handleKeydown: () => void;
@@ -41,8 +41,8 @@ export type DropdownOption = {
 
 export type RcDropdownMenuComponentProps = {
   options: DropdownOption[];
-  buttonRole?: keyof ButtonRoleProps;
-  buttonSize?: keyof ButtonSizeProps;
+  buttonVariant?: ButtonVariant;
+  buttonSize?: ButtonSize;
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;

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

@@ -48,4 +48,46 @@ describe('rcIcon.vue', () => {
 
     expect(wrapper.attributes('aria-hidden')).toBe('true');
   });
+
+  it('defaults the color to "inherit" when the status prop is omitted', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).toBe('inherit');
+  });
+
+  it('uses "inherit" color when status is explicitly set to "inherit"', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:   'medium',
+        type:   'search',
+        status: 'inherit'
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).toBe('inherit');
+  });
+
+  it('uses appropriate color when status is provided with a specific value', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:   'medium',
+        type:   'search',
+        status: 'success'
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).not.toBe('inherit');
+    expect(vm.color).toContain('--rc-success');
+  });
 });

package/rancher-components/RcIcon/RcIcon.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { RcIconProps, RcIconType, RcIconSize } from '@components/RcIcon/types';
+import { RcIconSizeToCSS, RcIconTypeToClass, RcIconProps } from './types';
 import { computed } from 'vue';
 import { useStatusColors } from '@components/utils/status';
-const props = withDefaults(defineProps<RcIconProps>(), { size: 'small', ariaHidden: true });
+
+const props = withDefaults(defineProps<RcIconProps>(), {
+  size: 'small', ariaHidden: true, status: 'inherit'
+});
 const fontSize = computed(() => {
-  return RcIconSize[props.size];
+  return RcIconSizeToCSS[props.size];
 });
 
 const iconClass = computed(() => {
-  return RcIconType[props.type];
+  return RcIconTypeToClass[props.type];
 });
 
 const status = computed(() => {
@@ -19,10 +22,10 @@ const status = computed(() => {
   return 'none';
 });
 
-const { textColor } = useStatusColors({ status: status.value }, 'outlined');
+const { textColor } = useStatusColors(status, 'outlined');
 
 const color = computed(() => {
-  if (props.status === 'inherit') {
+  if (props.status === undefined || props.status === 'inherit') {
     return 'inherit';
   }
 

package/rancher-components/RcIcon/types.ts

@@ -1,6 +1,6 @@
-import { Status } from '../utils/status';
+import { Status } from '@components/utils/status';
 
-export const RcIconType = {
+export const RcIconTypeToClass = {
   actions:                 'icon-actions',
   ai:                      'icon-ai',
   'alert-alt':             'icon-alert-alt',
@@ -145,16 +145,20 @@ export const RcIconType = {
   windows:                 'icon-windows',
 };
 
-export const RcIconSize = {
-  large:  '25px',
-  medium: '18px',
-  small:  '14px',
-  none:   undefined
+export const RcIconSizeToCSS = {
+  large:   '25px',
+  medium:  '18px',
+  small:   '14px',
+  inherit: 'inherit'
 };
 
+export type RcIconSize = keyof typeof RcIconSizeToCSS;
+
+export type RcIconType = keyof typeof RcIconTypeToClass;
+
 export interface RcIconProps {
-  size: keyof typeof RcIconSize;
-  type: keyof typeof RcIconType;
+  type: RcIconType;
+  size?: RcIconSize;
   ariaHidden?: boolean;
   status?: Status | 'inherit';
 }

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

@@ -187,7 +187,7 @@ describe('rcItemCard', () => {
     expect(icon.attributes('style')).toContain('color: red');
   });
 
-  it('emits custom action events correctly', async() => {
+  it('emits action-invoked event when action is triggered', async() => {
     const wrapper = mount(RcItemCard, {
       props: {
         ...baseProps,
@@ -198,12 +198,22 @@ describe('rcItemCard', () => {
       }
     });
 
-    const listeners = wrapper.vm.$.setupState.actionListeners;
+    // Simulate the action-invoked event being emitted from ActionMenu
+    const actionMenu = wrapper.findComponent({ name: 'ActionMenuShell' });
 
-    listeners.myActionA('payload-1');
-    listeners.myActionB('payload-2');
+    expect(actionMenu.exists()).toBe(true);
 
-    expect(wrapper.emitted('myActionA')?.[0]).toStrictEqual(['payload-1']);
-    expect(wrapper.emitted('myActionB')?.[0]).toStrictEqual(['payload-2']);
+    // Emit action-invoked event with payload
+    const payload = {
+      action: 'myActionA', actionData: { action: 'myActionA', label: 'Edit' }, event: new MouseEvent('click')
+    };
+
+    actionMenu.vm.$emit('action-invoked', payload);
+    await wrapper.vm.$nextTick();
+
+    const emitted = wrapper.emitted('action-invoked');
+
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0]).toStrictEqual([payload]);
   });
 });