57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import type { IRawStyle } from '@fluentui/merge-styles';
|
|
import type { ITheme, ISemanticColors, IPalette } from '../interfaces/index';
|
|
/**
|
|
* - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.
|
|
* - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,
|
|
* selected, focus).
|
|
* - Requires the target to have position set to relative and overflow set to hidden.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Assuming the following DOM structure and the different background colors coming from
|
|
* // the parent holding the content.
|
|
* <div className={classNames.parent}>
|
|
* <span className={classNames.content}>Overflown Content</span>
|
|
* </div>
|
|
* ```
|
|
* ```ts
|
|
* // This is how the style set would look in Component.styles.ts
|
|
* const { bodyBackground } = theme.semanticColors;
|
|
* const { neutralLighter } = theme.palette;
|
|
*
|
|
* // The second argument of getFadedOverflowStyle function is a string representing a key of
|
|
* // ISemanticColors or IPalette.
|
|
*
|
|
* const styles = {
|
|
* parent: [
|
|
* backgroundColor: bodyBackground,
|
|
* selectors: {
|
|
* '&:hover: {
|
|
* backgroundColor: neutralLighter
|
|
* },
|
|
* '$content:after': {
|
|
* ...getFadedOverflowStyle(theme, 'bodyBackground')
|
|
* },
|
|
* '&:hover $content:after': {
|
|
* ...getFadedOverflowStyle(theme, 'neutralLighter')
|
|
* }
|
|
* }
|
|
* ],
|
|
* content: [
|
|
* width: '100%',
|
|
* display: 'inline-block',
|
|
* position: 'relative',
|
|
* overflow: 'hidden'
|
|
* ]
|
|
* }
|
|
* ```
|
|
* @param theme - The theme object to use.
|
|
* @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.
|
|
* Defaults to 'bodyBackground'.
|
|
* @param direction - The direction of the overflow. Defaults to horizontal.
|
|
* @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.
|
|
* @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.
|
|
* @returns The style object.
|
|
*/
|
|
export declare function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle;
|