diff --git a/packages/material-components-web/index.ts b/packages/material-components-web/index.ts index bc5270a48bf..750ae4589cb 100644 --- a/packages/material-components-web/index.ts +++ b/packages/material-components-web/index.ts @@ -31,7 +31,6 @@ import * as dom from '@material/dom/index'; import * as drawer from '@material/drawer/index'; import * as floatingLabel from '@material/floating-label/index'; import * as formField from '@material/form-field/index'; -import * as gridList from '@material/grid-list/index'; import * as iconButton from '@material/icon-button/index'; import * as lineRipple from '@material/line-ripple/index'; import * as linearProgress from '@material/linear-progress/index'; @@ -61,7 +60,6 @@ autoInit.register('MDCDialog', dialog.MDCDialog); autoInit.register('MDCDrawer', drawer.MDCDrawer); autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel); autoInit.register('MDCFormField', formField.MDCFormField); -autoInit.register('MDCGridList', gridList.MDCGridList); autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle); autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple); autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress); @@ -91,7 +89,6 @@ export { drawer, floatingLabel, formField, - gridList, iconButton, lineRipple, linearProgress, diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss index 00f699a9bad..e77b2c32964 100644 --- a/packages/material-components-web/material-components-web.scss +++ b/packages/material-components-web/material-components-web.scss @@ -31,7 +31,6 @@ @import "@material/fab/mdc-fab"; @import "@material/floating-label/mdc-floating-label"; @import "@material/form-field/mdc-form-field"; -@import "@material/grid-list/mdc-grid-list"; @import "@material/icon-button/mdc-icon-button"; @import "@material/image-list/mdc-image-list"; @import "@material/layout-grid/mdc-layout-grid"; diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index cade24b7324..ebb0f567f90 100644 --- a/packages/material-components-web/package.json +++ b/packages/material-components-web/package.json @@ -34,7 +34,6 @@ "@material/feature-targeting": "^4.0.0", "@material/floating-label": "^4.0.0", "@material/form-field": "^4.0.0", - "@material/grid-list": "^4.0.0", "@material/icon-button": "^4.0.0", "@material/image-list": "^4.0.0", "@material/layout-grid": "^4.0.0", diff --git a/packages/mdc-grid-list/.npmignore b/packages/mdc-grid-list/.npmignore deleted file mode 100644 index f0e06b3b5ec..00000000000 --- a/packages/mdc-grid-list/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -*.ts -!*.d.ts diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md deleted file mode 100644 index aee58c25e00..00000000000 --- a/packages/mdc-grid-list/README.md +++ /dev/null @@ -1,279 +0,0 @@ - - -## Important - Deprecation Notice - -The existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality -will be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests -will no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the -`mdc-image-list` package to continue to receive new features and updates. - -# Grid Lists - -MDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec. -Grid Lists are best suited for presenting homogeneous data, typically images. -Each item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding -across screen sizes. - -## Installation - -``` -npm install @material/grid-list -``` - - -## Usage - -Basic Grid list has the following structure: - -```html -
- -
-``` - -The above markup will give you a Grid list of tiles that: - -- Have 4px padding in between themselves -- Have a 1x1 aspect ratio -- Have a one-line footer caption with no icon - -You just need to put the content you want to load in `src` of -``. However, if your -assets don't have the same aspect ratio you as specified in the tile, it will -distort those assets. We provide a solution of that case in -[Using a div in place of an img](#using-a-div-in-place-of-an-img) section. - - -### Setting the tile width - -The tile width is set to 200px by default. There are three ways that you can -overwrite the default value for your grid list: - -1. Using CSS variables - - ```css - .mdc-grid-tile { - --mdc-grid-list-tile-width: 300px; - } - ``` - -2. Overwriting SCSS variable - - You can overwrite the scss variable by - - ```scss - $mdc-grid-list-tile-width: 300px; - @import "@material/grid-list/mdc-grid-list"; - ``` - -3. Add own style to tile - - ```html - -
- -
- ``` - -### Change tile padding - -Grid list tiles can have 1px padding instead of 4px by adding -`mdc-grid-list--tile-gutter-1` modifier. - -```html -
- -
-``` - -### Image only tile - -Grid lists support image only tile. You can remove `mdc-grid-tile__secondary` -and create a image only grid list. - -```html -
- -
-``` - -### Header caption - -Grid lists support header caption. You can change the footer caption to be a -header caption by adding `mdc-grid-list--header-caption` modifier. - -```html -
- -
-``` - -### Add support text to secondary content (caption) - -Grid lists support a one-line caption by default. You can add an additional line of support -text if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional -markup - -```html -
- -
-``` - -### Add icon to secondary content (caption) - -You can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or -`mdc-grid-list--with-icon-align-end` and changing the markup. - -```html -
- -
-``` - -### Change aspect ratio of tile - -Grid list tiles support all material guideline recommended aspect ratio: - -- 1x1 -- 16x9 -- 2x3 -- 3x2 -- 4x3 -- 3x4 - -You can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect -ratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios. - -```html - -
- -
-``` - -As pointed out in the previous section, if your -assets don't have the same aspect ratio you as specified in the tile, it will -distort those assets. We provide a solution of that case in -[Using a div in place of an img](#using-a-div-in-place-of-an-img) section. - -### Using a div in place of an img - -In case you cannot ensure all your assets will have the same aspect ratio, you -can use `div` instead of `img` markup. It will resize the assets to cover the tile -and crop the assets to display the center part. - -```html - - -
- -
-``` - -However, the method results in a less semantic markup, so we don't use this method by -default. - -### RTL Support - -`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever -it, or its ancestors, have a `dir="rtl"` attribute. - -### Theme - -`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background -color for its background color. `mdc-grid-tile__secondary` uses the theme's primary -color for its background color, and the theme's `on-primary` color for its text color. - -### `MDCGridListFoundation` - -Method Signature | Description ---- | --- -`alignCenter() => void` | Centers tiles horizontally within their parent container. - -### `MDCGridListAdapter` - -Method Signature | Description ---- | --- -`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. -`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. -`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. -`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. -`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. -`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. diff --git a/packages/mdc-grid-list/_mixins.import.scss b/packages/mdc-grid-list/_mixins.import.scss deleted file mode 100644 index da4de77dd8e..00000000000 --- a/packages/mdc-grid-list/_mixins.import.scss +++ /dev/null @@ -1,16 +0,0 @@ -@forward "@material/feature-targeting/variables" as mdc-feature-*; -@forward "@material/feature-targeting/mixins" as mdc-feature-*; -@forward "@material/rtl/variables" as mdc-rtl-*; -@forward "@material/theme/constants" as mdc-theme-*; -@forward "@material/theme/variables" as mdc-theme-*; -@forward "@material/typography/variables" as mdc-typography-*; -@forward "variables" as mdc-grid-list-*; -@forward "@material/rtl/mixins" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property; -@forward "@material/rtl/mixins" as mdc-rtl-* hide mdc-rtl-rtl; -@forward "@material/theme/mixins" as mdc-theme-*; -@forward "@material/typography/mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis; -@forward "@material/typography/mixins" as mdc-typography-* hide mdc-typography-typography; -@forward "@material/feature-targeting/functions" as mdc-feature-*; -@forward "@material/theme/functions" as mdc-theme-*; -@forward "@material/typography/functions" as mdc-typography-*; -@forward "mixins" as mdc-grid-list-*; diff --git a/packages/mdc-grid-list/_mixins.scss b/packages/mdc-grid-list/_mixins.scss deleted file mode 100644 index 713391d3d94..00000000000 --- a/packages/mdc-grid-list/_mixins.scss +++ /dev/null @@ -1,254 +0,0 @@ -// -// Copyright 2019 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. -// - -@use "sass:map"; -@use "@material/feature-targeting/functions"; -@use "@material/feature-targeting/mixins" as feature-targeting-mixins; -@use "@material/rtl/mixins" as rtl-mixins; -@use "@material/theme/mixins" as theme-mixins; -@use "@material/typography/mixins" as typography-mixins; -@use "./variables"; -@use "@material/typography/variables" as typography-variables; - -@mixin core-styles($query: functions.all()) { - $feat-color: functions.create-target($query, color); - $feat-structure: functions.create-target($query, structure); - $feat-typography: functions.create-target($query, typography); - - // postcss-bem-linter: define grid-list - @include tile-aspect(1, $query: $query); - @include tile-gutter(4px, $query: $query); - - .mdc-grid-list__tiles { - @include feature-targeting-mixins.targets($feat-structure) { - display: flex; - flex-flow: row wrap; - padding: 0; - } - } - - .mdc-grid-list--tile-gutter-1 { - @include tile-gutter(1px, $query: $query); - } - - .mdc-grid-list--tile-aspect-16x9 { - @include tile-aspect(16 / 9, $query: $query); - } - - .mdc-grid-list--tile-aspect-3x2 { - @include tile-aspect(3 / 2, $query: $query); - } - - .mdc-grid-list--tile-aspect-2x3 { - @include tile-aspect(2 / 3, $query: $query); - } - - .mdc-grid-list--tile-aspect-4x3 { - @include tile-aspect(4 / 3, $query: $query); - } - - .mdc-grid-list--tile-aspect-3x4 { - @include tile-aspect(3 / 4, $query: $query); - } - // postcss-bem-linter: end - - // postcss-bem-linter: define grid-tile - .mdc-grid-tile { - @include feature-targeting-mixins.targets($feat-structure) { - display: block; - position: relative; - /* @alternate */ - width: variables.$tile-width; - // stylelint-disable-next-line declaration-block-no-duplicate-properties - width: var(--mdc-grid-list-tile-width, variables.$tile-width); - } - } - - .mdc-grid-tile__primary { - @include feature-targeting-mixins.targets($feat-color) { - @include theme-mixins.prop(background-color, background); - @include theme-mixins.prop(color, text-primary-on-background); - } - - @include feature-targeting-mixins.targets($feat-structure) { - position: relative; - height: 0; - } - } - - .mdc-grid-tile__primary-content { - @include feature-targeting-mixins.targets($feat-structure) { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - } - } - - .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-color) { - @include theme-mixins.prop(background-color, primary); - @include theme-mixins.prop(color, on-primary); - } - - @include feature-targeting-mixins.targets($feat-structure) { - position: absolute; - bottom: 0; - box-sizing: border-box; - height: variables.$oneline-cap-secondary-height; - padding: variables.$tile-secondary-padding; - } - } - - .mdc-grid-tile__title { - @include typography-mixins.overflow-ellipsis($query: $query); - - @include feature-targeting-mixins.targets($feat-structure) { - display: block; - margin: 0; - padding: 0; - font-size: 1rem; - line-height: 1rem; - } - - @include feature-targeting-mixins.targets($feat-typography) { - font-weight: #{map.get(typography-variables.$font-weight-values, medium)}; - } - } - - .mdc-grid-tile__support-text { - @include typography-mixins.typography(subtitle1, $query: $query); - @include typography-mixins.overflow-ellipsis($query: $query); - - @include feature-targeting-mixins.targets($feat-structure) { - display: block; - margin: 0; - margin-top: 4px; - padding: 0; - } - } - - .mdc-grid-tile__icon { - @include feature-targeting-mixins.targets($feat-structure) { - position: absolute; - top: calc(50% - #{variables.$tile-secondary-icon-size} / 2); - font-size: 0; - } - } - // postcss-bem-linter: end - - // Linter disabled because we are nesting grid-tile under grid-list. - .mdc-grid-list--twoline-caption .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-structure) { - height: variables.$twoline-cap-secondary-height; - } - } - - .mdc-grid-list--header-caption .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-structure) { - top: 0; - bottom: auto; - } - } - - .mdc-grid-list--with-icon-align-start { - .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-structure) { - @include rtl-mixins.reflexive-property( - padding, - variables.$tile-secondary-padding * 2 + variables.$tile-secondary-icon-size, - variables.$tile-secondary-padding-narrow, - ".mdc-grid-list" - ); - } - } - - .mdc-grid-tile__icon { - @include feature-targeting-mixins.targets($feat-structure) { - @include rtl-mixins.reflexive-position(left, variables.$tile-secondary-padding, ".mdc-grid-list"); - - font-size: variables.$tile-secondary-icon-size; - } - } - } - - .mdc-grid-list--with-icon-align-end { - .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-structure) { - @include rtl-mixins.reflexive-property( - padding, - variables.$tile-secondary-padding, - variables.$tile-secondary-padding * 2 + variables.$tile-secondary-icon-size, - ".mdc-grid-list" - ); - } - } - - .mdc-grid-tile__icon { - @include feature-targeting-mixins.targets($feat-structure) { - @include rtl-mixins.reflexive-position(right, variables.$tile-secondary-padding, ".mdc-grid-list"); - - font-size: variables.$tile-secondary-icon-size; - } - } - } -} - -@mixin tile-aspect($width-height-ratio, $query: functions.all()) { - $feat-structure: functions.create-target($query, structure); - - .mdc-grid-tile__primary { - @include feature-targeting-mixins.targets($feat-structure) { - padding-bottom: calc(100% / #{$width-height-ratio}); - } - } -} - -@mixin tile-gutter($gutter-width, $query: functions.all()) { - $feat-structure: functions.create-target($query, structure); - - .mdc-grid-tile { - @include feature-targeting-mixins.targets($feat-structure) { - margin: $gutter-width / 2 0; - padding: 0 $gutter-width / 2; - } - } - - .mdc-grid-tile__secondary { - @include feature-targeting-mixins.targets($feat-structure) { - left: $gutter-width / 2; - width: calc(100% - #{$gutter-width}); - } - } - - .mdc-grid-list__tiles { - @include feature-targeting-mixins.targets($feat-structure) { - margin: $gutter-width / 2 auto; - } - } -} diff --git a/packages/mdc-grid-list/_variables.import.scss b/packages/mdc-grid-list/_variables.import.scss deleted file mode 100644 index 4d2c7429ef3..00000000000 --- a/packages/mdc-grid-list/_variables.import.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "variables" as mdc-grid-list-*; diff --git a/packages/mdc-grid-list/_variables.scss b/packages/mdc-grid-list/_variables.scss deleted file mode 100644 index 8e771d4a16a..00000000000 --- a/packages/mdc-grid-list/_variables.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Copyright 2019 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. -// - -$tile-width: 200px !default; -$tile-secondary-padding: 16px !default; -$tile-secondary-padding-narrow: 8px !default; -$oneline-cap-secondary-height: 48px !default; -$twoline-cap-secondary-height: 68px !default; -$tile-secondary-icon-size: 24px !default; diff --git a/packages/mdc-grid-list/adapter.ts b/packages/mdc-grid-list/adapter.ts deleted file mode 100644 index 54ab69dd3de..00000000000 --- a/packages/mdc-grid-list/adapter.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license - * Copyright 2019 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. - */ - -/** - * Defines the shape of the adapter expected by the foundation. - * Implement this adapter for your framework of choice to delegate updates to - * the component in your framework of choice. See architecture documentation - * for more details. - * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md - */ -export interface MDCGridListAdapter { - deregisterResizeHandler(handler: EventListener): void; - getNumberOfTiles(): number; - getOffsetWidth(): number; - getOffsetWidthForTileAtIndex(index: number): number; - registerResizeHandler(handler: EventListener): void; - setStyleForTilesElement( - property: Exclude, value: string | null, - ): void; -} diff --git a/packages/mdc-grid-list/component.ts b/packages/mdc-grid-list/component.ts deleted file mode 100644 index ccee1065ee3..00000000000 --- a/packages/mdc-grid-list/component.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * @license - * Copyright 2016 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. - */ - -import {MDCComponent} from '@material/base/component'; -import {MDCGridListAdapter} from './adapter'; -import {MDCGridListFoundation} from './foundation'; - -export class MDCGridList extends MDCComponent { - static attachTo(root: Element) { - return new MDCGridList(root); - } - - getDefaultFoundation() { - // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial. - // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable. - const adapter: MDCGridListAdapter = { - deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler), - getNumberOfTiles: () => { - return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR).length; - }, - getOffsetWidth: () => (this.root_ as HTMLElement).offsetWidth, - getOffsetWidthForTileAtIndex: (index) => { - const tileEl = this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index]; - return tileEl.offsetWidth; - }, - registerResizeHandler: (handler) => window.addEventListener('resize', handler), - setStyleForTilesElement: (property, value) => { - const tilesEl = this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR); - tilesEl!.style[property] = value; - }, - }; - return new MDCGridListFoundation(adapter); - } -} diff --git a/packages/mdc-grid-list/constants.ts b/packages/mdc-grid-list/constants.ts deleted file mode 100644 index d8b39672570..00000000000 --- a/packages/mdc-grid-list/constants.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2016 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. - */ - -export const strings = { - TILES_SELECTOR: '.mdc-grid-list__tiles', - TILE_SELECTOR: '.mdc-grid-tile', -}; diff --git a/packages/mdc-grid-list/foundation.ts b/packages/mdc-grid-list/foundation.ts deleted file mode 100644 index 11e581e3ece..00000000000 --- a/packages/mdc-grid-list/foundation.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** - * @license - * Copyright 2016 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. - */ - -import {MDCFoundation} from '@material/base/foundation'; -import {MDCGridListAdapter} from './adapter'; -import {strings} from './constants'; - -export class MDCGridListFoundation extends MDCFoundation { - static get strings() { - return strings; - } - - static get defaultAdapter(): MDCGridListAdapter { - return { - deregisterResizeHandler: () => undefined, - getNumberOfTiles: () => 0, - getOffsetWidth: () => 0, - getOffsetWidthForTileAtIndex: () => 0, - registerResizeHandler: () => undefined, - setStyleForTilesElement: () => undefined, - }; - } - - private readonly resizeHandler_: EventListener; - private resizeFrame_ = 0; - - /* istanbul ignore next: optional argument is not a branch statement */ - constructor(adapter?: Partial) { - super({...MDCGridListFoundation.defaultAdapter, ...adapter}); - - this.resizeHandler_ = this.alignCenter.bind(this); - } - - init() { - this.alignCenter(); - this.adapter_.registerResizeHandler(this.resizeHandler_); - } - - destroy() { - this.adapter_.deregisterResizeHandler(this.resizeHandler_); - } - - alignCenter() { - cancelAnimationFrame(this.resizeFrame_); - this.resizeFrame_ = requestAnimationFrame(() => { - this.alignCenter_(); - this.resizeFrame_ = 0; - }); - } - - private alignCenter_() { - if (this.adapter_.getNumberOfTiles() === 0) { - return; - } - const gridWidth = this.adapter_.getOffsetWidth(); - const itemWidth = this.adapter_.getOffsetWidthForTileAtIndex(0); - const tilesWidth = itemWidth * Math.floor(gridWidth / itemWidth); - this.adapter_.setStyleForTilesElement('width', `${tilesWidth}px`); - } -} - -// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier. -export default MDCGridListFoundation; diff --git a/packages/mdc-grid-list/index.ts b/packages/mdc-grid-list/index.ts deleted file mode 100644 index 24fafb64f9e..00000000000 --- a/packages/mdc-grid-list/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2019 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. - */ - -export * from './adapter'; -export * from './component'; -export * from './constants'; -export * from './foundation'; diff --git a/packages/mdc-grid-list/mdc-grid-list.import.scss b/packages/mdc-grid-list/mdc-grid-list.import.scss deleted file mode 100644 index 1bbd79e9aeb..00000000000 --- a/packages/mdc-grid-list/mdc-grid-list.import.scss +++ /dev/null @@ -1,17 +0,0 @@ -@forward "@material/feature-targeting/variables" as mdc-feature-*; -@forward "@material/feature-targeting/mixins" as mdc-feature-*; -@forward "@material/rtl/variables" as mdc-rtl-*; -@forward "@material/theme/constants" as mdc-theme-*; -@forward "@material/theme/variables" as mdc-theme-*; -@forward "@material/typography/variables" as mdc-typography-*; -@forward "variables" as mdc-grid-list-*; -@forward "@material/rtl/mixins" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property; -@forward "@material/rtl/mixins" as mdc-rtl-* hide mdc-rtl-rtl; -@forward "@material/theme/mixins" as mdc-theme-*; -@forward "@material/typography/mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis; -@forward "@material/typography/mixins" as mdc-typography-* hide mdc-typography-typography; -@forward "mixins" as mdc-grid-list-*; -@forward "@material/feature-targeting/functions" as mdc-feature-*; -@forward "@material/theme/functions" as mdc-theme-*; -@forward "@material/typography/functions" as mdc-typography-*; -@forward "mdc-grid-list"; diff --git a/packages/mdc-grid-list/mdc-grid-list.scss b/packages/mdc-grid-list/mdc-grid-list.scss deleted file mode 100644 index 38da23be12c..00000000000 --- a/packages/mdc-grid-list/mdc-grid-list.scss +++ /dev/null @@ -1,24 +0,0 @@ -// -// Copyright 2017 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. -// - -@use "./mixins"; -@include mixins.core-styles; diff --git a/packages/mdc-grid-list/package-lock.json b/packages/mdc-grid-list/package-lock.json deleted file mode 100644 index d0189f7b213..00000000000 --- a/packages/mdc-grid-list/package-lock.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "tslib": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", - "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" - } - } -} diff --git a/packages/mdc-grid-list/package.json b/packages/mdc-grid-list/package.json deleted file mode 100644 index 78e5cbc4adf..00000000000 --- a/packages/mdc-grid-list/package.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "@material/grid-list", - "version": "4.0.0", - "description": "The Material Components for the web grid list component", - "license": "MIT", - "main": "dist/mdc.gridList.js", - "module": "index.js", - "sideEffects": false, - "types": "dist/mdc.gridList.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/material-components/material-components-web.git", - "directory": "packages/mdc-grid-list" - }, - "keywords": [ - "material components", - "material design", - "grid list" - ], - "dependencies": { - "@material/base": "^4.0.0", - "@material/feature-targeting": "^4.0.0", - "@material/rtl": "^4.0.0", - "@material/theme": "^4.0.0", - "@material/typography": "^4.0.0", - "tslib": "^1.9.3" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index 90fd36bd671..ee47c353f05 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -157,7 +157,6 @@ class CssBundleFactory { 'mdc.fab': getAbsolutePath('/packages/mdc-fab/mdc-fab.scss'), 'mdc.floating-label': getAbsolutePath('/packages/mdc-floating-label/mdc-floating-label.scss'), 'mdc.form-field': getAbsolutePath('/packages/mdc-form-field/mdc-form-field.scss'), - 'mdc.grid-list': getAbsolutePath('/packages/mdc-grid-list/mdc-grid-list.scss'), 'mdc.icon-button': getAbsolutePath('/packages/mdc-icon-button/mdc-icon-button.scss'), 'mdc.image-list': getAbsolutePath('/packages/mdc-image-list/mdc-image-list.scss'), 'mdc.layout-grid': getAbsolutePath('/packages/mdc-layout-grid/mdc-layout-grid.scss'), diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 41bcd475b88..c5075b2caaa 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -177,7 +177,6 @@ class JsBundleFactory { drawer: getAbsolutePath('/packages/mdc-drawer/index.ts'), floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.ts'), formField: getAbsolutePath('/packages/mdc-form-field/index.ts'), - gridList: getAbsolutePath('/packages/mdc-grid-list/index.ts'), iconButton: getAbsolutePath('/packages/mdc-icon-button/index.ts'), list: getAbsolutePath('/packages/mdc-list/index.ts'), lineRipple: getAbsolutePath('/packages/mdc-line-ripple/index.ts'), diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index 7f04ed56d64..140dea49d00 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/test/scss/_feature-targeting-test.scss @@ -7,7 +7,6 @@ @import "@material/fab/mixins"; @import "@material/floating-label/mixins"; @import "@material/form-field/mixins"; -@import "@material/grid-list/mixins"; @import "@material/icon-button/mixins"; @import "@material/image-list/mixins"; @import "@material/linear-progress/mixins"; @@ -175,11 +174,6 @@ // Form Field @include mdc-form-field-core-styles($query: $query); - // Grid List - @include mdc-grid-list-core-styles($query: $query); - @include mdc-grid-list-tile-aspect(1, $query: $query); - @include mdc-grid-list-tile-gutter(0, $query: $query); - // Icon Button @include mdc-icon-button-core-styles($query: $query); @include mdc-icon-button-density(0, $query: $query); diff --git a/test/unit/mdc-grid-list/foundation.test.js b/test/unit/mdc-grid-list/foundation.test.js deleted file mode 100644 index fce4421a5c3..00000000000 --- a/test/unit/mdc-grid-list/foundation.test.js +++ /dev/null @@ -1,112 +0,0 @@ -/** - * @license - * Copyright 2016 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. - */ - -import {assert} from 'chai'; -import td from 'testdouble'; - -import {install as installClock} from '../helpers/clock'; -import {setupFoundationTest} from '../helpers/setup'; -import {verifyDefaultAdapter} from '../helpers/foundation'; -import {MDCGridListFoundation} from '../../../packages/mdc-grid-list/foundation'; - -suite('MDCGridListFoundation'); - -test('exports strings', () => { - assert.isOk('strings' in MDCGridListFoundation); -}); - -test('defaultAdapter returns a complete adapter implementation', () => { - verifyDefaultAdapter(MDCGridListFoundation, [ - 'getOffsetWidth', 'getNumberOfTiles', 'getOffsetWidthForTileAtIndex', 'setStyleForTilesElement', - 'registerResizeHandler', 'deregisterResizeHandler', - ]); -}); - -const setupTest = () => setupFoundationTest(MDCGridListFoundation); - -test('#init calls component event registrations and align center function', () => { - const {foundation, mockAdapter} = setupTest(); - - foundation.init(); - td.verify(mockAdapter.registerResizeHandler(td.matchers.isA(Function))); -}); - -test('#destroy calls component event deregistrations', () => { - const {foundation, mockAdapter} = setupTest(); - - let resizeHandler; - td.when(mockAdapter.registerResizeHandler(td.matchers.isA(Function))).thenDo((handler) => { - resizeHandler = handler; - }); - - foundation.init(); - foundation.destroy(); - td.verify(mockAdapter.deregisterResizeHandler(resizeHandler)); -}); - -test('#align center does not set the container width if there are no tiles', () => { - const {foundation, mockAdapter} = setupTest(); - const clock = installClock(); - td.when(mockAdapter.getNumberOfTiles()).thenReturn(0); - foundation.init(); - - foundation.alignCenter(); - clock.runToFrame(); - - td.verify(mockAdapter.setStyleForTilesElement(), {times: 0, ignoreExtraArgs: true}); -}); - -test('#align center sets the container width to fit tiles inside', () => { - const {foundation, mockAdapter} = setupTest(); - const clock = installClock(); - const listOffsetWidth = 1005; - const tileOffsetWidth = 200; - const tilesWidth = Math.floor(listOffsetWidth / tileOffsetWidth) * tileOffsetWidth; - td.when(mockAdapter.getOffsetWidth()).thenReturn(listOffsetWidth); - td.when(mockAdapter.getOffsetWidthForTileAtIndex(0)).thenReturn(tileOffsetWidth); - foundation.init(); - - foundation.alignCenter(); - clock.runToFrame(); - - td.verify(mockAdapter.setStyleForTilesElement('width', `${tilesWidth}px`)); -}); - -test('#alignCenter debounces calls within the same frame', () => { - const {foundation} = setupTest(); - const clock = installClock(); - foundation.alignCenter(); - foundation.alignCenter(); - foundation.alignCenter(); - assert.equal(clock.countTimers(), 1); -}); - -test('#alignCenter resets debounce latch when alignCenter frame is run', () => { - const {foundation} = setupTest(); - const clock = installClock(); - - foundation.alignCenter(); - clock.runToFrame(); - foundation.alignCenter(); - assert.equal(clock.countTimers(), 1); -}); diff --git a/test/unit/mdc-grid-list/mdc-grid-list.test.js b/test/unit/mdc-grid-list/mdc-grid-list.test.js deleted file mode 100644 index e097b142550..00000000000 --- a/test/unit/mdc-grid-list/mdc-grid-list.test.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * @license - * Copyright 2017 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. - */ - -import {assert} from 'chai'; -import bel from 'bel'; -import domEvents from 'dom-events'; -import td from 'testdouble'; - -import {MDCGridList} from '../../../packages/mdc-grid-list/index'; - -function getFixture() { - return bel` -
-
    -
  • -
    - -
    - - Title - -
    • -
-
- `; -} - -function setupTest() { - const root = getFixture(); - const component = new MDCGridList(root); - return {root, component}; -} - -test('attachTo initializes and returns an MDCGridList instance', () => { - assert.isOk(MDCGridList.attachTo(getFixture()) instanceof MDCGridList); -}); - -test('adapter#registerResizeHandler uses the handler as a window resize listener', () => { - const {component} = setupTest(); - const handler = td.func('resizeHandler'); - component.getDefaultFoundation().adapter_.registerResizeHandler(handler); - domEvents.emit(window, 'resize'); - td.verify(handler(td.matchers.anything())); - window.removeEventListener('resize', handler); -}); - -test('adapter#registerResizeHandler unlistens the handler for window resize', () => { - const {component} = setupTest(); - const handler = td.func('resizeHandler'); - window.addEventListener('resize', handler); - component.getDefaultFoundation().adapter_.deregisterResizeHandler(handler); - domEvents.emit(window, 'resize'); - td.verify(handler(td.matchers.anything()), {times: 0}); - // Just to be safe - window.removeEventListener('resize', handler); -});