DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: todo cleanup

Browse Source 
PiperOrigin-RevId: 595708369
This commit is contained in:
Elizabeth Mitchell 2024-01-04 08:10:16 -08:00 committed by Copybara-Service
parent 043bbad6f3
commit 553aaa6695
9 changed files with 92 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/components/chip.md
View File

@ -78,9 +78,9 @@ Choose the type of chip based on its purpose and author.
text message replies.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-chip-set>
@ -100,9 +100,9 @@ Chips should always appear in a set. Chip sets are
that can display any type of chip or other toolbar items.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<h3>New event</h3>
@ -119,9 +119,9 @@ All chips may display an optional icon. Input chips can specify if an avatar
picture is displayed.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -142,9 +142,9 @@ Assist, filter, and suggestion chips can be elevated if the placement requires
protection, such as on top of an image.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -208,9 +208,9 @@ Assist chips function as though the user asked an assistant to complete the
action. They should appear dynamically and contextually in a UI.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -234,9 +234,9 @@ use tags or descriptive words to filter content. They can be a good alternative
to toggle buttons or checkboxes.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -255,9 +255,9 @@ Filter chips can optionally be removable from the chip set. Removable chips have
a trailing remove icon.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -282,9 +282,9 @@ Input chips whose icons are user images may add the `avatar` attribute to
display the image in a larger circle.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -306,9 +306,9 @@ All input chips are removable. If an input chip does not have an action
associated with clicking on it, it may be marked as `remove-only`.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -328,9 +328,9 @@ help narrow a user’s intent by presenting dynamically generated suggestions,
such as possible responses or search filters.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- Need to add catalog-include "figures/<component>/usage-scenario-one.html" -->
<!-- catalog-only-end -->
```html
@ -363,9 +363,9 @@ Token | Default value
### Assist chip example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html
<style>
@ -397,9 +397,9 @@ Token | Default value
### Filter chip example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html
<style>
@ -431,9 +431,9 @@ Token | Default value
### Input chip example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html
<style>
@ -464,9 +464,9 @@ Token | Default value
### Suggestion chip example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/theming.html" -->
<!-- Need to add catalog-include "figures/<component>/theming.html" -->
```html
<style>

38
docs/components/dialog.md
View File

@ -78,23 +78,9 @@ action buttons.
```
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
> Tip: use `margin`, `height`, and `width` CSS properties to control the
> dialog's size and position.
@ -200,23 +186,9 @@ Token | Default value
### Example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<style>
@ -254,7 +226,7 @@ Property | Attribute | Type | Default | Description
--- | --- | --- | --- | ---
`returnValue` | | `string` | `''` | Gets or sets the dialog's return value, usually to indicate which button a user pressed to close it.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
`type` | `type` | `string` | `undefined` | The type of dialog for accessibility. Set this to `alert` to announce a dialog as an alert dialog.
`open` | `open` | `boolean` | `undefined` |
`open` | `open` | `boolean` | `undefined` |
`getOpenAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the opening animation for a dialog. Set to a new function to customize the animation.
`getCloseAnimation` | | `() => DialogAnimation` | `function { ... }` | Gets the closing animation for a dialog. Set to a new function to customize the animation.

10
docs/components/list.md
View File

@ -8,8 +8,6 @@ dirname: list
# Lists
<!-- TODO: update freshness to current date when copying. -->
<!--*
# Document freshness: For more information, see go/fresh-source.
freshness: { owner: 'emarquez' reviewed: '2023-08-09' }
@ -360,8 +358,8 @@ Token | Default value
--md-list-item-leading-image-shape: 25px;
}
img {
width: 40px;
}
width: 40px;
}
</style>
<md-list>
<md-list-item headline="Wide Cat">
@ -389,7 +387,7 @@ Token | Default value
Property | Attribute | Type | Default | Description
--- | --- | --- | --- | ---
`items` | | `ListItem[]` | `undefined` |
`items` | | `ListItem[]` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->
@ -425,7 +423,7 @@ Property | Attribute | Type | Default | Description
Event | Description
--- | ---
`request-activation` |
`request-activation` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->

10
docs/components/progress.md
View File

@ -72,7 +72,7 @@ Progress indicators may be determinate to show progress, or indeterminate for an
unspecified amount of progress.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
@ -112,7 +112,7 @@ Indeterminate progress indicators may cycle between four colors (primary,
primary container, tertiary, and tertiary container by default).
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
@ -157,7 +157,7 @@ Circular progress indicators display progress by animating along an invisible
circular track in a clockwise direction.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
@ -190,7 +190,7 @@ Linear progress indicators display progress by animating along the length of a
fixed, visible track.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
@ -222,7 +222,7 @@ indeterminate progress. The progress bar and track represent known progress
while the buffer dots represent unknown progress.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->

62
docs/components/radio.md
View File

