Skip to content

feat(Chip): use Label internally, deprecate Chip #10049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 9 commits into from
Feb 19, 2024
Merged

feat(Chip): use Label internally, deprecate Chip #10049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
671e42f
feat(Chip): use Label internally, deprecate Chip
kmcfaul Jan 30, 2024
c77600c
clean up rebase
kmcfaul Jan 30, 2024
48d8c50
update references
kmcfaul Jan 30, 2024
f6f338f
update chip usages, tests
kmcfaul Jan 30, 2024
f7defb0
integration test updates
kmcfaul Jan 30, 2024
a428eaf
code-editor to import deprecated chip
kmcfaul Jan 30, 2024
1680bfd
update codeeditor example, update tests
kmcfaul Feb 6, 2024
27a974e
adjust closeBtnAriaLabel default
kmcfaul Feb 8, 2024
65cb544
use Label in ToolbarFilter
kmcfaul Feb 19, 2024
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
5 changes: 5 additions & 0 deletions packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,31 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
### Basic

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

```

### With sizeToFit height, height will grow/shrink with content

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

```

### With shortcut menu and main header content

These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.

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

```

### With actions

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

```

### With custom control

```ts file="CodeEditorCustomControl.tsx"

```
6 changes: 3 additions & 3 deletions ...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { CodeEditor, Language } from '@patternfly/react-code-editor';
import { Grid, GridItem, Chip } from '@patternfly/react-core';
import { Grid, GridItem, Label } from '@patternfly/react-core';

export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
const onEditorDidMount = (editor, monaco) => {
Expand Down Expand Up @@ -40,9 +40,9 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
<GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
{shortcut.keys
.map((key) => (
<Chip key={key} isReadOnly>
<Label variant="outline" key={key}>
Copy link
Contributor

@tlabaj tlabaj Feb 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will also nee guidance/ code mode for isReadOnly.
And I have the same question here about the outlined variant.

Copy link
Contributor Author

@kmcfaul kmcfaul Feb 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think converting isReadOnly should be easy enough to cover in the same codemod issue to convert Chip to Label, as it effectively means that Label shouldn't have any onClick handler.

{key}
</Chip>
</Label>
))
.reduce((prev, curr) => (
<>{[prev, ' + ', curr]}</>
Expand Down
216 changes: 0 additions & 216 deletions packages/react-core/src/components/Chip/Chip.tsx
View file
Open in desktop

This file was deleted.

Loading