@payfit/unity-components
Version:
35 lines (34 loc) • 2.38 kB
TypeScript
import { TextProps } from '../../text/Text.js';
export type ListViewItemLabelProps = Omit<TextProps, 'variant' | 'color'>;
/**
* The ListViewItemLabel component displays the primary text label for a list item, providing accessible identification and consistent typography.
* ListViewItemLabel applies action-style typography with automatic text truncation after three lines, ensuring labels remain scannable while accommodating varying content lengths. This component is required for proper accessibility within list items, as it helps screen readers identify each item's purpose.
* @param {ListViewItemLabelProps} props - The props for the ListViewItemLabel component, inheriting all Text props except `variant` and `color` (which are preset)
* @example
* ```tsx
* import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ListView selectionMode="single">
* <RawListViewItem>
* <ListViewItemLabel>Employee Name</ListViewItemLabel>
* </RawListViewItem>
* </ListView>
* )
* }
* ```
* @remarks
* - This component is required for accessibility - always include it in your RawListViewItem or provide `aria-label`/`textValue`
* - Text automatically truncates after 3 lines using `lineClamp` to maintain consistent item heights
* - Uses action-style typography (medium weight) to emphasize the label as the primary identifier
* - Content is automatically masked for privacy in Datadog recordings via `data-dd-privacy="mask"`
* - Inherits the disabled state styling from its parent RawListViewItem
* @see {@link ListViewItemLabelProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view/parts GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-942&m=dev Figma}
* @see Design docs in {@link https://www.payfit.design/ Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-listviewitemlabel--docs unity-components.payfit.io}
*/
declare const ListViewItemLabel: import('react').ForwardRefExoticComponent<ListViewItemLabelProps & import('react').RefAttributes<HTMLElement>>;
export { ListViewItemLabel };