Add onClick handlers to all axo dialog buttons

This commit is contained in:
Jamie Kyle
2025-11-12 17:03:01 -08:00
parent 4cd7ae33cb
commit bf9d36f2f0
2 changed files with 7 additions and 1 deletions

View File

@@ -54,7 +54,9 @@ function Template(props: {
</AxoDialog.Trigger> </AxoDialog.Trigger>
<AxoDialog.Content size={props.contentSize} escape="cancel-is-noop"> <AxoDialog.Content size={props.contentSize} escape="cancel-is-noop">
<AxoDialog.Header> <AxoDialog.Header>
{props.back && <AxoDialog.Back aria-label="Back" />} {props.back && (
<AxoDialog.Back aria-label="Back" onClick={action('onBack')} />
)}
<AxoDialog.Title>Title</AxoDialog.Title> <AxoDialog.Title>Title</AxoDialog.Title>
<AxoDialog.Close aria-label="Close" /> <AxoDialog.Close aria-label="Close" />
</AxoDialog.Header> </AxoDialog.Header>

View File

@@ -158,6 +158,7 @@ export namespace AxoDialog {
export type BackProps = Readonly<{ export type BackProps = Readonly<{
'aria-label': string; 'aria-label': string;
onClick: () => void;
}>; }>;
export const Back: FC<BackProps> = memo(props => { export const Back: FC<BackProps> = memo(props => {
@@ -168,6 +169,7 @@ export namespace AxoDialog {
variant="borderless-secondary" variant="borderless-secondary"
symbol="chevron-[start]" symbol="chevron-[start]"
aria-label={props['aria-label']} aria-label={props['aria-label']}
onClick={props.onClick}
/> />
</div> </div>
); );
@@ -373,6 +375,7 @@ export namespace AxoDialog {
arrow={props.arrow} arrow={props.arrow}
size="md" size="md"
width="grow" width="grow"
onClick={props.onClick}
> >
{props.children} {props.children}
</AxoButton.Root> </AxoButton.Root>
@@ -402,6 +405,7 @@ export namespace AxoDialog {
variant={props.variant} variant={props.variant}
size="md" size="md"
symbol={props.symbol} symbol={props.symbol}
onClick={props.onClick}
/> />
); );
}); });