1.0.4 • Published 1 month ago
@leafygreen-ui/info-sprinkle v1.0.4
Info Sprinkle
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/info-sprinkleNPM
npm install @leafygreen-ui/info-sprinkleExample
import { InfoSprinkle } from `@leafygreen-ui/info-sprinkle`;
<InfoSprinkle>I'm an info sprinkle</InfoSprinkle>Properties
| Prop | Type | Description | Default |
|---|---|---|---|
children | string | String that will be rendered inside of <InfoSprinkle /> | |
open | boolean | Controls the component, and determines whether or not the <InfoSprinkle /> will appear open or closed. | false |
setOpen | function | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the <InfoSprinkle /> component responds to events such as backdrop clicks and a user pressing the Escape key. | (boolean) => boolean |
shouldClose | function | Callback that should return a boolean that determines whether or not the <InfoSprinkle /> should close when a user tries to close it. | () => true |
align | 'top', 'bottom', 'left', 'right' | Determines the preferred alignment of the <InfoSprinkle /> component relative to the element passed to the trigger prop. | 'top' |
justify | 'start', 'middle', 'end', 'fit' | Determines the preferred justification of the <InfoSprinkle /> component (based on the alignment) relative to the element passed to the trigger prop. | 'start' |
darkMode | boolean | Determines if the <InfoSprinkle /> will appear in dark mode. | false |
id | string | id applied to <InfoSprinkle /> component | |
className | string | Applies a className to Tooltip container | |
triggerAriaLabel | string | aria-label for the trigger icon | more info |
enabled | boolean | Enables Tooltip to trigger. | true |
onClose | function | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur.. | () => {} |
usePortal | boolean | Determines if the Tooltip will be rendered within a portal. | true |
portalContainer | HTMLElement | null | Sets the container used for the popover's portal. NOTE: If using a scrollContainer make sure that the portalContainer is contained within the scrollContainer. E.g, passing the same refrence to scrollContainer and portalContainer. | |
scrollContainer | HTMLElement | null | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly. | |
portalClassName | string | Passes the given className to the popover's portal container if the default portal container is being used. | |
popoverZIndex | number | Sets the z-index CSS property for the popover. | |
baseFontSize | 13 | 16 | font-size applied to typography element | default to value set by LeafyGreen Provider |
| ... | native div attributes | Any other props will be spread on the tooltip element |
Note: The ref of this component will be the trigger icon but all props will spread to the internal <Tooltip/> component.