Fix incorrect button sizes introduced by RcButton changes (#17178)

* Fixing some of the more notable size discrepencies with RcButton

Fixes #16755

* Removed the change to the RcButton default size.

* An attempt at wrapping the RcButton with a link to prevent regression.

* Provided a convenience prop in RcButton to support links shaped like buttons

This is almost entirely based on @rak-phillip 's work at ab4abcf

* Reintroducing the role attribute

* Updated storybook

* Found an area where we had additional margin being adding in the sortable table bulk actions.

* Fixing a size issue I noticed with the notifcation button.

This was likely caused by missing changes we made to the rcbutton default size.

Author: codyrancher

cypress/e2e/po/components/create-edit-view.po.ts

@@ -24,7 +24,7 @@ export default class CreateEditViewPo extends ComponentPo {
   }
 
   cancel() {
-    return new AsyncButtonPo(this.self().find('.cru-resource-footer .role-secondary')).click();
+    return new AsyncButtonPo(this.self().find('.cru-resource-footer .variant-secondary')).click();
   }
 
   saveAndWait() {

cypress/e2e/po/pages/explorer/charts/install-charts.po.ts

@@ -23,7 +23,7 @@ export class InstallChartPage extends PagePo {
   }
 
   nextPage() {
-    const btn = new AsyncButtonPo('.controls-steps .btn.role-primary');
+    const btn = new AsyncButtonPo('.controls-steps .btn.variant-primary');
 
     btn.click(true);
 

cypress/e2e/po/pages/explorer/project-secrets.po.ts

@@ -27,7 +27,7 @@ export class ProjectSecretsListPagePo extends BaseListPagePo {
   }
 
   createButtonTitle() {
-    return this.createButton().invoke('text');
+    return this.createButton().invoke('text').invoke('trim');
   }
 }
 

cypress/e2e/po/pages/explorer/secrets.po.ts

@@ -35,7 +35,7 @@ export class SecretsListPagePo extends BaseListPagePo {
   }
 
   createButtonTitle() {
-    return this.createButton().invoke('text');
+    return this.createButton().invoke('text').invoke('trim');
   }
 
   list() {

pkg/rancher-components/src/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,40 @@ describe('rcButton.vue', () => {
       expect(button.classes()).toContain('variant-ghost');
     });
   });
+
+  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');
+    });
+  });
 });

pkg/rancher-components/src/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 } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 import {
-  ButtonVariantProps, ButtonSizeProps, ButtonVariantNewProps, ButtonSizeNewProps, ButtonSize,
-  IconProps
+  ButtonVariantProps,
+  ButtonSizeProps,
+  ButtonVariantNewProps,
+  ButtonSizeNewProps,
+  ButtonSize,
+  IconProps,
 } from './types';
 import RcIcon from '@components/RcIcon/RcIcon.vue';
 
@@ -33,7 +38,22 @@ 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 & { to?: RouteLocationRaw }
+    >(),
+  {
+    size: 'medium',
+    to:   undefined,
+  }
+);
+
+const tag = computed(() => (props.to ? resolveComponent('RouterLink') : 'button'));
+const role = computed(() => (props.to ? 'link' : 'button'));
 
 const activeVariantClassName = computed(() => {
   if (props.variant === 'multiAction' || props.multiAction) {
@@ -94,9 +114,11 @@ defineExpose({ focus });
 </script>
 
 <template>
-  <button
+  <component
+    :is="tag"
     ref="RcFocusTarget"
-    role="button"
+    :role="role"
+    :to="to"
     :class="{ ...buttonClass }"
   >
     <slot
@@ -124,15 +146,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 {

pkg/rancher-components/src/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>

shell/components/ActionDropdownShell.vue

@@ -35,14 +35,15 @@ const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' |
   >
     <rc-dropdown-trigger
       class="bulk-actions-dropdown"
+      size="large"
       :disabled="disabled"
     >
       <template #before>
         <i class="icon icon-gear" />
       </template>
       <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
       <template #after>
-        <i class="ml-10 icon icon-chevron-down" />
+        <i class="icon icon-chevron-down" />
       </template>
     </rc-dropdown-trigger>
     <template #dropdownCollection>

shell/components/CruResourceFooter.vue

@@ -3,13 +3,16 @@ import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
 import ResourceCancelModal from '@shell/components/ResourceCancelModal';
+import { RcButton } from '@components/RcButton';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
   emits: ['cancel-confirmed', 'finish'],
 
-  components: { AsyncButton, ResourceCancelModal },
-  props:      {
+  components: {
+    AsyncButton, RcButton, ResourceCancelModal
+  },
+  props: {
     mode: {
       type:    String,
       default: 'create',
@@ -84,16 +87,17 @@ export default {
   <div class="cru-resource-footer">
     <slot name="footer-prefix" />
     <slot name="cancel">
-      <button
+      <RcButton
         v-if="!isView && showCancel"
         id="cru-cancel"
         :data-testid="componentTestid + '-cancel'"
         type="button"
-        class="btn role-secondary"
+        variant="secondary"
+        size="large"
         @click="confirmCancelRequired ? checkCancel(true) : $emit('cancel-confirmed', true)"
       >
         <t k="generic.cancel" />
-      </button>
+      </RcButton>
     </slot>
     <slot :checkCancel="checkCancel">
       <AsyncButton

shell/components/Resource/Detail/TitleBar/index.vue

@@ -167,12 +167,6 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
     position: relative;
   }
 
-  .icon-document {
-    width: 15px;
-    font-size: 16px;
-    margin-right: 10px;
-  }
-
   .actions {
     display: flex;
     align-items: center;