Skip to content

Commit

Permalink
[Docs] Updated dev doc for tonal surface colors in affected components.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 556901517
  • Loading branch information
@pekingme @imhappi
pekingme authored and imhappi committed Aug 14, 2023
1 parent c04eaba commit 2114a11
Show file tree
Hide file tree
Showing 18 changed files with 64 additions and 57 deletions.
2 changes: 1 addition & 1 deletion docs/components/BottomAppBar.md
View file
Expand Up @@ -236,7 +236,7 @@ floating action button (FAB), action item(s) and an overflow menu.

Element | Attribute | Related method(s) | Default value
------------- | ------------------------ | ------------------------------------------ | -------------
**Color** | `app:backgroundTint` | `setBackgroundTint`<br>`getBackgroundTint` | `?attr/colorSurface`
**Color** | `app:backgroundTint` | `setBackgroundTint`<br>`getBackgroundTint` | `?attr/colorSurfaceContainer`
**Elevation** | `app:elevation` | `setElevation` | `3dp`
**Height** | `android:minHeight` | `setMinimumHeight`<br>`getMinimumHeight` | `80dp`
**Shadows** | `app:addElevationShadow` | N/A | `false`
Expand Down
2 changes: 1 addition & 1 deletion docs/components/BottomNavigation.md
View file
Expand Up @@ -264,7 +264,7 @@ The following is an anatomy diagram for the bottom navigation bar:

**Element** | **Attribute** | **Related methods** | **Default value**
----------------- | --------------------- | ------------------- | -----------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainer`
**Elevation** | `app:elevation` | `setElevation` | `3dp`
**Compat Shadow** | `compatShadowEnabled` | N/A | `false`

Expand Down
4 changes: 2 additions & 2 deletions docs/components/BottomSheet.md
View file
Expand Up @@ -421,8 +421,8 @@ Content can also be added below the drag handle. (see [Using bottom sheets](#usi

Element | Attribute | Related method(s) | Default value
-------------- | --------------------- | --------------------------------- | -------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerLow`
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceCornerExtraLarge`
**Elevation** | `android:elevation` | N/A | `1dp`
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | `640dp`
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A
Expand Down
2 changes: 1 addition & 1 deletion docs/components/Button.md
View file
Expand Up @@ -143,7 +143,7 @@ Element | Attribute | Related method(s) |

Element | Attribute | Related method(s) | Default value
---------------- | --------------------- | ---------------------------------------------------------------------------- | -------------
**Color** | `app:backgroundTint` | `setBackgroundColor`<br/>`setBackgroundTintList`<br/>`getBackgroundTintList` | `?attr/colorSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml))
**Color** | `app:backgroundTint` | `setBackgroundColor`<br/>`setBackgroundTintList`<br/>`getBackgroundTintList` | `?attr/colorSurfaceContainerLow` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml))
**Stroke color** | `app:strokeColor` | `setStrokeColor`<br/>`setStrokeColorResource`<br/>`getStrokeColor` | `null`
**Stroke width** | `app:strokeWidth` | `setStrokeWidth`<br/>`setStrokeWidthResource`<br/>`getStrokeWidth` | `0dp`
**Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`<br/>`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent`
Expand Down
2 changes: 1 addition & 1 deletion docs/components/Card.md
View file
Expand Up @@ -367,7 +367,7 @@ shown in the [card examples](#card-examples) section.

Element | Attribute | Related method(s) | Default value
-------------------- | ------------------------- | ------------------------------------------------------------------- | -------------
**Color** | `app:cardBackgroundColor` | `setCardBackgroundColor`<br/>`getCardBackgroundColor` | `?attr/colorSurface` or `?attr/colorSurfaceVariant` (filled style)
**Color** | `app:cardBackgroundColor` | `setCardBackgroundColor`<br/>`getCardBackgroundColor` | `?attr/colorSurface` (outlined style)</br>`?attr/colorSurfaceContainerHighest` (filled style)</br>`?attr/colorSurfaceContainerLow` (elevated style)
**Foreground color** | `app:cardForegroundColor` | `setCardForegroundColor`<br/>`getCardForegroundColor` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/card/res/color/m3_card_foreground_color.xml))
**Stroke color** | `app:strokeColor` | `setStrokeColor`<br/>`getStrokeColor`<br/>`getStrokeColorStateList` | `?attr/colorOutline` (unchecked)<br/>`?attr/colorSecondary` (checked)
**Stroke width** | `app:strokeWidth` | `setStrokeWidth`<br/>`getStrokeWidth` | `1dp` (outlined style)<br/>`0dp` (elevated or filled style)
Expand Down
7 changes: 7 additions & 0 deletions docs/components/DatePicker.md
View file
Expand Up @@ -294,6 +294,13 @@ The following diagram shows the elements of a date picker:
6. Current date
7. Selected date

### Container

Element | Attribute | Related method(s) | Default value
--------- | --------------------- | ----------------- | -------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerHigh`
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceCornerExtraLarge`

### Title

Element | Attribute | Related method(s) | Default value
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Dialog.md
View file
Expand Up @@ -126,8 +126,8 @@ particular type), a background scrim, and, optionally, title and buttons.

Element | **Attribute** | **Related methods** | **Default value**
----------------------------------- | -------------------------------------------------------- | ------------------------------------------------------ | -----------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
**Shape** | `app:shapeAppearance`<br/>`app:shapeAppearanceOverlay` | N/A | `?attr/shapeAppearanceMediumComponent` with a corner size of `28dp`
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerHigh`
**Shape** | `app:shapeAppearance`<br/>`app:shapeAppearanceOverlay` | N/A | `?attr/shapeAppearanceCornerExtraLarge`
**Background inset start and end** | `app:backgroundInsetStart`<br/>`app:backgroundInsetEnd` | `setBackgroundInsetStart`<br/>`setBackgroundInsetEnd` | `24dp`
**Background inset top and bottom** | `app:backgroundInsetTop`<br/>`app:backgroundInsetBottom` | `setBackgroundInsetTop`<br/>`setBackgroundInsetBottom` | `80dp`

