diff --git a/CHANGELOG.md b/CHANGELOG.md index bc4c6eec1..a186e9bb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,6 +48,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - Fix bug where setting the `` `labelText` property could throw an exception and fail to render ([#367](https://github.com/material-components/material-components-web-components/issues/367)). +- Removed: + - mwc-top-app-bar-short has been removed after guidance from the Material Design team. ## [0.6.0] - 2019-06-05 - Upgrade lerna to 3.x diff --git a/demos/index.js b/demos/index.js index 8f10d05fe..b43a98a2f 100644 --- a/demos/index.js +++ b/demos/index.js @@ -211,13 +211,6 @@ class DemoView extends LitElement { Top App Bars are a container for items such as application title, navigation icon, and action items. - - - - Top App Bar Short - Top App Bars are a container for items such as application title, navigation icon, and action items. - - `; diff --git a/demos/top-app-bar-short.html b/demos/top-app-bar-short.html deleted file mode 100644 index 13ac606cf..000000000 --- a/demos/top-app-bar-short.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - top app bar short demo - - - - - - - -
- - Top App Bar Short -
-
-
- -
-
- -
-
- -
-
- -
-
- - - \ No newline at end of file diff --git a/demos/top-app-bars/short.html b/demos/top-app-bars/short.html deleted file mode 100644 index d3440e1b1..000000000 --- a/demos/top-app-bars/short.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - -
Short
- -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- - \ No newline at end of file diff --git a/packages/top-app-bar-fixed/README.md b/packages/top-app-bar-fixed/README.md index 5d83e0091..f5f2ec530 100644 --- a/packages/top-app-bar-fixed/README.md +++ b/packages/top-app-bar-fixed/README.md @@ -9,8 +9,6 @@ Fixed Top App Bars are a container for items such as application title, navigati For a version of this component that scrolls, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar) -For a collapsable version of this component, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-short) - [Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html) ## Installation diff --git a/packages/top-app-bar-short/.npmignore b/packages/top-app-bar-short/.npmignore deleted file mode 100644 index 9b5871b96..000000000 --- a/packages/top-app-bar-short/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -.tsbuildinfo -tsconfig.json -*.tgz -images/* diff --git a/packages/top-app-bar-short/README.md b/packages/top-app-bar-short/README.md deleted file mode 100644 index 1e1e899b6..000000000 --- a/packages/top-app-bar-short/README.md +++ /dev/null @@ -1,120 +0,0 @@ -# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-short.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-short) - -> IMPORTANT: The Material Web Components are a work in progress and subject to -> major changes until 1.0 release. - -Short Top App Bars are a container for items such as application title, navigation icon, and an action item that shrinks into the corner. - -![](images/short.gif) - -For a fixed position version of this component, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed) - -For a scrollable version of this component, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar) - -[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html) - -## Installation - -```sh -npm install @material/mwc-top-app-bar-short -``` - -> NOTE: The Material Web Components are distributed as ES2017 JavaScript -> Modules, and use the Custom Elements API. They are compatible with all modern -> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional -> tooling step is required to resolve *bare module specifiers*, as well as -> transpilation and polyfills for Edge and IE11. See -> [here](https://github.com/material-components/material-components-web-components#quick-start) -> for detailed instructions. - -## Example Usage - -### Standard - - - -```html - - -
Title
- -
- -``` - -### Center Title - - - -```html - - -
Title
- -
- -``` - -### Always Collapsed - -![](images/collapsed.gif) - - - -```html - - -
Title
- -
- -``` - -### Customize Colors - - - -```css -mwc-top-app-bar-short { - --mdc-theme-primary: orange; - --mdc-theme-on-primary: black; -} -``` - -## API - -### Slots -| Name | Description -| ---- | ----------- -| `actionItems` | One `` element to use for action icons on the right side. -| `navigationIcon` | One `` element to use for the left icon. -| `title` | A `
` or `` that will be used as the title text. -| _default_ | Scrollable content to display under the bar. This may be the entire application. - -### Properties/Attributes -| Name | Type | Default | Description -| ---- | ---- | ------- | ----------- -| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`. -| `alwaysCollapsed` | `boolean` | `false` | Whether the short top app bar should always be collapsed. -| `collapsed` | `boolean` (read-only) | `false` | Whether the short top app bar is currently collapsed. -| `scrollTarget` | `HTMLElement` \| `Window` | `window` | Element used to listen for `scroll` events. - -### Methods -*None* - -### Events - -| Name | Detail | Description -| ---- | ------ | ----------- -| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked. - -### CSS Custom Properties - -| Name | Default | Description -| ---- | ------- | ----------- -| `--mdc-theme-primary` | ![](images/color_6200ee.png) `#6200ee` | Background color of the bar -| `--mdc-theme-on-primary` | ![](images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors - -## Additional references - -- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/) \ No newline at end of file diff --git a/packages/top-app-bar-short/images/center_title.png b/packages/top-app-bar-short/images/center_title.png deleted file mode 100644 index 885abf0b0..000000000 Binary files a/packages/top-app-bar-short/images/center_title.png and /dev/null differ diff --git a/packages/top-app-bar-short/images/collapsed.gif b/packages/top-app-bar-short/images/collapsed.gif deleted file mode 100644 index 2ebeca21c..000000000 Binary files a/packages/top-app-bar-short/images/collapsed.gif and /dev/null differ diff --git a/packages/top-app-bar-short/images/collapsed.png b/packages/top-app-bar-short/images/collapsed.png deleted file mode 100644 index 2fbff9751..000000000 Binary files a/packages/top-app-bar-short/images/collapsed.png and /dev/null differ diff --git a/packages/top-app-bar-short/images/color_6200ee.png b/packages/top-app-bar-short/images/color_6200ee.png deleted file mode 100644 index c7d3e346a..000000000 Binary files a/packages/top-app-bar-short/images/color_6200ee.png and /dev/null differ diff --git a/packages/top-app-bar-short/images/color_ffffff.png b/packages/top-app-bar-short/images/color_ffffff.png deleted file mode 100644 index 52e898d60..000000000 Binary files a/packages/top-app-bar-short/images/color_ffffff.png and /dev/null differ diff --git a/packages/top-app-bar-short/images/custom_colors.png b/packages/top-app-bar-short/images/custom_colors.png deleted file mode 100644 index 5b5c66b5f..000000000 Binary files a/packages/top-app-bar-short/images/custom_colors.png and /dev/null differ diff --git a/packages/top-app-bar-short/images/short.gif b/packages/top-app-bar-short/images/short.gif deleted file mode 100644 index 927426f9d..000000000 Binary files a/packages/top-app-bar-short/images/short.gif and /dev/null differ diff --git a/packages/top-app-bar-short/images/standard.png b/packages/top-app-bar-short/images/standard.png deleted file mode 100644 index b58fc2271..000000000 Binary files a/packages/top-app-bar-short/images/standard.png and /dev/null differ diff --git a/packages/top-app-bar-short/package.json b/packages/top-app-bar-short/package.json deleted file mode 100644 index 5fcae9bcd..000000000 --- a/packages/top-app-bar-short/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "@material/mwc-top-app-bar-short", - "version": "0.6.0", - "description": "", - "main": "mwc-top-app-bar-short.js", - "repository": { - "type": "git", - "url": "https://github.com/material-components/material-components-web-components.git", - "directory": "packages/top-app-bar" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "build": "tsc" - }, - "author": "", - "license": "Apache-2.0", - "dependencies": { - "@material/mwc-base": "^0.6.0", - "@material/mwc-top-app-bar": "^0.6.0", - "@material/top-app-bar": "^3.0.0" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/top-app-bar-short/src/mdc-top-app-bar-short-foundation.ts b/packages/top-app-bar-short/src/mdc-top-app-bar-short-foundation.ts deleted file mode 100644 index 2a695c1b4..000000000 --- a/packages/top-app-bar-short/src/mdc-top-app-bar-short-foundation.ts +++ /dev/null @@ -1,119 +0,0 @@ -/** - * @license - * Copyright 2018 Google Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ - -/* NOTE: Delete this after - * https://github.com/material-components/material-components-web/pull/5009 - * lands */ -import {MDCTopAppBarAdapter} from '@material/top-app-bar/adapter'; -import {cssClasses} from '@material/top-app-bar/constants'; -import {MDCTopAppBarBaseFoundation} from '@material/top-app-bar/foundation'; - -export class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation { - // Public visibility for backward compatibility. - get isCollapsed(): boolean { - return this.isCollapsed_; - } - - private isCollapsed_ = false; - - private isAlwaysCollapsed_ = false; - - /* istanbul ignore next: optional argument is not a branch statement */ - constructor(adapter?: Partial) { - super(adapter); - } - - init() { - super.init(); - - if (this.adapter_.getTotalActionItems() > 0) { - this.adapter_.addClass(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS); - } - - // If initialized with SHORT_COLLAPSED_CLASS, the bar should always be - // collapsed - this.setAlwaysCollapsed( - this.adapter_.hasClass(cssClasses.SHORT_COLLAPSED_CLASS)); - } - - /** - * Set if the short top app bar should always be collapsed. - * - * When set to `true`, the bar collapses. - * When set to `false`, the bar will determine if it should collapse based on - * scroll position. - */ - setAlwaysCollapsed(value: boolean) { - this.isAlwaysCollapsed_ = !!value; - if (this.isAlwaysCollapsed_) { - this.collapse_(); - } else { - // let maybeCollapseBar_ determine if the bar should be collapsed - this.maybeCollapseBar_(); - } - } - - getAlwaysCollapsed() { - return this.isAlwaysCollapsed_; - } - - /** - * Scroll handler for applying/removing the collapsed modifier class on the - * short top app bar. - * @override - */ - handleTargetScroll() { - this.maybeCollapseBar_(); - } - - private maybeCollapseBar_() { - if (this.isAlwaysCollapsed_) { - return; - } - const currentScroll = this.adapter_.getViewportScrollY(); - - if (currentScroll <= 0) { - if (this.isCollapsed_) { - this.uncollapse_(); - } - } else { - if (!this.isCollapsed_) { - this.collapse_(); - } - } - } - - private uncollapse_() { - this.adapter_.removeClass(cssClasses.SHORT_COLLAPSED_CLASS); - this.isCollapsed_ = false; - } - - private collapse_() { - this.adapter_.addClass(cssClasses.SHORT_COLLAPSED_CLASS); - this.isCollapsed_ = true; - } -} - -// tslint:disable-next-line:no-default-export Needed for backward compatibility -// with MDC Web v0.44.0 and earlier. -export default MDCShortTopAppBarFoundation; diff --git a/packages/top-app-bar-short/src/mwc-top-app-bar-short.ts b/packages/top-app-bar-short/src/mwc-top-app-bar-short.ts deleted file mode 100644 index 4840c2e06..000000000 --- a/packages/top-app-bar-short/src/mwc-top-app-bar-short.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** -@license -Copyright 2019 Google Inc. All Rights Reserved. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ -import {customElement} from '@material/mwc-base/base-element.js'; -import {style} from '@material/mwc-top-app-bar/mwc-top-app-bar-css'; - -import {TopAppBarShortBase} from './top-app-bar-short-base'; - -declare global { - interface HTMLElementTagNameMap { - 'mwc-top-app-bar-short': TopAppBarShort; - } -} - -@customElement('mwc-top-app-bar-short') -export class TopAppBarShort extends TopAppBarShortBase { - static styles = style; -} diff --git a/packages/top-app-bar-short/src/top-app-bar-short-base.ts b/packages/top-app-bar-short/src/top-app-bar-short-base.ts deleted file mode 100644 index 62a877722..000000000 --- a/packages/top-app-bar-short/src/top-app-bar-short-base.ts +++ /dev/null @@ -1,47 +0,0 @@ -/** -@license -Copyright 2019 Google Inc. All Rights Reserved. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ -import {observer, property} from '@material/mwc-base/base-element'; -import {TopAppBarBaseBase} from '@material/mwc-top-app-bar/mwc-top-app-bar-base-base'; - -import MDCShortTopAppBarFoundation from './mdc-top-app-bar-short-foundation'; - -export class TopAppBarShortBase extends TopAppBarBaseBase { - protected mdcFoundation!: MDCShortTopAppBarFoundation; - - protected mdcFoundationClass = MDCShortTopAppBarFoundation; - - @property({type: Boolean}) - @observer(function(this: TopAppBarShortBase, value: boolean) { - this.mdcFoundation.setAlwaysCollapsed(value); - }) - alwaysCollapsed = false; - - protected barClasses() { - return { - 'mdc-top-app-bar--short': true, - }; - } - - protected contentClasses() { - return {'mdc-top-app-bar--short-fixed-adjust': true}; - } - - protected handleTargetScroll = () => { - this.mdcFoundation.handleTargetScroll(); - this.toggleAttribute('collapsed', this.mdcFoundation.isCollapsed); - } -} diff --git a/packages/top-app-bar-short/tsconfig.json b/packages/top-app-bar-short/tsconfig.json deleted file mode 100644 index 2d18545ce..000000000 --- a/packages/top-app-bar-short/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "composite": true, - "rootDir": "src", - "outDir": ".", - "tsBuildInfoFile": ".tsbuildinfo" - }, - "include": [ - "src/*.ts" - ], - "references": [ - {"path": "../base"}, - {"path": "../top-app-bar"} - ] -} \ No newline at end of file diff --git a/packages/top-app-bar/README.md b/packages/top-app-bar/README.md index 53b776cfa..a6353c573 100644 --- a/packages/top-app-bar/README.md +++ b/packages/top-app-bar/README.md @@ -9,8 +9,6 @@ Top App Bars are a container for items such as application title, navigation ico For a fixed position version of this component, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed) -For a collapsable version of this component, see [``](http://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-short) - [Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html) ## Installation