[Feature Request]: Support button element in UIShell right panel

[btepe]

The problem

The problem we came across is that there is no component that renders a button element and is suitable to be used inside the UIShell side panel. The SwitcherItem component is visually suitable, but always renders a Link element. For actions such as Log out, we need a button element, as it triggers a change in the UI rather then redirecting the user.

Our use-case:
We implemented a header with multiple right panels, as shown in the UI Shell docs. Our panels have different kinds of interactive elements. For instance, we have links to lead the user to relevant documentation or to our terms of use. We also display buttons such as Log out or Delete account that trigger an action.

The workaround we used is to apply the cds--switcher__item class to a ghost Button element. This however creates problems with the button padding and is prone to be broken by changes in the class or button styles with newer versions. I assume this is a fairly common use-case.

The solution

Solution A: The SwitcherItem component could support rendering a Link or Button element. This could be an additional optional prop.

Solution B: There could be an additional component, for instance SidePanelButton or SwitcherAction that renders a button. Since the props are quite different between a link and a button, this might make more sense.

Examples

No response

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

@btepe The Link component in UIShell has an as prop allowing you to configure this component to render as something other than an anchor tag. Would this work for your use case?

carbon/packages/react/src/components/UIShell/Link.tsx

Lines 63 to 68 in 6df7691

	const LinkPropTypes = {
	/**
	* Provide a custom element or component to render the top-level node for the
	* component.
	*/
	as: PropTypes.elementType,

SwitcherItem spreads additional props via ...rest onto the child Link, so this should be configurable through SwitcherItem as well

carbon/packages/react/src/components/UIShell/SwitcherItem.js

Lines 66 to 71 in e3df4a6

	<Link
	onKeyDown={(evt) => {
	setTabFocus(evt);
	onKeyDown(evt);
	}}
	{...rest}

[btepe]

@tay1orjones I tried this already, but the button styles overwrite some of the SwitcherItem styles. Here is an example:

https://stackblitz.com/edit/carbon-v11-zbmiha?file=src%2FApp.jsx

If you click on the user icon in the header, you'll see a default SwitcherItem, one using a button HTML element and one using the Carbon Button component to render the SwitcherItem. I also added a Button with className="cds--switcher__item". The last one is the current workaround we use, which caused some issues multiple times when the styling of the Button changed in a new Carbon release. This is what they look like: