Add RcButtonSplit to the component library by rak-phillip · Pull Request #17055 · rancher/dashboard

rak-phillip · 2026-03-27T19:44:36Z

Summary

This adds RcButtonSplit to the component library. This component reflects the design system usage described in the Buttons & Links section.

Occurred changes and/or fixed issues

Add RcButtonSplit to the component library
Add an items prop to RcButtonSplit
Update docs for RcButtonSplit
Add left/right icon props

Technical notes summary

The design system co-mingles the button and the dropdown button. I'm keeping these as separate components to reduce the amount of complexity in the base RcButton component. I also opted for the naming convection of RcButtonSplit to keep the naming in close proximity to other button components like RcButton and ButtonDropdown.

Areas or cases that should be tested

We can test adding this to a few areas where we might have resorted to workarounds to ensure that this new component covers all of our existing use cases.

Areas which could experience regressions

NA - This is purely additive at this point.

Screenshot/Video

Checklist

The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
The PR has a Milestone
The PR template has been filled out
The PR has been self reviewed
The PR has a reviewer assigned
The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
The PR has been reviewed in terms of Accessibility
The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

codyrancher

I reviewed the code more than I did the styling since I suspect @oboc-sts will do a better job than I will but I can follow up on that if desired.

codyrancher · 2026-03-27T21:49:46Z

+  size?: ButtonSize;
+  // eslint-disable-next-line vue/require-default-prop
+  ariaLabel?: string;
+  placement?: Placement;


Just a preference so leave it if you prefer otherwise. I think I'd rather just see undefined defaults over eslint disables.

codyrancher · 2026-03-27T21:49:46Z

+  describe('variant prop', () => {
+    it.each([
+      ['primary', 'variant-primary'],
+      ['secondary', 'variant-secondary'],


Missing multiAction variant from the test and I'm sure it's because this is a dropdown but does that mean we should prevent it from being used as a prop value?

Based on feedback from Ovi, I think that we will drop link, ghost, and multiAction

codyrancher · 2026-03-27T21:55:53Z

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


Do we also want to add an export to pkg/rancher-components/src/index.ts?

Yes, very much so. This has been fixed.

codyrancher · 2026-03-27T22:09:32Z

+import { ButtonVariant, ButtonSize, IconProps } from '@components/RcButton/types';
+import type { Placement } from 'floating-vue';
+
+withDefaults(defineProps<{


Do we want a disabled prop?

Yes, I think this is important. Fixed

codyrancher · 2026-03-27T22:38:49Z

+
+    <template #dropdownCollection>
+      <RcDropdownItem
+        v-for="(label, id) in items"


Because items is a Record<string, string> we may end up with some cases with unexpected orderings.

I think we may want to provide an arrays of objects that adhered to the string -> string interface.

Yes, that's a good catch! Fixed

codyrancher · 2026-03-27T23:09:32Z

I think we're going to want to fix the overflow in storybook.

I'll see what we can do to maybe resize the canvas in storybook. Otherwise, I don't think we will be in control of the overflow.

This should be fixed now.. let me know what you think

codyrancher · 2026-03-27T23:11:00Z

+  :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);


For tertiary I see the separator in the dark theme but not the light.

I'll sync with Ovi to better understand how we might want to handle tertiary buttons

codyrancher · 2026-03-27T23:13:27Z

+
+<template>
+  <RcDropdown
+    :aria-label="ariaLabel"


ariaLabel is forwarded to RcDropdown which labels the dropdown menu.

Do we want to label the group with a role and aria-label.

I think that we might want 3 potential labels for this component:

Rename this aria label for the dropdown, which is properly applied to the RcDropdown component

Add a label for the primary button - this might be the default ariaLabel prop

Add a label for the trigger

oboc-sts

Looking good @rak-phillip 💪

Based on the static screenshots alone, I only have 2+1 concerns:

Styling wise, the text line-height used on the main button seems to push the label of the button down a bit (it's not optically align to middle)
We should only support the "split" variant for primary, secondary and maybe (maybe) tertiary, not for all button types (link and ghost should definitely NOT support this). Let's talk about the tertiary offline - I need to better understand where we're using it right now to assess it's usefulness in having the new split variant.
Actions popover alignment. Right now, it seems that we only support aligning the actions popover to the left of the split button - this works nicely for actions with really short names (shorter than the action label used on the main button). But, if the actions in the popover are longer... we'd want to consider aligning the popover to the RHS of the split button to ease the scanning effort. However, this would have to the into account the "bouncing off" the screen edge. So it's a bit more complex than it appears. As a compromise, we can leave this improvement for the next iteration of the component.

Wdyt?

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

codyrancher

Good from my perspective.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

rak-phillip added 4 commits March 27, 2026 12:34

Add RcButtonSplit to the component library

b3c4db1

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Add an items prop to RcButtonSplit

ad01c1d

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Update docs for RcButtonSplit

db822a9

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Add left/right icon props

97cb334

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

rak-phillip requested review from codyrancher and oboc-sts March 27, 2026 19:44

rak-phillip added this to the v2.15.0 milestone Mar 27, 2026

rak-phillip self-assigned this Mar 27, 2026

rak-phillip added status/dev-validate QA/None labels Mar 27, 2026

codyrancher reviewed Mar 27, 2026

View reviewed changes

oboc-sts mentioned this pull request Mar 30, 2026

Review the new RcButtonSplit (Phil) rancher/ux#423

Closed

oboc-sts reviewed Mar 30, 2026

View reviewed changes

rak-phillip added 8 commits March 30, 2026 12:10

Update rancher components exports

0dc0da9

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Exclude link, ghost, and multiAction variants from RcButtonSplit

04d92e5

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Refactor props into explicit types

4fd99fd

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Add defaults to RcButtonSplit props

11c73f3

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Add disabled prop to RcButtonSplit

8e44227

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Refactor items as an array of objects

9a235ab

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Update aria labels

b9cc798

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

Update canvas height for RcButtonSplit stories

ed195b0

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

codyrancher self-requested a review April 3, 2026 13:45

codyrancher previously approved these changes Apr 3, 2026

View reviewed changes

Adjust button line height

efaeeeb

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

rak-phillip dismissed codyrancher’s stale review via efaeeeb April 3, 2026 20:55

codyrancher self-requested a review April 3, 2026 20:58

codyrancher approved these changes Apr 3, 2026

View reviewed changes

rak-phillip merged commit 4497338 into rancher:master Apr 3, 2026
66 of 68 checks passed

rak-phillip deleted the task/rc-button-split branch April 3, 2026 22:28

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

Conversation

rak-phillip commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Occurred changes and/or fixed issues

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

Uh oh!

codyrancher left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oboc-sts left a comment

Choose a reason for hiding this comment

Uh oh!

codyrancher left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rak-phillip commented Mar 27, 2026 •

edited

Loading