Skip to content

Commit 94af796

Browse files
CopilotShreckYe
andauthored
Update copilot-instructions.md: defer component list to README.md, clarify ext/labs patterns (#78)
* Initial plan * Update copilot-instructions.md: refer to README.md for components, add ext package detail, remove stale lines Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>
1 parent 5d97396 commit 94af796

File tree

1 file changed

+2
-32
lines changed

1 file changed

+2
-32
lines changed

.github/copilot-instructions.md

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -147,39 +147,10 @@ repositories {
147147

148148
#### Supported Material 3 Components
149149

150-
Not all components of Material Web are supported yet. Here is a list of supported unified component APIs:
150+
For an up-to-date list of supported unified component APIs, refer to README.md.
151151

152152
When adding or aligning components, you can search in <https://m3.material.io/> to find the component first. On each component's overview page, you can usually find links or references to both its Jetpack Compose implementation (almost identical to Compose Multiplatform's Compose UI APIs) and its web/Material Web implementation.
153153

154-
- Buttons: `Button` (wraps `MdElevatedButton`, `MdFilledButton`, `MdFilledTonalButton`, `MdOutlinedButton`, `MdTextButton`)
155-
- `Checkbox`
156-
- Chips: `AssistChip`, `FilterChip`, `InputChip`, `SuggestionChip` (wrap `MdAssistChip`, `MdFilterChip`, `MdInputChip`, `MdSuggestionChip`, `MdChipSet`)
157-
- `AlertDialog` (wraps `MdDialog`)
158-
- `HorizontalDivider` (wraps `MdDivider`)
159-
- FABs: `FloatingActionButton` (wraps `MdFab`, `MdBrandedFab`)
160-
- `Icon` (wraps `MdIcon`)
161-
- Icon Buttons: `IconButton` (wraps `MdIconButton`, `MdFilledIconButton`, `MdFilledTonalIconButton`, `MdOutlinedIconButton`)
162-
- Lists: LazyColumn with `ListItem` (wraps `MdList`, `MdListItem`)
163-
- Progress Indicators: `LinearProgressIndicator`, `CircularProgressIndicator` (wrap `MdLinearProgress`, `MdCircularProgress`)
164-
- `RadioButton` (wraps `MdRadio`)
165-
- `Slider` (wraps `MdSlider`)
166-
- `Switch` (wraps `MdSwitch`)
167-
- Tabs: `TabRow`, `Tab` (wrap `MdTabs`, `MdPrimaryTab`, `MdSecondaryTab`)
168-
- Text Fields: `TextField`, `OutlinedTextField` (wrap `MdFilledTextField`, `MdOutlinedTextField`)
169-
- Segmented Buttons: `SingleChoiceSegmentedButtonRow`, `MultiChoiceSegmentedButtonRow`, `SegmentedButton` (wrap `MdSegmentedButtonSet`, `MdOutlinedSegmentedButton`)
170-
- Navigation Drawer: `NavigationDrawer`, `ModalNavigationDrawer` (wrap `MdNavigationDrawer`, `MdNavigationDrawerModal`)
171-
- `Badge` (wraps `MdBadge`)
172-
173-
**Components in `ext` package** (platform-specific APIs):
174-
- `FilledSelect`, `OutlinedSelect`, `SelectOption` (wrap `MdFilledSelect`, `MdOutlinedSelect`, `MdSelectOption` on JS)
175-
176-
**Note:** Some Material Web components like `elevation`, `focus-ring`, and `ripple` are not wrapped as they are styling/utility components typically used internally by other components, not directly in application code.
177-
178-
**Labs Components:** Some components use Material Web "labs" features (experimental, not recommended for production). These are marked with `@MaterialWebLabsApi` annotation on their JS implementations:
179-
- `Badge`
180-
- `SegmentedButton` family
181-
- `NavigationDrawer` (non-modal variant)
182-
183154
### Development Patterns and Conventions
184155

185156
#### API Structure
@@ -208,13 +179,12 @@ When adding or aligning components, you can search in <https://m3.material.io/>
208179

209180
2. **Ext package** (`com.huanshankeji.compose.material3.ext`): Components with platform-specific APIs
210181
- Use when unification would compromise usability or when platforms have fundamentally different UX patterns
182+
- Especially when the JS DOM component only supports taking a text in an HTML attribute such as `value` as its content, while the Compose one takes a `@Composable` content block
211183
- Example: `FilledSelect`, `OutlinedSelect` (different interaction models between ExposedDropdownMenuBox on Compose UI and native select on JS)
212184

213185
3. **Labs annotations** instead of labs package:
214-
- Don't put components in separate `labs` package
215186
- Mark JS implementations with `@MaterialWebLabsApi` when they depend on Material Web labs components
216187
- Opt-in to `@MaterialWebLabsApi` if Compose UI visual effects can already be achieved with consistency on JS DOM
217-
- Mark otherwise (leave the annotation on the JS implementation only)
218188

219189
### Root Directory Files
220190
```

0 commit comments

Comments
 (0)