From 22f79dc6e9369652b38f731d67d12f58090fbd78 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Fri, 13 Oct 2023 09:38:24 -0400 Subject: [PATCH] fix(longtexttooltip): Removed long text tooltip in favor of PF truncate --- .../LongTextTooltip/LongTextTooltip.md | 23 - .../LongTextTooltipExample.tsx | 10 - .../LongTextTooltip/LongTextTooltip.test.tsx | 39 -- .../src/LongTextTooltip/LongTextTooltip.tsx | 33 -- .../LongTextTooltip.test.tsx.snap | 557 ------------------ packages/module/src/LongTextTooltip/index.ts | 2 - packages/module/src/index.ts | 3 - 7 files changed, 667 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx delete mode 100644 packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx delete mode 100644 packages/module/src/LongTextTooltip/LongTextTooltip.tsx delete mode 100644 packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap delete mode 100644 packages/module/src/LongTextTooltip/index.ts 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 deleted file mode 100644 index 3f3cb6cd..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -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 enables you to display long text to users via a tooltip. It builds off of the [tooltip component](https://www.patternfly.org/components/tooltip) to truncate UI text in an element and display the truncated text in a tooltip. - -## Examples - -### Basic long-text tooltip - -To show users the full value of truncated content, a basic long-text tooltip should contain appropriate and informative `content` and specify the `maxLength` of the UI text (after which, truncation will occur). - -Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tooltip 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 deleted file mode 100644 index 5479ced5..00000000 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { TooltipPosition } from '@patternfly/react-core'; -import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip"; - -export const BasicExample: React.FunctionComponent = () => ( - -); diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx deleted file mode 100644 index cef05968..00000000 --- a/packages/module/src/LongTextTooltip/LongTextTooltip.test.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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 deleted file mode 100644 index 5f2a0aca..00000000 --- a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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.FunctionComponent = ({ - content = '', - maxLength = Infinity, - tooltipMaxWidth = '50vw', - tooltipPosition = TooltipPosition.top, - ...rest -}: LongTextTooltipProps) => { - const truncate = (str: string, max: number) => (str.length > max ? str.substring(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 deleted file mode 100644 index c0966179..00000000 --- a/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap +++ /dev/null @@ -1,557 +0,0 @@ -// 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 deleted file mode 100644 index e86c7e52..00000000 --- a/packages/module/src/LongTextTooltip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './LongTextTooltip'; -export * from './LongTextTooltip'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index e4275441..f21ce65d 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -24,9 +24,6 @@ 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';