@ -65,23 +65,9 @@ Radios can be pre-selected by adding a `checked` attribute.
Add a `value` to identify which radio is selected in a form.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<form>
@ -96,23 +82,9 @@ Add a `value` to identify which radio is selected in a form.
Associate a label with a radio using the `<label>` element.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-radio id="cats-radio" name="animals" value="cats"></md-radio>
@ -175,23 +147,9 @@ Token | Default value
### Example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<style>
@ -221,10 +179,10 @@ Property | Attribute | Type | Default | Description
--- | --- | --- | --- | ---
`disabled` | `disabled` | `boolean` | `false` | Whether or not the radio is disabled.
`value` | `value` | `string` | `'on'` | The element value to use in form submission when checked.
`checked` | `checked` | `boolean` | `undefined` |
`name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
`checked` | `checked` | `boolean` | `undefined` |
`name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->

56
docs/components/ripple.md
View File

@ -70,21 +70,7 @@ a control in one of three ways.
![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif "A bounded ripple.")
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
title="A bounded ripple."
aria-label="A container that displays a bounded ripple on interaction.">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
1. Attached to the parent element
@ -159,21 +145,7 @@ md-ripple.unbounded {
![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif "An unbounded ripple.")
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
title="An unbounded ripple."
aria-label="A circular container with an inner circle that displays an unbounded ripple around it on interaction.">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<style>
@ -228,21 +200,7 @@ Token | Default value
![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.")
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
class="styled-example"
title="Ripple theming example."
aria-label="Image of a ripple with a different theme applied">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<style>
@ -275,8 +233,8 @@ Token | Default value
Property | Attribute | Type | Default | Description
--- | --- | --- | --- | ---
`disabled` | `disabled` | `boolean` | `false` | Disables the ripple.
`htmlFor` | | `string` | `undefined` |
`control` | | `HTMLElement` | `undefined` |
`htmlFor` | | `string` | `undefined` |
`control` | | `HTMLElement` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->
@ -286,8 +244,8 @@ Property | Attribute | Type | Default | Description
Method | Parameters | Returns | Description
--- | --- | --- | ---
`attach` | `control` | `void` |
`detach` | _None_ | `void` |
`attach` | `control` | `void` |
`detach` | _None_ | `void` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->

12
docs/components/slider.md
View File

@ -107,7 +107,7 @@ when either handle is selected.
<md-slider labeled></md-slider>
```
<!-- TODO: ## Accessibility -->
<!-- TODO(b/318567101): ## Accessibility -->
## Theming
@ -186,11 +186,11 @@ Property | Attribute | Type | Default | Description
`ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks.
`labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated.
`range` | `range` | `boolean` | `false` | Whether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties.
`name` | | `string` | `undefined` |
`nameStart` | | `string` | `undefined` |
`nameEnd` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
`name` | | `string` | `undefined` |
`nameStart` | | `string` | `undefined` |
`nameEnd` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->

84
docs/components/switch.md
View File

@ -62,23 +62,9 @@ of an item on or off.
Switches are similar to checkboxes, and can be unselected or selected.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-switch></md-switch>
@ -91,23 +77,9 @@ Icons can be used to visually emphasize the switch's selected state. Switches
can choose to display both icons or only selected icons.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-switch icons></md-switch>
@ -122,23 +94,9 @@ can choose to display both icons or only selected icons.
Associate a label with a switch using the `<label>` element.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<label>
@ -191,23 +149,9 @@ Token | Default value
### Example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="">
TODO: update figure
</figure>
</div>
-->
<!-- catalog-only-end -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<style>
@ -247,12 +191,12 @@ Property | Attribute | Type | Default | Description
`showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property.
`required` | `required` | `boolean` | `false` | When true, require the switch to be selected when participating in form submission.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
`value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`.
`name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
`validity` | | `ValidityState` | `undefined` |
`validationMessage` | | `string` | `undefined` |
`willValidate` | | `boolean` | `undefined` |
`name` | | `string` | `undefined` |
`form` | | `HTMLFormElement` | `undefined` |
`labels` | | `NodeList` | `undefined` |
`validity` | | `ValidityState` | `undefined` |
`validationMessage` | | `string` | `undefined` |
`willValidate` | | `boolean` | `undefined` |
<!-- mdformat on(autogenerated might break rendering in catalog) -->

26
docs/components/tabs.md
View File

@ -71,9 +71,9 @@ Tabs contain multiple primary or secondary tab children. Use the same type of
tab in a tab bar.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -120,9 +120,9 @@ Icons communicate the type of content within a tab. Icons should be simple and
recognizable.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -140,9 +140,9 @@ recognizable.
Tabs may optionally show icons without a label.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -163,9 +163,9 @@ Primary tabs are placed at the top of the content pane under a top app bar. They
display the main content destinations.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -185,9 +185,9 @@ display the main content destinations.
Primary tabs can show their icons inline, like secondary tabs.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -210,9 +210,9 @@ Secondary tabs are used within a content area to further separate related
content and establish hierarchy.
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
<!-- TODO: catalog-include "figures/<component>/usage.html" -->
<!-- Need to add catalog-include "figures/<component>/usage.html" -->
```html
<md-tabs>
@ -347,7 +347,7 @@ Token | Default value
### Secondary tab example
<!-- no-catalog-start -->
<!-- TODO: add image -->
<!-- Need to add image -->
<!-- no-catalog-end -->
```html