Skip to content

@kondee/chip md3 #5081

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

Draft
k0ndee wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

@kondee/chip md3 #5081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cff5a8f
feat(chip): modernize MD3 API
draggie Jun 16, 2026
4662cff
chore(chip): improve after review
draggie Jul 1, 2026
cfd6bc2
chore: refactor and tokens update
k0ndee Aug 27, 2026
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
18 changes: 1 addition & 17 deletions docs/6.x/docs/components/Chip/Chip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,6 @@ export default MyComponent;

<div>

### showSelectedOverlay <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>

</div>

<PropTable componentLink="Chip/Chip" prop="showSelectedOverlay" />

<div>

### showSelectedCheck

</div>
Expand Down Expand Up @@ -196,15 +188,7 @@ export default MyComponent;

<div>

### compact <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>

</div>

<PropTable componentLink="Chip/Chip" prop="compact" />

<div>

### elevated <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
### elevated

</div>

Expand Down
43 changes: 18 additions & 25 deletions docs/src/data/componentDocs6x.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4336,9 +4336,9 @@
}
]
},
"description": "Mode of the chip.\n- `flat` - flat chip without outline.\n- `outlined` - chip with an outline.",
"description": "Mode of the chip.\n- `flat` - chip with a filled container.\n- `outlined` - chip with an outline when unselected.",
"defaultValue": {
"value": "'flat'",
"value": "'outlined'",
"computed": false
}
},
Expand All @@ -4355,15 +4355,15 @@
"tsType": {
"name": "IconSource"
},
"description": "Icon to display for the `Chip`. Both icon and avatar cannot be specified."
"description": "Leading icon to display for the `Chip`. Takes precedence over `avatar` when both are specified."
},
"avatar": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "Avatar to display for the `Chip`. Both icon and avatar cannot be specified."
"description": "Leading avatar to display for the `Chip`. Ignored when `icon` is also specified."
},
"closeIcon": {
"required": false,
Expand All @@ -4388,14 +4388,7 @@
"tsType": {
"name": "ColorValue"
},
"description": "Whether to style the chip color as selected.\nNote: With theme version 3 `selectedColor` doesn't apply to the `icon`.\n If you want specify custom color for the `icon`, render your own `Icon` component."
},
"showSelectedOverlay": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "@supported Available in v5.x with theme version 3\nWhether to display overlay on selected chip"
"description": "Custom color to use for the label, leading icon, trailing icon, and outlined border,\noverriding the default selected/unselected theme colors."
},
"showSelectedCheck": {
"required": false,
Expand Down Expand Up @@ -4424,7 +4417,7 @@
"tsType": {
"name": "PressableAndroidRippleConfig"
},
"description": "Type of background drawabale to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
"description": "Type of background drawable to display the feedback (Android).\nhttps://reactnative.dev/docs/pressable#rippleconfig"
},
"aria-label": {
"required": false,
Expand Down Expand Up @@ -4471,9 +4464,16 @@
"tsType": {
"name": "signature",
"type": "function",
"raw": "() => void",
"raw": "(e: GestureResponderEvent) => void",
"signature": {
"arguments": [],
"arguments": [
{
"name": "e",
"type": {
"name": "GestureResponderEvent"
}
}
],
"return": {
"name": "void"
}
Expand Down Expand Up @@ -4547,19 +4547,12 @@
},
"description": "The number of milliseconds a user must touch the element before executing `onLongPress`."
},
"compact": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "@supported Available in v5.x with theme version 3\nSets smaller horizontal paddings `12dp` around label, when there is only label."
},
"elevated": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "@supported Available in v5.x with theme version 3\nWhether chip should have the elevation.",
"description": "Whether the chip should have elevation.",
"defaultValue": {
"value": "false",
"computed": false
Expand All @@ -4576,7 +4569,7 @@
],
"raw": "StyleProp<TextStyle>"
},
"description": "Style of chip's text"
"description": "Style of chip's text."
},
"style": {
"required": false,
Expand Down Expand Up @@ -4628,7 +4621,7 @@
"tsType": {
"name": "EllipsizeProp"
},
"description": "Ellipsize Mode for the children text"
"description": "Ellipsize Mode for the label text."
},
"maxFontSizeMultiplier": {
"required": false,
Expand Down
Loading