diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md new file mode 100644 index 00000000..3b97f8bd --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md @@ -0,0 +1,21 @@ +--- +section: extensions +subsection: Component groups +id: Long text tooltip +source: react +propComponents: ['LongTextTooltip'] +--- + +import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip"; + +The **long text tooltip** component is a tooltip that can be used to display long text to users. It uses the `Tooltip` component to display the truncated text passed in as `content`. It uses `maxLength` prop to control the size of the content, and the `Tooltip` component to display the rest of the content. + +## Examples + +### LongTextTooltip component + +To provide users with long text, a basic long text tooltip should contain an appropriate and informative `content` and `maxLength`. Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tool tip width. + +```js file="./LongTextTooltipExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx new file mode 100644 index 00000000..e3a67691 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { TooltipPosition } from '@patternfly/react-core'; +import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip"; + +export const LongTextTooltipExample: React.FunctionComponent = () => ( + +) diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx new file mode 100644 index 00000000..cef05968 --- /dev/null +++ b/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import LongTextTooltip from './LongTextTooltip'; +import { render } from '@testing-library/react'; +import { TooltipPosition } from '@patternfly/react-core'; + +describe('LongTextTooltip component', () => { + it('should render', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render content', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render content with maxLength', () => { + expect( + render()).toMatchSnapshot(); + }); + + it('should render content with maxLength shorter than content', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render tooltip in a different spot', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render tooltip in a different spot', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render tooltip in a different spot', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render content tooltip in a different spot with different width', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx new file mode 100644 index 00000000..64d2819a --- /dev/null +++ b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx @@ -0,0 +1,33 @@ +import { Tooltip, TooltipPosition, TooltipProps } from '@patternfly/react-core'; +import React from 'react'; + +export interface LongTextTooltipProps extends Omit { + /** Content to display */ + content?: string; + /** Maximum length of the content being displayed in pixels */ + maxLength?: number; + /** Position of the tooltip */ + tooltipPosition?: TooltipPosition; + /** Maximum width of the tooltip */ + tooltipMaxWidth?: string; +} + +const LongTextTooltip: React.FC = ({ + content = '', + maxLength = Infinity, + tooltipMaxWidth = '50vw', + tooltipPosition = TooltipPosition.top, + ...rest +}: LongTextTooltipProps) => { + const truncate = (str: string, max: number) => (str.length > max ? str.substr(0, max - 1) + '…' : str); + + return content.length > maxLength ? ( + {content}} {...rest}> +
{truncate(content, maxLength)}
+
+ ) : ( + {content} + ); +}; + +export default LongTextTooltip; diff --git a/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap new file mode 100644 index 00000000..cb3cb2a7 --- /dev/null +++ b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap @@ -0,0 +1,557 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LongTextTooltip component should render 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render content 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render content tooltip in a different spot with different width 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render content with maxLength 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render content with maxLength shorter than content 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+ … +
+
+
+ , + "container":
+
+
+ … +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render tooltip in a different spot 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render tooltip in a different spot 2`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`LongTextTooltip component should render tooltip in a different spot 3`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + Lorem Impsum + +
+ , + "container":
+ + Lorem Impsum + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/module/src/LongTextTooltip/index.ts b/packages/module/src/LongTextTooltip/index.ts new file mode 100644 index 00000000..e86c7e52 --- /dev/null +++ b/packages/module/src/LongTextTooltip/index.ts @@ -0,0 +1,2 @@ +export { default } from './LongTextTooltip'; +export * from './LongTextTooltip'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 9de0907a..b0f65d56 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -24,5 +24,8 @@ export * from './ErrorState'; export { default as HorizontalNav } from './HorizontalNav'; export * from './HorizontalNav'; +export { default as LongTextTooltip } from './LongTextTooltip'; +export * from './LongTextTooltip'; + export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized';