@rancher/shell 3.0.9-rc.6 → 3.0.10

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

@@ -11,27 +11,27 @@ const displayCount = computed(() => props.count < 1000 ? props.count : '999+');
     :class="{[props.type]: true, disabled: props.disabled}"
     data-testid="rc-counter-badge"
   >
-    {{ displayCount }}
+    <span class="count">{{ displayCount }}</span>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .rc-counter-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
-    padding: 1px 8px;
+    padding: 2px 8px;
     align-items: center;
-    gap: 8px;
 
     border-radius: 30px;
     border: 1px solid var(--rc-active-border);
 
-    overflow: hidden;
-    text-overflow: ellipsis;
     font-family: Lato;
-    font-size: 13px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 17px;
     color: var(--body-text);
 
     &.active {

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

@@ -20,17 +20,20 @@ const { backgroundColor, borderColor, textColor } = useStatusColors(status, 'out
 
 <style lang="scss" scoped>
 .rc-status-badge {
+    box-sizing: border-box;
+    height: 21px;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 1px 7px;
+    padding: 2px 7px;
 
     border: 1px solid transparent;
     border-radius: 30px;
 
     font-family: Lato;
     font-size: 12px;
-    line-height: 19px;
+    line-height: 17px;
 
     background-color: v-bind(backgroundColor);
     border-color: v-bind(borderColor);

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'
 };

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -314,7 +314,10 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
           </div>
         </div>
 
-        <slot name="item-card-sub-header" />
+        <slot name="item-card-sub-header">
+          <!-- DIV added to add the gap if the sub-header is not provided -->
+          <div />
+        </slot>
 
         <template v-if="$slots['item-card-content']">
           <slot name="item-card-content">
@@ -407,6 +410,10 @@ $image-medium-box-width: 48px;
     height: 24px;
     color: var(--body-text);
 
+    &.small {
+      height: 32px;
+    }
+
     &-left,
     &-right {
       display: flex;

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

@@ -0,0 +1,323 @@
+import { mount } from '@vue/test-utils';
+import RcSection from './RcSection.vue';
+
+describe('component: RcSection', () => {
+  const defaultProps = {
+    type:       'primary' as const,
+    mode:       'with-header' as const,
+    background: 'primary' as const,
+    expandable: false,
+    title:      'Test title',
+  };
+
+  describe('type prop', () => {
+    it('should apply type-primary class when type is "primary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, type: 'primary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('type-primary');
+    });
+
+    it('should apply type-secondary class when type is "secondary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, type: 'secondary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('type-secondary');
+    });
+  });
+
+  describe('background prop', () => {
+    it('should apply bg-primary class when background is "primary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, background: 'primary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-primary');
+    });
+
+    it('should apply bg-secondary class when background is "secondary"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, background: 'secondary' } });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-secondary');
+    });
+
+    it('should default to "primary" background when no background prop and no parent', () => {
+      const { background: _, ...propsWithoutBg } = defaultProps;
+      const wrapper = mount(RcSection, { props: propsWithoutBg });
+
+      expect(wrapper.find('.rc-section').classes()).toContain('bg-primary');
+    });
+
+    it('should alternate background from parent via provide/inject', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, background: 'primary', expanded: true
+        },
+        slots: {
+          default: {
+            components: { RcSection },
+            template:   '<RcSection type="secondary" mode="with-header" :expandable="false" title="Child" />',
+          },
+        },
+      });
+
+      const childSection = wrapper.findAll('.rc-section')[1];
+
+      expect(childSection.classes()).toContain('bg-secondary');
+    });
+
+    it('should allow explicit background to override the injected alternation', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, background: 'primary', expanded: true
+        },
+        slots: {
+          default: {
+            components: { RcSection },
+            template:   '<RcSection type="secondary" mode="with-header" :expandable="false" background="primary" title="Child" />',
+          },
+        },
+      });
+
+      const childSection = wrapper.findAll('.rc-section')[1];
+
+      expect(childSection.classes()).toContain('bg-primary');
+    });
+  });
+
+  describe('mode prop', () => {
+    it('should render section-header when mode is "with-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'with-header' } });
+
+      expect(wrapper.find('.section-header').exists()).toBe(true);
+    });
+
+    it('should not render section-header when mode is "no-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'no-header' } });
+
+      expect(wrapper.find('.section-header').exists()).toBe(false);
+    });
+
+    it('should apply no-header class to content when mode is "no-header"', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, mode: 'no-header' } });
+
+      expect(wrapper.find('.section-content').classes()).toContain('no-header');
+    });
+  });
+
+  describe('title prop', () => {
+    it('should render the title text', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, title: 'My Section' } });
+
+      expect(wrapper.find('.title').text()).toBe('My Section');
+    });
+
+    it('should render the title slot when provided', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { title: '<span class="custom-title">Custom</span>' },
+      });
+
+      expect(wrapper.find('.custom-title').exists()).toBe(true);
+      expect(wrapper.find('.custom-title').text()).toBe('Custom');
+    });
+  });
+
+  describe('expandable behavior', () => {
+    it('should render toggle button when expandable is true', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: true } });
+
+      expect(wrapper.find('.toggle-button').exists()).toBe(true);
+    });
+
+    it('should not render toggle button when expandable is false', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: false } });
+
+      expect(wrapper.find('.toggle-button').exists()).toBe(false);
+    });
+
+    it('should set aria-expanded on toggle button when expandable', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-expanded')).toBe('true');
+    });
+
+    it('should set aria-expanded="false" on toggle button when collapsed', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-expanded')).toBe('false');
+    });
+
+    it('should set aria-label to "Collapse section" on toggle button when expanded', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-label')).toBe('Collapse section');
+    });
+
+    it('should set aria-label to "Expand section" on toggle button when collapsed', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.toggle-button').attributes('aria-label')).toBe('Expand section');
+    });
+
+    it('should emit update:expanded with false when clicking an expanded header', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([false]);
+    });
+
+    it('should emit update:expanded with true when clicking a collapsed header', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([true]);
+    });
+
+    it('should not emit update:expanded when clicking a non-expandable header', async() => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: false } });
+
+      await wrapper.find('.section-header').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toBeUndefined();
+    });
+
+    it('should emit update:expanded when toggle button is clicked', async() => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      await wrapper.find('.toggle-button').trigger('click');
+
+      expect(wrapper.emitted('update:expanded')).toHaveLength(1);
+      expect(wrapper.emitted('update:expanded')![0]).toStrictEqual([false]);
+    });
+  });
+
+  describe('expanded prop', () => {
+    it('should default expanded to true', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps, expandable: true } });
+
+      expect(wrapper.find('.section-content').exists()).toBe(true);
+    });
+
+    it('should render content when expanded is true', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps, expanded: true },
+        slots: { default: '<p>Content</p>' },
+      });
+
+      expect(wrapper.find('.section-content').exists()).toBe(true);
+      expect(wrapper.find('p').text()).toBe('Content');
+    });
+
+    it('should hide content when expanded is false', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps, expanded: false },
+        slots: { default: '<p>Content</p>' },
+      });
+
+      expect(wrapper.find('.section-content').exists()).toBe(false);
+    });
+
+    it('should apply expandable-content class when expandable is true', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.section-content').classes()).toContain('expandable-content');
+    });
+
+    it('should not apply expandable-content class when expandable is false', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: false, expanded: true
+        }
+      });
+
+      expect(wrapper.find('.section-content').classes()).not.toContain('expandable-content');
+    });
+
+    it('should add collapsed class to header when not expanded', () => {
+      const wrapper = mount(RcSection, {
+        props: {
+          ...defaultProps, expandable: true, expanded: false
+        }
+      });
+
+      expect(wrapper.find('.section-header').classes()).toContain('collapsed');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render badges slot inside right-wrapper', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { badges: '<span class="test-badge">Badge</span>' },
+      });
+
+      expect(wrapper.find('.right-wrapper .status-badges .test-badge').exists()).toBe(true);
+    });
+
+    it('should render actions slot inside right-wrapper', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { actions: '<button class="test-action">Act</button>' },
+      });
+
+      expect(wrapper.find('.right-wrapper .actions .test-action').exists()).toBe(true);
+    });
+
+    it('should not render right-wrapper when no badges or actions slots', () => {
+      const wrapper = mount(RcSection, { props: { ...defaultProps } });
+
+      expect(wrapper.find('.right-wrapper').exists()).toBe(false);
+    });
+
+    it('should render counter slot', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { counter: '<span class="test-counter">5</span>' },
+      });
+
+      expect(wrapper.find('.test-counter').exists()).toBe(true);
+    });
+
+    it('should render errors slot', () => {
+      const wrapper = mount(RcSection, {
+        props: { ...defaultProps },
+        slots: { errors: '<span class="test-error">!</span>' },
+      });
+
+      expect(wrapper.find('.test-error').exists()).toBe(true);
+    });
+  });
+});

