Product Updates
ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.
import React from "react";
import { ProductUpdates } from "@nimbus-ds/patterns";
import { Text } from "@nimbus-ds/components";
const Example: React.FC = () => (
<ProductUpdates
title="Title"
text="Content text"
dismissLink="Dismiss Popover"
visible={true}
>
<Text fontSize="base" color="primary-interactive" textAlign="center">
This is a new feature that is being showcased by our Product Updates
component
</Text>
</ProductUpdates>
);
export default Example;Instale o componente via terminal.
npm install @nimbus-ds/productupdatesAdditional props are passed to the <ProductUpdates> element. See div docs for a list of props accepted by the <ProductUpdates> element.
ProductUpdates
| Name | Type | Default | Description |
|---|---|---|---|
title* | string | Title of the Popover. | |
text* | string | Content text of the Popover. | |
bodyContent | React.ReactNode | Optional content for the body of the Popover. | |
dismissLink | React.ReactNode | Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner. | |
offset | number | '10' | Offest displaces the floating element from its core placement along the specified axes. |
height | string | The height property specifies the height of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
width | string | 'fit-content' | The width property specifies the width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
backgroundColor | 'danger-surfaceHighlight' | 'neutral-background' | The backgroundColor property sets the background color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
color | 'danger-surfaceHighlight' | 'neutral-background' | The color property is used to set the color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
maxWidth | string | The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
overflow | 'auto' | The overflow shorthand property sets the desired behavior for an popover's content overflow. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
position | 'bottom' | 'bottom' | Position of the popover. |
zIndex | '100' | The zIndex property specifies the stack order of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
visible | boolean | If true, the component is shown. | |
children* | React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode); | An HTML element, or a function that returns one. It's used to set the position of the popover. | |
onVisibility | (visible: boolean) => void; | Function to control popover opening and closing. | |
arrow | boolean | 'true' | Conditional for displaying the popover arrow. |
matchReferenceWidth | boolean | A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents. | |
enabledHover | boolean | Adds hover event listeners that change the open state, like CSS :hover. | |
enabledClick | boolean | 'true' | Adds click event listeners that change the open state. |