Skip to content

Commit

Permalink
[AppBar] Add color transparent support
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Feb 1, 2020
1 parent bd83fd5 commit e269421
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 4 deletions.
3 changes: 2 additions & 1 deletion docs/pages/api/app-bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
|:-----|:-----|:--------|:------------|
| <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The content of the component. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'transparent'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
| <span class="prop-name">position</span> | <span class="prop-type">'absolute'<br>&#124;&nbsp;'fixed'<br>&#124;&nbsp;'relative'<br>&#124;&nbsp;'static'<br>&#124;&nbsp;'sticky'</span> | <span class="prop-default">'fixed'</span> | The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |

The `ref` is forwarded to the root element.
Expand All @@ -50,6 +50,7 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiAppBar-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiAppBar-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiAppBar-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
| <span class="prop-name">colorTransparent</span> | <span class="prop-name">.MuiAppBar-colorTransparent</span> | Styles applied to the root element if `color="transparent"`.

You can override the style of the component thanks to one of these customization points:

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/AppBar/AppBar.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color?: PropTypes.Color;
color?: PropTypes.Color | 'transparent';
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
Expand Down
8 changes: 6 additions & 2 deletions packages/material-ui/src/AppBar/AppBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ export const styles = theme => {
},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
backgroundColor: 'inherit',
color: 'inherit',
},
/* Styles applied to the root element if `color="transparent"`. */
colorTransparent: {
backgroundColor: 'transparent',
color: 'inherit',
},
};
Expand Down Expand Up @@ -121,7 +125,7 @@ AppBar.propTypes = {
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
Expand Down

0 comments on commit e269421

Please sign in to comment.