Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(top-app-bar): Implement short top app bar #2290

Merged
merged 21 commits into from
Feb 28, 2018
Merged

feat(top-app-bar): Implement short top app bar #2290

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
52b1b49
feat(top-app-bar): Implement short top app bar
williamernest Feb 21, 2018
7bf080b
feat(top-app-bar): Add rtl support. Update readme.
williamernest Feb 22, 2018
bd45978
feat(top-app-bar): Update demo for rtl
williamernest Feb 22, 2018
08f3cb7
feat(top-app-bar): Update tests
williamernest Feb 22, 2018
6de87c1
feat(top-app-bar): Update to catch an edge case
williamernest Feb 22, 2018
7271757
Merge branch 'master' into feat/top-app-bar/add-short-top-app-bar
williamernest Feb 22, 2018
4709d6f
feat(top-app-bar): Update for comments
williamernest Feb 22, 2018
cc4139c
feat(top-app-bar): Rename adapter method
williamernest Feb 22, 2018
df9503d
feat(top-app-bar): Fix class name in readme.
williamernest Feb 23, 2018
4706e5e
feat(top-app-bar): Remove display none from adapter code
williamernest Feb 23, 2018
437586f
feat(top-app-bar): Rename mixin class selector to new name
williamernest Feb 23, 2018
a9f1749
feat(top-app-bar): Update for comments
williamernest Feb 23, 2018
5c7bfda
feat(top-app-bar): Update for comments. Update tests/readme
williamernest Feb 23, 2018
d56805f
Merge branch 'master' into feat/top-app-bar/add-short-top-app-bar
williamernest Feb 23, 2018
71324b5
feat(top-app-bar): Update for comments
williamernest Feb 27, 2018
b359062
feat(top-app-bar): Fix IE11/Edge
williamernest Feb 27, 2018
e9df173
feat(top-app-bar): Update for lint
williamernest Feb 27, 2018
97bb259
Merge branch 'master' into feat/top-app-bar/add-short-top-app-bar
williamernest Feb 27, 2018
6f59ec6
feat(top-app-bar): Update for comments
williamernest Feb 28, 2018
61c572b
feat(top-app-bar): Update for comments
williamernest Feb 28, 2018
1537127
Merge branch 'master' into feat/top-app-bar/add-short-top-app-bar
williamernest Feb 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 102 additions & 8 deletions demos/top-app-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,29 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't this in demos/top-app-bar.scss?

.demo-body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.demo-main {
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
overflow: auto;
}
</style>
</head>
<body class="mdc-typography">
<body class="mdc-typography demo-body">
<header id="demo-top-app-bar" 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__menu-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
<a class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">San Francisco, CA</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar">
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
<section id="iconSection" class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
<a class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
</section>
</div>
</header>
Expand Down Expand Up @@ -81,7 +92,7 @@
</nav>
</aside>

<main>
<main class="demo-main">
<div>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Expand Down Expand Up @@ -119,9 +130,62 @@
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>

</div>
</main>

<div class="demo-controls-container">
<h3>Demo Controls</h3>
<div>
<input type="checkbox" id="rtl-checkbox"/>
<label for="rtl-checkbox">RTL</label>
</div>
<div>
<input type="checkbox" id="short"/>
<label for="short">Short</label>
</div>
<div>
<input type="checkbox" id="no-right-icon"/>
<label for="no-right-icon">No Right Icon</label>
</div>
</div>

<script src="/assets/common.js" async></script>
<script src="/assets/material-components-web.js" async></script>
<script type="text/javascript">
Expand All @@ -137,6 +201,36 @@
drawer.open = true;
});

var iconSection = document.getElementById('iconSection');
var shortCheckbox = document.getElementById('short');
var oneRightIcon = document.getElementById('no-right-icon');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable name seems backwards of what this does?

var rtlCheckBox = document.getElementById('rtl-checkbox');

shortCheckbox.addEventListener('change', function() {
this.checked ? appBarEl.classList.add('mdc-top-app-bar--short') : appBarEl.classList.remove('mdc-top-app-bar--short');
this.checked ? appBarEl.classList.add('mdc-top-app-bar--short__right-icon') : appBarEl.classList.remove('mdc-top-app-bar--short__right-icon');

appBar.destroy();
appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);

if(!this.checked){
appBarEl.classList.remove('mdc-top-app-bar--short-collapsed');
}
});

oneRightIcon.addEventListener('change', function() {
if(this.checked) {
iconSection.innerHTML = '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we apply a class to the icon to set its display to none, rather than tweaking innerHTML? This doesn't seem like how we'd want anyone to actually do things.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but we'd have to change the totalActionItems adapter method to ignore display:none

appBarEl.classList.remove('mdc-top-app-bar--short__right-icon');
} else {
iconSection.innerHTML = '<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>';
appBarEl.classList.add('mdc-top-app-bar--short__right-icon');
}
});

rtlCheckBox.addEventListener('change', function() {
this.checked ? document.body.setAttribute("dir", "rtl") : document.body.removeAttribute("dir");
})
});
</script>
</body>
Expand Down
9 changes: 9 additions & 0 deletions demos/top-app-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,12 @@
padding: 16px;
}
}

.demo-controls-container {
@include mdc-elevation(4);
position: fixed;
bottom: 0;
right: 0;
background-color: white;
padding: 10px;
}
43 changes: 34 additions & 9 deletions packages/mdc-top-app-bar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Top App Bar