package/rancher-components/RcSection/RcSection.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+/**
+ * A section container used for grouping and organizing content, with an
+ * optional header that supports title, badges, actions, and expandability.
+ *
+ * Example:
+ *
+ * <RcSection title="Section title" type="secondary" mode="with-header" :expandable="false" background="secondary">
+ *   <p>Section content here</p>
+ * </RcSection>
+ *
+ * <RcSection title="Section title" type="secondary" mode="with-header" expandable v-model:expanded="expanded" background="secondary">
+ *   <template #counter>
+ *     <RcCounterBadge :count="99" type="inactive" />
+ *   </template>
+ *   <template #errors>
+ *     <RcIcon v-clean-tooltip="'3 validation errors'" type="error" size="large" status="error" />
+ *   </template>
+ *   <template #badges>
+ *     <RcSectionBadges :badges="[
+ *       { label: 'Status', status: 'success', tooltip: 'All systems operational' },
+ *       { label: 'Status', status: 'warning', tooltip: 'Degraded performance' },
+ *       { label: 'Status', status: 'error', tooltip: 'Service unavailable' },
+ *     ]" />
+ *   </template>
+ *   <template #actions>
+ *     <RcSectionActions :actions="[
+ *       { label: 'Action', icon: 'chevron-left', action: () => {} },
+ *       { icon: 'copy', ariaLabel: 'Copy', action: () => {} },
+ *       { icon: 'trash', label: 'Delete', action: () => {} },
+ *     ]" />
+ *   </template>
+ *   <p>Section content here</p>
+ * </RcSection>
+ */
+import { computed, inject, provide, type Ref } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import type { RcSectionProps, SectionBackground } from './types';
+
+const RC_SECTION_BG_KEY = 'rc-section-background';
+
+const props = withDefaults(defineProps<RcSectionProps>(), { title: '' });
+
+const parentBackground = inject<Ref<SectionBackground> | null>(RC_SECTION_BG_KEY, null);
+
+const resolvedBackground = computed<SectionBackground>(() => {
+  if (props.background) {
+    return props.background;
+  }
+
+  const parent = parentBackground?.value ?? null;
+
+  return parent === 'primary' ? 'secondary' : 'primary';
+});
+
+provide(RC_SECTION_BG_KEY, resolvedBackground);
+
+const expanded = defineModel<boolean>('expanded', { default: true });
+
+const hasHeader = computed(() => {
+  return props.mode === 'with-header';
+});
+
+const sectionClass = computed(() => ({
+  'rc-section':     true,
+  'type-primary':   props.type === 'primary',
+  'type-secondary': props.type === 'secondary',
+  'bg-primary':     resolvedBackground.value === 'primary',
+  'bg-secondary':   resolvedBackground.value === 'secondary',
+}));
+
+const contentClass = computed(() => ({
+  'section-content':    true,
+  'no-header':          !hasHeader.value,
+  'expandable-content': props.expandable,
+}));
+
+function toggle() {
+  if (props.expandable) {
+    expanded.value = !expanded.value;
+  }
+}
+</script>
+
+<template>
+  <div :class="sectionClass">
+    <div
+      v-if="hasHeader"
+      class="section-header"
+      :class="{ expandable: props.expandable, collapsed: !expanded }"
+      @click="toggle"
+    >
+      <div class="left-wrapper">
+        <RcButton
+          v-if="props.expandable"
+          class="toggle-button"
+          variant="ghost"
+          :aria-expanded="expanded"
+          :aria-label="expanded ? 'Collapse section' : 'Expand section'"
+          @click.stop="toggle"
+        >
+          <RcIcon
+            :type="expanded ? 'chevron-down' : 'chevron-right'"
+            size="medium"
+          />
+        </RcButton>
+        <div class="title">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+          <slot name="counter" />
+          <slot name="errors" />
+        </div>
+      </div>
+      <div
+        v-if="$slots.badges || $slots.actions"
+        class="right-wrapper"
+      >
+        <div
+          v-if="$slots.badges"
+          class="status-badges"
+        >
+          <slot name="badges" />
+        </div>
+        <div
+          v-if="$slots.actions"
+          class="actions"
+          @click.stop
+        >
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="expanded"
+      :class="contentClass"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.type-primary {
+    .title {
+      font-weight: 700;
+    }
+  }
+
+  &.type-secondary {
+    padding: 0 16px;
+    border-radius: 8px;
+
+    .title {
+      font-weight: 600;
+    }
+  }
+
+  &.bg-primary {
+    background-color: var(--rc-section-background-primary);
+  }
+
+  &.bg-secondary {
+    background-color: var(--rc-section-background-secondary);
+  }
+}
+
+.section-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  height: 56px;
+
+  &.expandable {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+.left-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+
+  .toggle-button + .title {
+    margin-left: -4px;
+  }
+}
+
+.title {
+  display: inline-flex;
+  gap: 12px;
+  font-size: 18px;
+  line-height: 1.2;
+  color: var(--body-text, inherit);
+}
+
+button.btn-medium.toggle-button {
+  flex-shrink: 0;
+  font-size: 16px;
+  color: var(--body-text, inherit);
+  padding: 0;
+  min-height: initial;
+}
+
+.right-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 24px;
+  margin-left: auto;
+}
+
+.status-badges {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+
+.section-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0 0 16px;
+  color: var(--body-text);
+
+  &.expandable-content {
+    padding: 0 0 16px 24px;
+  }
+
+  &.no-header {
+    padding: 16px 0;
+  }
+}
+</style>