Expand Down
8 changes: 4 additions & 4 deletions docs/components/Menu.md
View file
Expand Up @@ -426,7 +426,7 @@ The following are menu anatomy diagrams showing all possible elements:
Element | Attribute | Related method(s) | Default value
-------------- | ----------------------------- | ----------------- | -------------
**Background** | `android:popupMenuBackground` | N/A | `?attr/popupMenuBackground`
**Color** | N/A | N/A | `?attr/colorSurface`
**Color** | N/A | N/A | `?attr/colorSurfaceContainer`
**Elevation** | `android:popupElevation` | N/A | `3dp`

#### Text attributes
Expand Down Expand Up @@ -571,17 +571,17 @@ For all attributes that apply to the `TextInputLayout`, see the
#### `MaterialAutoCompleteTextView` attributes (input text, dropdown menu)

Element | Attribute | Related method(s) | Default value
----------------------------------------- | ------------------------------------------------------------------- |-----------------------------------------------------------------------------------------------------| -------------
----------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------
**Input text** | `android:text` | `setText`<br/>`getText` | `@null`
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceBodyLarge`
**Input accepted** | `android:inputType` | `N/A` | framework's default
**Input text color** | `android:textColor` | `setTextColor`<br/>`getTextColors`<br/>`getCurrentTextColor` | `?android:textColorPrimary`
**Cursor color** | N/A (color comes from the theme attr `?attr/colorControlActivated`) | N/A | `?attr/colorPrimary`
**Dropdown menu<br/>container color** | `app:dropDownBackgroundTint` | `setDropDownBackgroundTint`<br/>`setDropDownBackgroundTintList`<br/>`getDropDownBackgroundTintList` | `@null`</br>(which means `colorSurface` with</br> elevation overlay will be used)
**Dropdown menu<br/>container color** | `app:dropDownBackgroundTint` | `setDropDownBackgroundTint`<br/>`setDropDownBackgroundTintList`<br/>`getDropDownBackgroundTintList` | `colorSurfaceContainer`
**Dropdown menu elevation** | `android:popupElevation` | `getPopupElevation` | `3dp`
**Simple items** | `app:simpleItems` | `setSimpleItems` | `null`
**Simple item layout** | `app:simpleItemLayout` | N/A | `@layout/m3_auto_complete_simple_item`
**Selected simple item color** | `app:simpleItemSelectedColor` | `setSimpleItemSelectedColor`<br/>`getSimpleItemSelectedColor` | `?attr/colorSurfaceVariant`
**Selected simple item color** | `app:simpleItemSelectedColor` | `setSimpleItemSelectedColor`<br/>`getSimpleItemSelectedColor` | `?attr/colorSurfaceContainerHighest`
**Selected simple item<br/>ripple color** | `app:simpleItemSelectedRippleColor` | `setSimpleItemSelectedRippleColor`<br/>`getSimpleItemSelectedRippleColor` | `@color/m3_simple_item_ripple_color`

#### Styles
Expand Down
4 changes: 2 additions & 2 deletions docs/components/NavigationDrawer.md
View file
Expand Up @@ -263,12 +263,12 @@ subtitles, and an optional scrim.

Element | Attribute(s) | Related method(s) | Default value
----------------------- | ------------------------------------------------------------------- | ------------------------------------------------ | -------------
**Color** | `android:background` | `setBackground`<br>`getBackground` | `?attr/colorSurface`
**Color** | `android:background` | `setBackground`<br>`getBackground` | `?attr/colorSurfaceContainerLow`
**Shape** | `app:shapeAppearance`<br>`app:shapeAppearanceOverlay` | N/A | `null`
**Elevation** | `app:elevation` (can be used on `NavigationView` or `DrawerLayout`) | `setElevation`<br>`getElevation` | `0dp` (`NavigationView`) or `1dp` (`DrawerLayout`)
**Max width** | `android:maxWidth` | N/A | `280dp`
**Fits system windows** | `android:fitsSystemWindows` | `setFitsSystemWindows`<br>`getFitsSystemWindows` | `true`
**Drawer corner size** | `drawerLayoutCornerSize` | N/A | `16dp`
**Drawer corner size** | `drawerLayoutCornerSize` | N/A | `16dp`

### Header attributes

Expand Down
2 changes: 1 addition & 1 deletion docs/components/ProgressIndicator.md
View file
Expand Up @@ -293,7 +293,7 @@ Element | Attribute | Related method(s)
----------------------------- | --------------------------- | --------------------------------------------------------- | -------------
**Track thickness** | `app:trackThickness` | `setTrackThickness`</br>`getTrackThickness` | `4dp`
**Indicator color** | `app:indicatorColor` | `setIndicatorColor`</br>`getIndicatorColor` | `colorPrimary`
**Track color** | `app:trackColor` | `setTrackColor`</br>`getTrackColor` | `indicatorColor` at `disabledAlpha`
**Track color** | `app:trackColor` | `setTrackColor`</br>`getTrackColor` | `colorSurfaceContainerHighest` (linear)</br>`@android:color/transparent` (circular)
**Track corner radius** | `app:trackCornerRadius` | `setTrackCornerRadius`</br>`getTrackCornerRadius` | `0dp`
**Show animation behavior** | `app:showAnimationBehavior` | `setShowAnimationBehavior`</br>`getShowAnimationBehavior` | `none`
**Hide animation behavior** | `app:hideAnimationBehavior` | `setHideAnimationBehavior`</br>`getHideAnimationBehavior` | `none`
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Search.md
View file
Expand Up @@ -105,7 +105,7 @@ Element | Attribute | Related method(s)
**Search text appearance** | `android:textAppearance` | `setTextAppearance`<br/>`getTextAppearance` | `@style/TextAppearance.Material3.SearchBar`
**Search text** | `android:text` | `setText`<br/>`getText` | `null`
**Search hint** | `android:hint` | `setHint`<br/>`getHint` | `null`
**Color** | `app:backgroundTint` | -- | `?attr/colorSurface`
**Color** | `app:backgroundTint` | -- | `?attr/colorSurfaceContainerHigh`
**Flag for default margins** | `app:defaultMarginsEnabled` | -- | `true`
**Flag for navigation icon** | `app:hideNavigationIcon` | -- | `false`

Expand Down Expand Up @@ -218,7 +218,7 @@ Element | Attribute | Related meth
**Search text appearance** | `android:textAppearance` | `setTextAppearance`<br/>`getTextAppearance` | `@style/TextAppearance.Material3.SearchBar`
**Search text** | `android:text` | `setText`<br/>`getText` | `null`
**Search hint** | `android:hint` | `setHint`<br/>`getHint` | `null`
**Color** | `app:backgroundTint` | -- | `?attr/colorSurface`
**Color** | `app:backgroundTint` | -- | `?attr/colorSurfaceContainerHigh`
**Flag for navigation icon** | `app:hideNavigationIcon` | -- | `true`
**Flag for `DrawerArrowDrawable`** | `app:useDrawerArrowDrawable` | -- | `false`
**Flag for soft keyboard** | `app:autoShowKeyboard` | -- | `true`
Expand Down
16 changes: 8 additions & 8 deletions docs/components/SideSheet.md
View file
Expand Up @@ -264,15 +264,15 @@ Side sheets have a sheet, content, and, if modal, a scrim.

### Sheet attributes

Element | Attribute | Related method(s) | Default value
-------------- |-----------------------------|---------------------------------------------------------| -------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
Element | Attribute | Related method(s) | Default value
---------------------------- | --------------------------- | ------------------------------------------------------- | -------------
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`</br>`?attr/colorSurfaceContainerLow` (modal)
**Coplanar sibling view id** | `app:coplanarSiblingViewId` | `setCoplanarSiblingViewId`<br/>`setCoplanarSiblingView` | N/A
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
**Sheet edge** | `android:layout_gravity` | `setSheetEdge` (modal only) | end
**Elevation** | `android:elevation` | N/A | 0dp
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | N/A
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
**Sheet edge** | `android:layout_gravity` | `setSheetEdge` (modal only) | end
**Elevation** | `android:elevation` | N/A | 0dp
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | N/A
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A

### Behavior attributes

Expand Down

0 comments on commit 2114a11

Please sign in to comment.