mirror of https://github.com/vector-im/riot-web
Add extra attribute to `AccessibleButton` (#12456)
* Update snapshots * Add extra attribute to `AccessibleButton`t3chguy/dedup-icons-17oct
parent
bd7ce7cda9
commit
264e202ccd
|
@ -14,7 +14,7 @@
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
|
||||
import React, { ComponentProps, forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
|
||||
import classnames from "classnames";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
|
@ -61,6 +61,8 @@ type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<
|
|||
> &
|
||||
Omit<InputHTMLAttributes<Element>, "onClick">;
|
||||
|
||||
type TooltipProps = ComponentProps<typeof Tooltip>;
|
||||
|
||||
/**
|
||||
* Type of props accepted by {@link AccessibleButton}.
|
||||
*
|
||||
|
@ -96,6 +98,14 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
|
|||
* Only valid when used in conjunction with `title`.
|
||||
*/
|
||||
caption?: string;
|
||||
/**
|
||||
* The placement of the tooltip.
|
||||
*/
|
||||
placement?: TooltipProps["placement"];
|
||||
/**
|
||||
* Callback for when the tooltip is opened or closed.
|
||||
*/
|
||||
onTooltipOpenChange?: TooltipProps["onOpenChange"];
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -128,6 +138,8 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
|
|||
triggerOnMouseDown,
|
||||
title,
|
||||
caption,
|
||||
placement,
|
||||
onTooltipOpenChange,
|
||||
...restProps
|
||||
}: Props<T>,
|
||||
ref: Ref<HTMLElement>,
|
||||
|
@ -199,7 +211,13 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
|
|||
|
||||
if (title) {
|
||||
return (
|
||||
<Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
|
||||
<Tooltip
|
||||
label={title}
|
||||
caption={caption}
|
||||
isTriggerInteractive={true}
|
||||
placement={placement}
|
||||
onOpenChange={onTooltipOpenChange}
|
||||
>
|
||||
{button}
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
@ -135,26 +135,22 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
|
|||
>
|
||||
Current session
|
||||
</h3>
|
||||
<span
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Options"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_disabled"
|
||||
data-state="closed"
|
||||
data-testid="current-session-menu"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-label="Options"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_disabled"
|
||||
data-testid="current-session-menu"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_KebabContextMenu_icon"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
class="mx_KebabContextMenu_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
|
|
Loading…
Reference in New Issue