MDC Top App Bar acts as a container for items such as application title, navigation menu, and action items, among other
things. Top app bars scroll with content by default.
MDC Top App Bar acts as a container for items such as application title, navigation icon, and action items. Top app bars scroll with content by default.

## Design & API Documentation

Expand All @@ -28,7 +27,7 @@ npm install --save @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__menu-icon">menu</a>
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
Expand All @@ -41,7 +40,25 @@ Top app bars can accommodate multiple icons on the right:
<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__menu-icon">menu</a>
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<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="top-app-bar">
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
</div>
</header>
```

Short top app bars should only be used with one right icon:

```html
<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>
<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="top-app-bar">
Expand Down Expand Up @@ -70,16 +87,20 @@ Top app bars can accommodate multiple icons on the right:

Class | Description
--- | ---
`mdc-top-app-bar` | Mandatory
`mdc-top-app-bar` | Mandatory.
`mdc-top-app-bar--short` | Class used to style the top app bar as a short top app bar.
`mdc-topp-app-bar--short-collapsed` | Class used to indicate the short top app bar is collapsed.

### Sass Mixins

Mixin | Description
--- | ---
`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar
`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons
`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar
`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color
`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar.
`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons.
`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar.
`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color.
`mdc-top-app-bar-short-border-radius($border-radius)` | Sets the `border-bottom-right-radius` property. Used only for the short top app bar.
`mdc-top-app-bar-mobile-breakpoint($mobile-breakpoint)` | Sets the css breakpoint for the mobile styles (default is 599px).

### `MDCTopAppBar`

Expand All @@ -95,6 +116,10 @@ Method Signature | Description
`registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event.
`deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event.
`notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked.
`registerScrollHandler(handler) => void` | Registers a handler to be called when user scrolls. Our default implementation adds the handler as a listener to the window's `scroll` event.
`deregisterScrollHandler(handler) => void` | Unregisters a handler to be called when user scrolls. Our default implementation removes the handler as a listener to the window's `scroll` event.
`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled upward.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"upward" sounds potentially backwards here depending on how you think about it... how about "scrolled from the top of the page"?

`totalActionIcons() => number` | Gets the number of action items on the right side of the top app bar.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We refer to action items in prose but the API uses the word Icons? Do we ever expect any action items that aren't icons?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spec refers to them as Action Items but never uses anything other than icons. I'll change all of them to Items for consistency.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update to totalActionItems


### Events

Expand Down
42 changes: 40 additions & 2 deletions packages/mdc-top-app-bar/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,56 @@

@mixin mdc-top-app-bar-icon-ink-color($color) {
.mdc-top-app-bar__icon,
.mdc-top-app-bar__menu-icon {
.mdc-top-app-bar__navigation-icon {
@include mdc-theme-prop(color, $color);
@include mdc-states($color);
}
}

@mixin mdc-top-app-bar-short-border-radius($border-radius: $mdc-top-app-bar-short-collapsed-border-radius) {
@include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $mdc-top-app-bar-short-collapsed-border-radius);
}

@mixin mdc-top-app-bar-mobile-breakpoint($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we make this a private mixin and add !default to the breakpoint variable instead? Otherwise these styles are getting emitted for the default breakpoint anyway and there's not really a way to undo that.

@media (max-width: $mobile-breakpoint) {
.mdc-top-app-bar {
.mdc-top-app-bar__row {
height: $mdc-top-app-bar-mobile-row-height;
}

.mdc-top-app-bar__section {
padding: $mdc-top-app-bar-mobile-section-padding;
}

.mdc-top-app-bar__title {
@include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-mobile-title-left-padding);
}
}

.mdc-top-app-bar--short {
transition: width 200ms $mdc-top-app-bar-standard-easing;

.mdc-top-app-bar__row {
height: $mdc-top-app-bar-mobile-row-height;
}
}

.mdc-top-app-bar--short-collapsed {
transition: width 250ms $mdc-top-app-bar-standard-easing;

.mdc-top-app-bar__section--align-end {
@include mdc-rtl-reflexive-box(padding, right, $mdc-top-app-bar-short-collapsed-right-icon-padding);
}
}
}
}

//
// Private
//

// 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__menu-icon share all styles except for
// 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;
Expand Down
6 changes: 6 additions & 0 deletions packages/mdc-top-app-bar/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,9 @@ $mdc-top-app-bar-mobile-title-left-padding: 12px;
$mdc-top-app-bar-mobile-section-padding: 4px;

$mdc-top-app-bar-icon-size: 24px;

$mdc-top-app-bar-short-collapsed-border-radius: 10px;
$mdc-top-app-bar-short-collapsed-width: 56px;
$mdc-top-app-bar-short-collapsed-right-icon-padding: 12px;

$mdc-top-app-bar-standard-easing: cubic-bezier(.4, 0, .2, 1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure this matches one of the variables in mdc-animation; reuse that instead?

13 changes: 12 additions & 1 deletion packages/mdc-top-app-bar/adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ class MDCTopAppBarAdapter {
*/
hasClass(className) {}


/**
* Registers an event handler on the navigation icon element for a given event.
* @param {string} type
Expand All @@ -66,6 +65,18 @@ class MDCTopAppBarAdapter {
* Emits an event when the navigation icon is clicked.
*/
notifyNavigationIconClicked() {}

/** @param {function(!Event)} handler */
registerScrollHandler(handler) {}

/** @param {function(!Event)} handler */
deregisterScrollHandler(handler) {}

/** @return {number} */
getViewportScrollY() {}

/** @return {number} */
totalActionIcons() {}
}

export default MDCTopAppBarAdapter;
Loading