Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import { getResizeObserver } from '@patternfly/react-core/dist/esm/helpers/resiz
import Editor, { BeforeMount, EditorProps, Monaco } from '@monaco-editor/react';
import type { editor } from 'monaco-editor';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import Dropzone, { FileRejection } from 'react-dropzone';
Expand Down Expand Up @@ -541,15 +541,15 @@ export const CodeEditor = ({
)}
{isUploadEnabled && (
<CodeEditorControl
icon={<UploadIcon />}
icon={<RhUiUploadIcon />}
aria-label={uploadButtonAriaLabel}
tooltipProps={{ content: <div>{uploadButtonToolTipText}</div>, ...tooltipProps }}
onClick={open}
/>
)}
{isDownloadEnabled && (!showEmptyState || !!value) && (
<CodeEditorControl
icon={<DownloadIcon />}
icon={<RhUiDownloadIcon />}
aria-label={downloadButtonAriaLabel}
tooltipProps={{ content: <div>{downloadButtonToolTipText}</div>, ...tooltipProps }}
onClick={() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,24 +69,12 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 512 512"
>
<path
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
/>
</svg>
<path
d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
/>
</svg>
</span>
</button>
Expand All @@ -111,24 +99,12 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 512 512"
>
<path
d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
/>
</svg>
<path
d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
/>
</svg>
</span>
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-micron
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

interface LoadingPropsType {
spinnerAriaValueText: string;
Expand Down Expand Up @@ -75,7 +75,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
isCircle
{...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
onClick={() => setIsUploading(!isUploading)}
icon={<UploadIcon />}
icon={<RhUiUploadIcon />}
{...uploadingProps}
/>
</Flex>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Button, Flex } from '@patternfly/react-core';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

interface LoadingPropsType {
spinnerAriaValueText: string;
Expand Down Expand Up @@ -59,7 +59,7 @@ export const ButtonProgress: React.FunctionComponent = () => {
variant="plain"
{...(!isUploading && { 'aria-label': 'Upload' })}
onClick={() => setIsUploading(!isUploading)}
icon={<UploadIcon />}
icon={<RhUiUploadIcon />}
{...uploadingProps}
/>
<br />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ subsection: file-upload
---

import { useState } from 'react';
import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';

## Examples

Expand All @@ -21,13 +21,15 @@ Pressing _Clear_ button triggers `onClearClick` event.
### Simple text file

```ts file="./FileUploadSimpleText.tsx"

```

### With helper text

You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.

```ts file="./FileUploadWithHelperText.tsx"

```

### Text file with edits allowed
Expand All @@ -36,6 +38,7 @@ A user can always type instead of selecting a file, but by default, once a user
Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :

```ts file="./FileUploadTextWithEdits.tsx"

```

### Restricting file size and type
Expand All @@ -49,6 +52,7 @@ Restricting file sizes and types in this way is for user convenience only, and i
### Text file with restrictions

```ts file="./FileUploadTextWithRestrictions.tsx"

```

### Other file types
Expand All @@ -58,6 +62,7 @@ If no `type` prop is specified, the component will not read files directly. When
### Simple file of any format

```ts file="./FileUploadSimpleFile.tsx"

```

### Customizing the file preview
Expand All @@ -67,6 +72,7 @@ Regardless of `type`, the preview area (the TextArea, or any future implementati
### Custom file preview

```ts file="./FileUploadCustomPreview.tsx"

```

### Bringing your own file browse logic
Expand All @@ -78,6 +84,7 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
### Custom file upload

```ts file="./FileUploadCustomUpload.tsx"

```

## Types
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { FileUpload } from '@patternfly/react-core';
import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';

export const CustomPreviewFileUpload: React.FunctionComponent = () => {
const [value, setValue] = useState<File>();
Expand Down Expand Up @@ -29,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
>
{value && (
<div>
<FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
<RhUiDocumentFillIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
{value.name}
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ propComponents:
---

import { useEffect, useState } from 'react';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

Multiple file upload is able to:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
HelperTextItem,
DropEvent
} from '@patternfly/react-core';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

interface readFile {
fileName: string;
Expand Down Expand Up @@ -124,7 +124,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
isHorizontal={isHorizontal}
>
<MultipleFileUploadMain
titleIcon={<UploadIcon />}
titleIcon={<RhUiUploadIcon />}
titleText="Drag and drop files here"
titleTextSeparator="or"
infoText="Accepted file types: JPEG, Doc, PDF, PNG"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ section: components
import { Fragment, useState, useLayoutEffect, useRef } from 'react';

import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@patternfly/react-core';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';

export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
Expand Down Expand Up @@ -177,7 +177,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
<Button variant="plain" aria-label="edit" icon={<EditIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
<Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
SelectOption
} from '@patternfly/react-core';
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';

export const ToolbarGroups: React.FunctionComponent = () => {
Expand Down Expand Up @@ -157,7 +157,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
<Button variant="plain" aria-label="edit" icon={<EditIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
<Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from '@patternfly/react-core';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';

Expand Down Expand Up @@ -213,7 +213,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
<Button variant="plain" aria-label="edit" icon={<EditIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
<Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/MultipleFileUploadDemos.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ subsection: file-upload
---
import { useEffect, useState } from 'react';
import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

## Demos

Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/Toolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
ModalHeader,
ModalBody
} from '@patternfly/react-core';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';

interface readFile {
fileName: string;
Expand Down Expand Up @@ -116,7 +116,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
isHorizontal={isHorizontal}
>
<MultipleFileUploadMain
titleIcon={<UploadIcon />}
titleIcon={<RhUiUploadIcon />}
titleText="Drag and drop files here"
titleTextSeparator="or"
infoText="Accepted file types: JPEG, Doc, PDF, PNG"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

export const ConsoleLogViewerToolbar: React.FC = () => {
Expand Down Expand Up @@ -451,7 +451,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
ref={toggleRef}
isExpanded={downloadExpandedMobile}
onClick={onDownloadToggleMobile}
icon={<DownloadIcon />}
icon={<RhUiDownloadIcon />}
aria-label="Download"
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';

Expand Down Expand Up @@ -257,7 +257,7 @@ class ToolbarDemo extends Component<ToolbarProps, ToolbarState> {
<Button variant="plain" icon={<EditIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" icon={<CloneIcon />} />
<Button variant="plain" icon={<RhUiCopyFillIcon />} />
</ToolbarItem>
<ToolbarItem>
<Button variant="plain" icon={<SyncIcon />} />
Expand Down
2 changes: 1 addition & 1 deletion packages/react-table/src/demos/Table.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ ModalFooter,
} from '@patternfly/react-core';
import { DragDropSort } from '@patternfly/react-drag-drop';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
Expand Down
Loading
Loading