-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into add-invalidobject
- Loading branch information
Showing
30 changed files
with
1,089 additions
and
71 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
...patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
# Sidenav top-level section | ||
# should be the same for all markdown files | ||
section: extensions | ||
subsection: Component groups | ||
# Sidenav secondary level section | ||
# should be the same for all markdown files | ||
id: Ansible | ||
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) | ||
source: react | ||
# If you use typescript, the name of the interface to display props for | ||
# These are found through the sourceProps function provided in patternfly-docs.source.js | ||
propComponents: ['Ansible'] | ||
--- | ||
|
||
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; | ||
|
||
The **Ansible** component shows Ansible project logo. | ||
|
||
To specify whether Ansible is supported or not, add the `unsupported` property to the `<Ansible>` component. | ||
|
||
### Ansible supported | ||
|
||
```js file="./AnsibleSupportedExample.tsx" | ||
|
||
``` | ||
|
||
### Ansible unsupported | ||
|
||
```js file="./AnsibleUnsupportedExample.tsx" | ||
|
||
``` |
6 changes: 6 additions & 0 deletions
6
...fly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import React from 'react'; | ||
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; | ||
|
||
export const BasicExample: React.FunctionComponent = () => ( | ||
<Ansible /> | ||
); |
6 changes: 6 additions & 0 deletions
6
...y-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import React from 'react'; | ||
import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible'; | ||
|
||
export const BasicExample: React.FunctionComponent = () => ( | ||
<Ansible unsupported /> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 2 additions & 5 deletions
7
...nfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,9 @@ | ||
import React from 'react'; | ||
import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; | ||
|
||
const BatteryCriticalExample: React.FunctionComponent = () => ( | ||
export const BasicExample: React.FunctionComponent = () => ( | ||
<> | ||
<Battery label="With prop: 4" severity={4} /> | ||
<Battery className="pf-u-ml-md" label="With prop: critical" severity="critical" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: critical" severity="critical" /> | ||
</> | ||
); | ||
|
||
export default BatteryCriticalExample; | ||
|
4 changes: 1 addition & 3 deletions
4
...rnfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,4 @@ | ||
import React from 'react'; | ||
import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; | ||
|
||
const BatteryDefaultExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/> | ||
|
||
export default BatteryDefaultExample; | ||
export const BasicExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/> | ||
8 changes: 3 additions & 5 deletions
8
...tternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,10 @@ | ||
import React from 'react'; | ||
import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; | ||
|
||
const BatteryHighExample: React.FunctionComponent = () => ( | ||
export const BasicExample: React.FunctionComponent = () => ( | ||
<> | ||
<Battery label="With prop: 3" severity={3} /> | ||
<Battery className="pf-u-ml-md" label="With prop: high" severity="high" /> | ||
<Battery className="pf-u-ml-md" label="With prop: error" severity="error" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: high" severity="high" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: error" severity="error" /> | ||
</> | ||
); | ||
|
||
export default BatteryHighExample; |
8 changes: 3 additions & 5 deletions
8
...atternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,10 @@ | ||
import React from 'react'; | ||
import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; | ||
|
||
const BatteryLowExample: React.FunctionComponent = () => ( | ||
export const BasicExample: React.FunctionComponent = () => ( | ||
<> | ||
<Battery label="With prop: 1" severity={1} /> | ||
<Battery className="pf-u-ml-md" label="With prop: low" severity="low" /> | ||
<Battery className="pf-u-ml-md" label="With prop: info" severity="info" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: low" severity="low" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: info" severity="info" /> | ||
</> | ||
); | ||
|
||
export default BatteryLowExample; |
8 changes: 3 additions & 5 deletions
8
...ernfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,10 @@ | ||
import React from 'react'; | ||
import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery'; | ||
|
||
const BatteryMediumExample: React.FunctionComponent = () => ( | ||
export const BasicExample: React.FunctionComponent = () => ( | ||
<> | ||
<Battery label="With prop: 2" severity={2} /> | ||
<Battery className="pf-u-ml-md" label="With prop: medium" severity="medium" /> | ||
<Battery className="pf-u-ml-md" label="With prop: warn" severity="warn" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: medium" severity="medium" /> | ||
<Battery className="pf-v5-u-ml-md" label="With prop: warn" severity="warn" /> | ||
</> | ||
); | ||
|
||
export default BatteryMediumExample; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
...content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltip.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
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" | ||
|
||
``` |
10 changes: 10 additions & 0 deletions
10
...s/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 = () => ( | ||
<LongTextTooltip | ||
content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px." | ||
maxLength={40} | ||
tooltipPosition={TooltipPosition.bottom}/> | ||
) |
Oops, something went wrong.