Skip to content

Commit

Permalink
feat(top-app-bar): use mdc-icon-button styles instead of top app bar (#…
Browse files Browse the repository at this point in the history 
…4745)
  • Loading branch information
@abhiomkar
Matt Goo authored and abhiomkar committed Jun 11, 2019
1 parent d644e78 commit 605f77e
Show file tree
Hide file tree
Showing 27 changed files with 90 additions and 93 deletions.
19 changes: 11 additions & 8 deletions packages/mdc-top-app-bar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ npm install @material/top-app-bar
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
```

> NOTE: Please see note below about `mdc-icon-button` in the [Top App Bar With Action Items](#top-app-bar-with-action-items) section.
#### Menu Icons

We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:
Expand All @@ -67,6 +69,7 @@ However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any

```scss
@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/icon-button/mdc-icon-button";
```

### JavaScript Instantiation
Expand All @@ -85,19 +88,19 @@ const topAppBar = new MDCTopAppBar(topAppBarElement);

### Top App Bar With Action Items

Top app bars can contain action items which are placed on the side opposite the navigation icon.
Top app bars can contain action items which are placed on the side opposite the navigation icon. You must also attach the `mdc-icon-button` class to both the `mdc-top-app-bar__navigation-icon` and the `mdc-top-app-bar__action-item` elements in order to get the correct styles applied. For further documentation on icons, please see the [mdc-icon-button docs](../mdc-icon-button/README.md).

```html
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
</section>
</div>
</header>
Expand All @@ -111,11 +114,11 @@ Short top app bars are top app bars that can collapse to the navigation icon sid
<header class="mdc-top-app-bar mdc-top-app-bar--short">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
</section>
</div>
</header>
Expand Down
25 changes: 0 additions & 25 deletions packages/mdc-top-app-bar/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,28 +107,3 @@
}
}
}

// Applies styles to the different types of icons that can exist in top-app-bars.
// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__navigation-icon share all styles except for
// horizontal padding.
@mixin mdc-top-app-bar-icon_() {
@include mdc-ripple-surface;
@include mdc-ripple-radius-unbounded;

display: flex;
position: relative;
flex-shrink: 0;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
height: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
padding: $mdc-top-app-bar-icon-padding;
border: none;
outline: none;
background-color: transparent;
fill: currentColor;
color: inherit;
text-decoration: none;
cursor: pointer;
}
3 changes: 0 additions & 3 deletions packages/mdc-top-app-bar/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ $mdc-top-app-bar-title-left-padding: 20px !default;
$mdc-top-app-bar-section-vertical-padding: 8px !default;
$mdc-top-app-bar-section-horizontal-padding: 12px !default;

$mdc-top-app-bar-icon-padding: 12px !default;
$mdc-top-app-bar-icon-size: 24px !default;

$mdc-top-app-bar-mobile-breakpoint: 599px !default;

// Default mobile styles
Expand Down
5 changes: 0 additions & 5 deletions packages/mdc-top-app-bar/mdc-top-app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,6 @@
overflow: hidden;
z-index: 1;
}

&__action-item,
&__navigation-icon {
@include mdc-top-app-bar-icon_;
}
}

@at-root {
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-top-app-bar/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@material/base": "^1.0.0",
"@material/elevation": "^1.1.0",
"@material/ripple": "^2.3.0",
"@material/icon-button": "^2.1.1",
"@material/rtl": "^0.42.0",
"@material/shape": "^1.1.1",
"@material/theme": "^1.1.0",
Expand Down
16 changes: 8 additions & 8 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1768,34 +1768,34 @@
}
},
"spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short-collapsed.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_ie_11.png"
}
},
Expand Down
6 changes: 4 additions & 2 deletions test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Dismissible Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand All @@ -46,11 +48,11 @@
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar test-drawer-top-app-bar--dismissible">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
7 changes: 4 additions & 3 deletions test/screenshot/spec/mdc-drawer/classes/dismissible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,12 @@
<title>Dismissible Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
<script>
Expand Down Expand Up @@ -99,11 +100,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
6 changes: 4 additions & 2 deletions test/screenshot/spec/mdc-drawer/classes/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Modal Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -99,11 +101,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Modal Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
4 changes: 3 additions & 1 deletion test/screenshot/spec/mdc-drawer/classes/permanent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Permanent Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -102,7 +104,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
5 changes: 3 additions & 2 deletions test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@
<head>
<meta charset="utf-8">
<title>fill-color-accessible Drawer Mixin - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -102,7 +103,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<span class="mdc-list-item__text"><span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
Loading

0 comments on commit 605f77e

Please sign in to comment.