I have created a custom code button component which can take an icon prop.
import React, { ReactNode, useCallback } from 'react';
import './Button.scss';
export interface ButtonProps {
ariaLabel?: string;
ariaControls?: string;
ariaExpanded?: boolean;
buttonText: string;
children?: ReactNode;
className?: string;
disabled?: boolean;
destructive?: boolean;
icon?: string | ReactNode | undefined;
iconAltText?: string;
iconOnly?: boolean;
iconPosition?: "right" | "left";
kind?: "primary" | "secondary" | "transparent" | "link" | "destructive" | undefined;
onClick: React.MouseEventHandler<HTMLButtonElement>;
rejected?: boolean;
size?: "xs" | "sm" | "md" | "lg" | "full" | undefined;
type?: "submit" | "reset" | "button" | undefined;
};
export const ButtonPlasmicProps = {
name: 'Button',
importPath: './components/Button/Button.tsx',
props: {
buttonText: 'string',
children: 'slot',
className: 'string',
disabled: 'boolean',
destructive: 'boolean',
icon: 'imageUrl',
iconAltText: {
type: 'string',
hidden: props => !props.icon
},
iconOnly: {
type: 'boolean',
hidden: props => !props.icon
},
iconPosition: {
type: 'choice',
options: ["right", "left"],
defaultValue: "left",
hidden: props => !props.icon
},
kind: {
type: 'choice',
options: ["primary", "secondary", "transparent", "link", "destructive"],
defaultValue: "primary"
},
onClick: {
type: 'eventHandler',
argTypes: []
},
rejected: 'boolean',
size: {
type: 'choice',
options: ["xs", "sm", "md", "lg", "full"],
defaultValue: "lg"
},
type: {
type: 'choice',
options: ["submit", "reset", "button"],
defaultValue: "button"
}
}
};
const Button = ({
ariaLabel,
ariaControls,
ariaExpanded,
buttonText,
children,
className,
disabled,
destructive,
icon,
iconAltText,
iconOnly,
iconPosition,
kind,
onClick,
rejected,
size,
type
}: ButtonProps) => {
const getIcon = useCallback(() => {
if (icon) {
if (typeof icon === 'string') {
return <img className="btn-icon" src={icon} alt={iconAltText || "Action Icon"} />
} else {
return icon;
};
};
}, [icon, iconAltText]);
return (
<button
className={`btn-main${size ? ' btn-' + size : ''}${kind ? ' btn-' + kind : ''}${disabled ? ' btn-disabled' : ''}${destructive || rejected ? ' btn-destruct' : ''}${iconOnly ? ' btn-icon-only' : ''} ${className || ''}`}
onClick={onClick}
disabled={disabled}
type={type}
aria-label={ariaLabel} aria-controls={ariaControls} aria-expanded={ariaExpanded}
>
{!children && <div className={`btn-content flex center${iconPosition ? " icon-" + iconPosition : ""}`}>
{ getIcon() }
{!iconOnly && buttonText}
</div>}
{children && children}
</button>
)
};
export default Button;
I set the icon propType to imageUrl thinking that I could select either a saved image or a saved icon. I built this component while I didn’t have any icons or images so I didn’t realize that this only lets you use items in the images collection, but NOT in the icon collection. Is there a way to set the imageUrl prop as an icon OR an image? My objective is to do as little back tracking as possible as I’m very happy with how the component functions. It’s just this one small thing, I’d like for them to be able to choose either an image or an icon.
If not, can I update this to a feature request? I would like for the user (editor) to be able to use saved icons and not have to go through the additional hassle of having to drop it into the children slot and perhaps have to reapply styles/tokes. Especially sense I already have this styled how we want it and have provided props for icon positioning.
Screenshot below shows that the imageUrl prop is only showing options from the images collection and none from the icons collection.
I mainly used this document to set up my custom code component.
“Help me, Obi-Wan Kenobi, you’re my only hope!”