@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
-import { defineComponent, inject, computed, watch } from 'vue';
-import { useField } from 'vee-validate';
+import { defineComponent, inject, computed, toRef } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
@@ -9,6 +8,7 @@ import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
 import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
 import { useCompactInput } from '@shell/composables/useCompactInput';
+import { useVeeValidateField } from '@shell/composables/useVeeValidateField';
 
 interface NonReactiveProps {
   onInput: (event: Event) => void | ((event: Event) => void);
@@ -142,56 +142,11 @@ export default defineComponent({
 
     const onInput = inject('onInput', provideProps.onInput);
 
-    // Stable fallback name so useField is always called unconditionally.
-    // When no name prop is given the field won't match any form-schema path.
-    const standaloneFieldId = `__field__${ generateRandomAlphaString(12) }`;
-    const veeFieldName = computed(() => props.name || standaloneFieldId);
-
-    // Pass existing rules to vee-validate so field-level validation still runs
-    const veeValidator = (value: unknown): boolean | string => {
-      // Return true when name is absent to avoid duplicating
-      // useLabeledFormElement validation
-      if (!props.name) {
-        return true;
-      }
-      for (const rule of props.rules as Array<(v: unknown) => string | undefined>) {
-        const msg = rule(value);
-
-        if (msg) {
-          return msg;
-        }
-      }
-
-      return true;
-    };
-
-    const {
-      errorMessage: veeError,
-      handleBlur:   veeHandleBlur,
-      validate:     veeValidate,
-      value:        veeValue,
-    } = useField<string | number | Record<string, unknown>>(
-      veeFieldName,
-      veeValidator,
-      {
-        initialValue:          props.value as string | number,
-        validateOnValueUpdate: true,
-      }
-    );
-
-    // Keep vee-validate's internal value in sync with the controlled prop value.
-    watch(() => props.value, (v) => {
-      if (veeValue.value !== v) {
-        veeValue.value = v as string | number;
-      }
-    });
-
-    const effectiveValidationMessage = computed(() => {
-      if (props.name && veeError.value) {
-        return veeError.value;
-      }
-
-      return validationMessage.value;
+    const { effectiveValidationMessage, veeHandleBlur, veeValidate } = useVeeValidateField({
+      name:  toRef(props, 'name'),
+      rules: toRef(props, 'rules'),
+      value: toRef(props, 'value'),
+      validationMessage,
     });
 
     const effectiveStatus = computed(() => props.status);

package/rancher-components/Form/Radio/RadioButton.vue

@@ -80,6 +80,14 @@ export default defineComponent({
       default: false
     },
 
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * Radio option Id - used to link to aria-activedescendant
      * when using inside of the context of a Radio Group
@@ -189,7 +197,11 @@ export default defineComponent({
     />
     <div class="labeling">
       <label
-        :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
+        class="radio-label m-0"
+        :class="{
+          'text-muted': muteLabel,
+          'body-text-color': useBodyTextColor
+        }"
         :for="name"
       >
         <slot
@@ -314,6 +326,10 @@ $fontColor: var(--input-label);
     flex-direction: column;
 
     margin: 3px 10px 0px 5px;
+
+    .body-text-color {
+      color: var(--body-text);
+    }
   }
 }
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -12,6 +12,7 @@ interface Option {
 }
 
 export default defineComponent({
+  name:       'RadioGroup',
   components: { RadioButton },
   props:      {
     /**
@@ -102,6 +103,14 @@ export default defineComponent({
     row: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -302,6 +311,7 @@ export default defineComponent({
             :disabled="isDisabled"
             :data-testid="`radio-button-${i}`"
             :mode="mode"
+            :use-body-text-color="useBodyTextColor"
             :prevent-focus-on-radio-groups="true"
             @update:value="$emit('update:value', $event)"
           />

package/rancher-components/Pill/RcTag/RcTag.vue

@@ -28,7 +28,8 @@ const emit = defineEmits(['close']);
 <style lang="scss" scoped>
 .rc-tag {
     display: inline-flex;
-    padding: 1px 8px;
+    min-height: 24px;
+    padding: 2px 8px;
     align-items: center;
     gap: 8px;
 
@@ -41,7 +42,7 @@ const emit = defineEmits(['close']);
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 20px;
     color: var(--body-text);
 
     button {

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

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, RouterLinkStub } from '@vue/test-utils';
 import RcButton from './RcButton.vue';
 
 describe('rcButton.vue', () => {
@@ -138,4 +138,143 @@ describe('rcButton.vue', () => {
       expect(button.classes()).toContain('variant-ghost');
     });
   });
+
+  describe('space key navigation', () => {
+    it('triggers click when Space is pressed on a link button', async() => {
+      const to = { name: 'some-route' };
+      const wrapper = mount(RcButton, {
+        props:  { to },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+      const clickSpy = jest.spyOn(link.element, 'click');
+
+      await link.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).toHaveBeenCalledWith();
+    });
+
+    it('does not manually trigger click when Space is pressed on a regular button', async() => {
+      const wrapper = mount(RcButton);
+      const button = wrapper.find('button');
+      const clickSpy = jest.spyOn(button.element, 'click');
+
+      await button.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('to and href mutual exclusion', () => {
+    it('warns when both "to" and "href" props are provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, {
+        props:  { to: '/foo', href: 'https://example.com' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      expect(warnSpy).toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+
+    it('does not warn when only "to" is provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, {
+        props:  { to: '/foo' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      expect(warnSpy).not.toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+
+    it('does not warn when only "href" is provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(warnSpy).not.toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('href prop', () => {
+    it('renders as an <a> element when "href" prop is provided', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(wrapper.find('a').exists()).toBe(true);
+      expect(wrapper.find('button').exists()).toBe(false);
+    });
+
+    it('sets the href attribute on the rendered anchor', () => {
+      const href = 'https://example.com';
+      const wrapper = mount(RcButton, { props: { href } });
+
+      expect(wrapper.find('a').attributes('href')).toStrictEqual(href);
+    });
+
+    it('sets role="link" when rendered as an anchor', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(wrapper.find('a').attributes('role')).toStrictEqual('link');
+    });
+
+    it('applies button classes when rendered as an anchor', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com', variant: 'secondary' } });
+      const anchor = wrapper.find('a');
+
+      expect(anchor.classes()).toContain('rc-button');
+      expect(anchor.classes()).toContain('btn');
+      expect(anchor.classes()).toContain('variant-secondary');
+    });
+
+    it('triggers click when Space is pressed on an anchor', async() => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+      const anchor = wrapper.find('a');
+      const clickSpy = jest.spyOn(anchor.element, 'click');
+
+      await anchor.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('to prop', () => {
+    it('renders as a <button> when no "to" prop is provided', () => {
+      const wrapper = mount(RcButton);
+
+      expect(wrapper.find('button').exists()).toBe(true);
+      expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    });
+
+    it('renders as a RouterLink when "to" prop is provided', () => {
+      const to = { name: 'some-route' };
+      const wrapper = mount(RcButton, {
+        props:  { to },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+
+      expect(link.exists()).toBe(true);
+      expect(wrapper.find('button').exists()).toBe(false);
+      expect(link.props('to')).toStrictEqual(to);
+    });
+
+    it('applies button classes when rendered as a RouterLink', () => {
+      const wrapper = mount(RcButton, {
+        props:  { to: '/foo', variant: 'secondary' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+
+      expect(link.classes()).toContain('rc-button');
+      expect(link.classes()).toContain('btn');
+      expect(link.classes()).toContain('variant-secondary');
+    });
+  });
 });

package/rancher-components/RcButton/RcButton.vue

@@ -7,10 +7,15 @@
  *
  * <rc-button variant="primary" @click="doAction">Perform an Action</rc-button>
  */
-import { computed, ref } from 'vue';
+import { computed, ref, resolveComponent, watchEffect } from 'vue';
 import {
-  ButtonVariantProps, ButtonSizeProps, ButtonVariantNewProps, ButtonSizeNewProps, ButtonSize,
-  IconProps
+  ButtonVariantProps,
+  ButtonSizeProps,
+  ButtonVariantNewProps,
+  ButtonSizeNewProps,
+  ButtonSize,
+  IconProps,
+  NavigationProps,
 } from './types';
 import RcIcon from '@components/RcIcon/RcIcon.vue';
 
@@ -33,7 +38,54 @@ const buttonSizesNew: { size: ButtonSize, className: string }[] = [
   { size: 'large', className: 'btn-large' },
 ];
 
-const props = withDefaults(defineProps<ButtonVariantProps & ButtonSizeProps & ButtonVariantNewProps & ButtonSizeNewProps & IconProps>(), { size: 'medium' });
+const props = withDefaults(
+  defineProps<
+        ButtonVariantProps &
+        ButtonSizeProps &
+        ButtonVariantNewProps &
+        ButtonSizeNewProps &
+        IconProps &
+        NavigationProps
+    >(),
+  {
+    size: 'medium',
+    to:   undefined,
+    href: undefined,
+  }
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  watchEffect(() => {
+    if (props.to && props.href) {
+      console.warn('[RcButton] "to" and "href" are mutually exclusive. Provide only one.'); // eslint-disable-line no-console
+    }
+  });
+}
+
+const tag = computed(() => {
+  if (props.to) {
+    return resolveComponent('RouterLink');
+  }
+  if (props.href) {
+    return 'a';
+  }
+
+  return 'button';
+});
+
+const role = computed(() => (props.to || props.href ? 'link' : 'button'));
+
+const linkProps = computed(() => {
+  if (props.to) {
+    return { to: props.to };
+  }
+
+  if (props.href) {
+    return { href: props.href };
+  }
+
+  return {};
+});
 
 const activeVariantClassName = computed(() => {
   if (props.variant === 'multiAction' || props.multiAction) {
@@ -90,14 +142,34 @@ const focus = () => {
   RcFocusTarget?.value?.focus();
 };
 
+const preventScroll = (event: KeyboardEvent) => {
+  if (tag.value === 'button') {
+    return;
+  }
+
+  event.preventDefault();
+};
+
+const handleSpace = (event: KeyboardEvent) => {
+  if (tag.value === 'button') {
+    return;
+  }
+
+  (event.target as HTMLElement).click();
+};
+
 defineExpose({ focus });
 </script>
 
 <template>
-  <button
+  <component
+    :is="tag"
     ref="RcFocusTarget"
-    role="button"
+    :role="role"
+    v-bind="linkProps"
     :class="{ ...buttonClass }"
+    @keydown.space="preventScroll"
+    @keyup.space="handleSpace"
   >
     <slot
       v-if="$slots.before || props.leftIcon"
@@ -124,15 +196,23 @@ defineExpose({ focus });
         size="inherit"
       />
     </slot>
-  </button>
+  </component>
 </template>
 
 <style lang="scss" scoped>
-button {
+.rc-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
+  // Override global .btn > .icon:not(:only-child) { margin-right: 6px } from _button.scss.
+  // RcButton uses flex gap for spacing instead. The :not(:only-child) clause matches the global
+  // selector so we win on specificity regardless of stylesheet load order; :deep() is needed to
+  // target slotted content.
+  & > :deep(.icon:not(:only-child)) {
+    margin-right: 0;
+  }
+
   // 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 {
@@ -155,9 +235,12 @@ button {
     }
 
     &:disabled {
-      background: var(--primary);
-      color: var(--primary-text);
-      opacity: 0.5;
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -180,6 +263,15 @@ button {
       @include focus-outline;
       outline-offset: 2px;
     }
+
+    &:disabled {
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
+    }
   }
 
   &.variant-tertiary {
@@ -201,6 +293,15 @@ button {
       @include focus-outline;
       outline-offset: 2px;
     }
+
+    &:disabled {
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
+    }
   }
 
   &.variant-link {
@@ -253,11 +354,15 @@ button {
   &.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: 140%;
+      // Unitless ratio chosen so font-size * line-height (12px * 4/3 = 16px)
+      // is a whole pixel value. A fractional computed line-height (e.g. the
+      // previous 140% = 16.8px) shifts text ~1px off-center within the
+      // flex-centered button in Chrome, but not in Firefox.
+      line-height: calc(4 / 3);
       font-size: 12px;
       min-height: 24px;
 
-      padding: 0 8px;
+      padding: var(--rc-button-padding, 0 8px);
       gap: 8px;
     }
   }
@@ -265,11 +370,13 @@ button {
   &.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: 140%;
+      // Unitless ratio chosen so font-size * line-height (14px * 10/7 = 20px)
+      // is a whole pixel value. See note in .btn-small for why this matters.
+      line-height: calc(10 / 7);
       font-size: 14px;
       min-height: 32px;
 
-      padding: 0 12px;
+      padding: var(--rc-button-padding, 0 12px);
       gap: 8px;
     }
   }
@@ -277,11 +384,13 @@ button {
   &.btn-large {
     // This is the default size brought by the global button styling
     &, &:not(.btn-sm) {
-      line-height: 140%;
+      // Unitless ratio chosen so font-size * line-height (16px * 1.5 = 24px)
+      // is a whole pixel value. See note in .btn-small for why this matters.
+      line-height: 1.5;
       font-size: 16px;
       min-height: 40px;
 
-      padding: 0 16px;
+      padding: var(--rc-button-padding, 0 16px);
       gap: 12px;
     }
   }

package/rancher-components/RcButton/types.ts

@@ -1,5 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router';
 import { RcIconType } from '@components/RcIcon/types';
 
+export type NavigationProps = { to?: RouteLocationRaw; href?: string }
+
 // TODO: 13211 Investigate why `InstanceType<typeof RcButton>` fails prod builds
 // export type RcButtonType = InstanceType<typeof RcButton>
 export type RcButtonType = {

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -35,18 +35,20 @@ defineExpose({ focus });
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
-    <template #before>
-      <slot name="before">
-        <!-- Empty Content -->
-      </slot>
+    <template
+      v-if="$slots.before"
+      #before
+    >
+      <slot name="before" />
     </template>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
-    <template #after>
-      <slot name="after">
-        <!-- Empty Content -->
-      </slot>
+    <template
+      v-if="$slots.after"
+      #after
+    >
+      <slot name="after" />
     </template>
   </RcButton>
 </template>

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

@@ -36,6 +36,24 @@ describe('rcItemCard', () => {
     expect(wrapper.findAll(`[data-testid="item-card-header-statuses-status"]`)).toHaveLength(2);
   });
 
+  // Regression: when image.src is falsy, LazyImage must still render so its own
+  // empty-src fallback (generic catalog icon) is shown. Previously the template
+  // was gated by `v-else-if="image.src"` and showed an empty box for missing icons.
+  it.each(['medium', 'small'] as const)('renders LazyImage with an empty src when image.src is falsy (%s variant)', (variant) => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant,
+        image: { src: '', alt: { text: 'Logo' } },
+      }
+    });
+
+    const lazy = wrapper.findComponent({ name: 'LazyImage' });
+
+    expect(lazy.exists()).toBe(true);
+    expect(lazy.props('src')).toBe('');
+  });
+
   it('renders pill only in medium variant', () => {
     const wrapper = mount(RcItemCard, {
       props: {

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -208,7 +208,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                   size="xxlarge"
                 />
               </template>
-              <template v-else-if="image.src">
+              <template v-else>
                 <LazyImage
                   :src="image.src"
                   :alt="imageAlt"
@@ -255,7 +255,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                       size="xlarge"
                     />
                   </template>
-                  <template v-else-if="image.src">
+                  <template v-else>
                     <LazyImage
                       :src="image.src"
                       :alt="imageAlt"