From 003e95f8dff12a3319d2808c1ccad62521eed627 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 14 Nov 2018 11:25:47 -0500 Subject: [PATCH 1/5] fix(fab): Separate mixins for regular FAB and Extended FAB (#4082) BREAKING CHANGE: Fab now has 2 separate mixins - `mdc-fab-shape-radius` for regular / mini Fab variants & `mdc-fab-extended-shape-radius` for Extended FAB variant. --- packages/mdc-fab/README.md | 3 +- packages/mdc-fab/_mixins.scss | 13 ++-- packages/mdc-shape/_functions.scss | 7 +- packages/mdc-snackbar/package-lock.json | 11 +++ test/screenshot/golden.json | 18 +++++ test/screenshot/spec/mdc-fab/fixture.scss | 8 ++ .../mdc-fab/mixins/extended-shape-radius.html | 73 +++++++++++++++++++ .../spec/mdc-fab/mixins/shape-radius.html | 69 ++++++++++++++++++ 8 files changed, 188 insertions(+), 14 deletions(-) create mode 100644 packages/mdc-snackbar/package-lock.json create mode 100644 test/screenshot/spec/mdc-fab/mixins/extended-shape-radius.html create mode 100644 test/screenshot/spec/mdc-fab/mixins/shape-radius.html diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md index 4a308c3f703..793f9d155ac 100644 --- a/packages/mdc-fab/README.md +++ b/packages/mdc-fab/README.md @@ -131,7 +131,8 @@ Mixin | Description `mdc-fab-ink-color($color)` | Sets the ink color to the given color `mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides. `mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon. -`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to all FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false. +`mdc-fab-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only regular & mini FAB variants with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false. +`mdc-fab-extended-shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to only Extended FAB variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false. The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins. diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index caf8b873adf..6fbdcd81c16 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -89,15 +89,13 @@ } @mixin mdc-fab-shape-radius($radius, $rtl-reflexive: false) { - @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-height, $radius), $rtl-reflexive); - - &.mdc-fab--mini { - @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-mini-height, $radius), $rtl-reflexive); + &:not(.mdc-fab--extended) { + @include mdc-shape-radius($radius, $rtl-reflexive); } +} - &.mdc-fab--extended { - @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius), $rtl-reflexive); - } +@mixin mdc-fab-extended-shape-radius($radius, $rtl-reflexive: false) { + @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-fab-extended-height, $radius), $rtl-reflexive); } $mdc-fab-icon-enter-delay_: 90ms; @@ -174,6 +172,7 @@ $mdc-fab-icon-enter-duration_: 180ms; @mixin mdc-fab--extended_ { @include mdc-typography(button); + @include mdc-fab-extended-shape-radius(50%); @include mdc-fab-extended-padding( $mdc-fab-extended-icon-padding, $mdc-fab-extended-label-padding); diff --git a/packages/mdc-shape/_functions.scss b/packages/mdc-shape/_functions.scss index 4873f77b83e..183496e4978 100644 --- a/packages/mdc-shape/_functions.scss +++ b/packages/mdc-shape/_functions.scss @@ -173,11 +173,6 @@ @function mdc-shape-is-valid-radius-value_($radius) { $is-number: type-of($radius) == "number"; - $is-percentage: $is-number and unit($radius) == "%"; - @if $is-percentage { - @return false; - } @else { - @return $is-number or str_index($radius, "var(") or str_index($radius, "calc("); - } + @return $is-number or str_index($radius, "var(") or str_index($radius, "calc("); } diff --git a/packages/mdc-snackbar/package-lock.json b/packages/mdc-snackbar/package-lock.json new file mode 100644 index 00000000000..02ee2640138 --- /dev/null +++ b/packages/mdc-snackbar/package-lock.json @@ -0,0 +1,11 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "@material/shape": { + "version": "0.40.1", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-0.40.1.tgz", + "integrity": "sha512-o1pw5+s/jWqsKbUAkCCaEcB8XLqJ4FlZhYfSvxZ88WRw9zoWOt9iQMMP82wLWhUX1DSzpNRI8BAD7aNLK6yRlA==" + } + } +} diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 4b58b7ecf23..4d71e24a0a8 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -681,6 +681,24 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-fab/mixins/extended-padding.html.windows_ie_11.png" } }, + "spec/mdc-fab/mixins/extended-shape-radius.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html.windows_chrome_69.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html.windows_firefox_62.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/extended-shape-radius.html.windows_ie_11.png" + } + }, + "spec/mdc-fab/mixins/shape-radius.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html.windows_chrome_69.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html.windows_firefox_62.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html.windows_ie_11.png" + } + }, "spec/mdc-icon-button/classes/baseline-icon-button-toggle.html": { "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/15_39_02_591/spec/mdc-icon-button/classes/baseline-icon-button-toggle.html?utm_source=golden_json", "screenshots": { diff --git a/test/screenshot/spec/mdc-fab/fixture.scss b/test/screenshot/spec/mdc-fab/fixture.scss index ccdd3be5763..de2f3febf6c 100644 --- a/test/screenshot/spec/mdc-fab/fixture.scss +++ b/test/screenshot/spec/mdc-fab/fixture.scss @@ -43,3 +43,11 @@ .custom-fab--extended-label-padding { @include mdc-fab-extended-label-padding(24px); } + +.custom-fab-shape-radius { + @include mdc-fab-shape-radius(50% 0 0 0); +} + +.custom-fab-extended-shape-radius { + @include mdc-fab-extended-shape-radius(25%); +} diff --git a/test/screenshot/spec/mdc-fab/mixins/extended-shape-radius.html b/test/screenshot/spec/mdc-fab/mixins/extended-shape-radius.html new file mode 100644 index 00000000000..77c6021d5f7 --- /dev/null +++ b/test/screenshot/spec/mdc-fab/mixins/extended-shape-radius.html @@ -0,0 +1,73 @@ + + + + + + extended-shape-radius FAB Mixin - MDC Web Screenshot Test + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + diff --git a/test/screenshot/spec/mdc-fab/mixins/shape-radius.html b/test/screenshot/spec/mdc-fab/mixins/shape-radius.html new file mode 100644 index 00000000000..d9f4db66bda --- /dev/null +++ b/test/screenshot/spec/mdc-fab/mixins/shape-radius.html @@ -0,0 +1,69 @@ + + + + + + shape-radius FAB mixin - MDC Web Screenshot Test + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+
+ + + + + + + + + + From c7bd5c44befdf23cf97c18adf7e56906f51c8a5a Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Wed, 14 Nov 2018 11:09:46 -0800 Subject: [PATCH 2/5] chore: revert survey (#4085) --- README.md | 2 -- packages/material-components-web/README.md | 2 -- packages/mdc-animation/README.md | 2 -- packages/mdc-auto-init/README.md | 2 -- packages/mdc-base/README.md | 2 -- packages/mdc-button/README.md | 2 -- packages/mdc-card/README.md | 2 -- packages/mdc-checkbox/README.md | 2 -- packages/mdc-chips/README.md | 2 -- packages/mdc-dialog/README.md | 2 -- packages/mdc-dom/README.md | 2 -- packages/mdc-drawer/README.md | 2 -- packages/mdc-elevation/README.md | 2 -- packages/mdc-fab/README.md | 2 -- packages/mdc-floating-label/README.md | 2 -- packages/mdc-form-field/README.md | 4 +--- packages/mdc-grid-list/README.md | 2 -- packages/mdc-icon-button/README.md | 2 -- packages/mdc-icon-toggle/README.md | 2 -- packages/mdc-image-list/README.md | 2 -- packages/mdc-layout-grid/README.md | 2 -- packages/mdc-line-ripple/README.md | 2 -- packages/mdc-linear-progress/README.md | 2 -- packages/mdc-list/README.md | 6 ++---- packages/mdc-menu-surface/README.md | 2 -- packages/mdc-menu/README.md | 2 -- packages/mdc-notched-outline/README.md | 2 -- packages/mdc-radio/README.md | 2 -- packages/mdc-ripple/README.md | 2 -- packages/mdc-rtl/README.md | 2 -- packages/mdc-select/README.md | 2 -- packages/mdc-select/helper-text/README.md | 2 -- packages/mdc-select/icon/README.md | 2 -- packages/mdc-shape/README.md | 2 -- packages/mdc-slider/README.md | 2 -- packages/mdc-snackbar/README.md | 2 -- packages/mdc-switch/README.md | 2 -- packages/mdc-tab-bar/README.md | 2 -- packages/mdc-tab-indicator/README.md | 2 -- packages/mdc-tab-scroller/README.md | 2 -- packages/mdc-tab/README.md | 2 -- packages/mdc-tabs/README.md | 2 -- packages/mdc-textfield/README.md | 2 -- packages/mdc-textfield/helper-text/README.md | 2 -- packages/mdc-textfield/icon/README.md | 2 -- packages/mdc-theme/README.md | 2 -- packages/mdc-toolbar/README.md | 2 -- packages/mdc-top-app-bar/README.md | 2 -- packages/mdc-typography/README.md | 6 ++---- 49 files changed, 5 insertions(+), 103 deletions(-) diff --git a/README.md b/README.md index 40a0f2fdd8f..c65cab2618b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - [![Version](https://img.shields.io/npm/v/material-components-web.svg)](https://www.npmjs.com/package/material-components-web) [![Build Status](https://travis-ci.com/material-components/material-components-web.svg?branch=master)](https://travis-ci.com/material-components/material-components-web/) [![codecov](https://codecov.io/gh/material-components/material-components-web/branch/master/graph/badge.svg)](https://codecov.io/gh/material-components/material-components-web) diff --git a/packages/material-components-web/README.md b/packages/material-components-web/README.md index 2cf5db56cd7..bb382105be0 100644 --- a/packages/material-components-web/README.md +++ b/packages/material-components-web/README.md @@ -1,5 +1,3 @@ -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Material Components Web (MDC Web) This package contains the master library for Material Components Web. It simply wraps all of its diff --git a/packages/mdc-animation/README.md b/packages/mdc-animation/README.md index 7bfb3cbf9cb..23ce0ec33b7 100644 --- a/packages/mdc-animation/README.md +++ b/packages/mdc-animation/README.md @@ -7,8 +7,6 @@ iconId: animation path: /catalog/animation/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Animation Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion. diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md index 69a43121976..5283d964c47 100644 --- a/packages/mdc-auto-init/README.md +++ b/packages/mdc-auto-init/README.md @@ -6,8 +6,6 @@ excerpt: "Utilities for declarative, DOM-based initialization of components on s path: /catalog/auto-init/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Auto Init `mdc-auto-init` is a utility package that provides declarative, DOM-based method of initialization diff --git a/packages/mdc-base/README.md b/packages/mdc-base/README.md index be9696d8b81..d7ba7d1aa5c 100644 --- a/packages/mdc-base/README.md +++ b/packages/mdc-base/README.md @@ -6,8 +6,6 @@ excerpt: "Base foundation and component classes." path: /catalog/base/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Base MDC Base contains core foundation and component classes that serve as the base classes for all of MDC Web's foundation classes and components (respectively). diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 893571b3bcc..58f6b12d3d4 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -7,8 +7,6 @@ iconId: button path: /catalog/buttons/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Buttons -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Cards -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Checkboxes -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Chips -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Dialog -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # DOM MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM. diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md index 94ee0222405..46f694f772a 100644 --- a/packages/mdc-drawer/README.md +++ b/packages/mdc-drawer/README.md @@ -7,8 +7,6 @@ iconId: side_navigation path: /catalog/drawers/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Drawers The MDC Navigation Drawer is used to organize access to destinations and other functionality on an app. diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md index fcd90dd57da..a22de116fa3 100644 --- a/packages/mdc-elevation/README.md +++ b/packages/mdc-elevation/README.md @@ -7,8 +7,6 @@ iconId: shadow path: /catalog/elevation/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Elevation -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Floating Action Button -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Floating Label Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's `placeholder` attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field. diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md index 0d9dc0b2d56..fe466094ebe 100644 --- a/packages/mdc-form-field/README.md +++ b/packages/mdc-form-field/README.md @@ -5,8 +5,6 @@ section: components path: /catalog/input-controls/form-fields/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Form Fields MDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label. @@ -82,7 +80,7 @@ By default, the input will be positioned before the label. You can position the Property | Value Type | Description --- | --- | --- -`input` | String | Gets and sets the form field input. +`input` | String | Gets and sets the form field input. In order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter. diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md index aa530d82e94..7a14f399f95 100644 --- a/packages/mdc-grid-list/README.md +++ b/packages/mdc-grid-list/README.md @@ -7,8 +7,6 @@ iconId: card path: /catalog/grid-lists/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - ## Important - Deprecation Notice The existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality diff --git a/packages/mdc-icon-button/README.md b/packages/mdc-icon-button/README.md index 80ec1660a7b..fccbc0569ac 100644 --- a/packages/mdc-icon-button/README.md +++ b/packages/mdc-icon-button/README.md @@ -6,8 +6,6 @@ iconId: button path: /catalog/buttons/icon-buttons/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Icon Buttons -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - ## Important - Deprecation Notice The existing `MDCIconToggle` component and styles will be removed in a future release. Some of its functionality diff --git a/packages/mdc-image-list/README.md b/packages/mdc-image-list/README.md index 6140741ff0e..e599beb1ae7 100644 --- a/packages/mdc-image-list/README.md +++ b/packages/mdc-image-list/README.md @@ -7,8 +7,6 @@ iconId: card path: /catalog/image-lists/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Image List -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Layout Grid -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Line Ripple The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes. diff --git a/packages/mdc-linear-progress/README.md b/packages/mdc-linear-progress/README.md index 1b930b1ff73..0c00a21df3b 100644 --- a/packages/mdc-linear-progress/README.md +++ b/packages/mdc-linear-progress/README.md @@ -7,8 +7,6 @@ iconId: progress_linear path: /catalog/linear-progress/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Linear Progress -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Lists -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Menu Surface -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Menus -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Notched Outline The notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select. diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md index cadcd04043a..a32a2626563 100644 --- a/packages/mdc-radio/README.md +++ b/packages/mdc-radio/README.md @@ -6,8 +6,6 @@ iconId: radio_button path: /catalog/input-controls/radio-buttons/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Radio Buttons -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Ripple MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements. diff --git a/packages/mdc-rtl/README.md b/packages/mdc-rtl/README.md index 0c2c35196c2..658599e6d02 100644 --- a/packages/mdc-rtl/README.md +++ b/packages/mdc-rtl/README.md @@ -6,8 +6,6 @@ excerpt: "Right-to-left and bi-directional text layout via SCSS helpers." path: /catalog/rtl/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # RTL UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand. diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md index 5b5d771206b..b316d9b347b 100644 --- a/packages/mdc-select/README.md +++ b/packages/mdc-select/README.md @@ -6,8 +6,6 @@ iconId: menu path: /catalog/input-controls/select-menus/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Select Menus -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Select Helper Text Helper text gives context about a select, such as how the selection will be used. It should be visible either persistently or only on focus. diff --git a/packages/mdc-select/icon/README.md b/packages/mdc-select/icon/README.md index 2edb00bc742..39062c6deb7 100644 --- a/packages/mdc-select/icon/README.md +++ b/packages/mdc-select/icon/README.md @@ -7,8 +7,6 @@ iconId: text_field path: /catalog/input-controls/select-menus/icon/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Select Icon Icons describe the type of input a select requires. They can also be interaction targets. diff --git a/packages/mdc-shape/README.md b/packages/mdc-shape/README.md index c91ba5cb469..b24307c7fe7 100644 --- a/packages/mdc-shape/README.md +++ b/packages/mdc-shape/README.md @@ -6,8 +6,6 @@ excerpt: "Shapes direct attention, identify components, communicate state, and e path: /catalog/shape/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Shape Shapes direct attention, identify components, communicate state, and express brand. diff --git a/packages/mdc-slider/README.md b/packages/mdc-slider/README.md index edf0640e2cd..62906f93c02 100644 --- a/packages/mdc-slider/README.md +++ b/packages/mdc-slider/README.md @@ -7,8 +7,6 @@ iconId: slider path: /catalog/input-controls/sliders/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Slider -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Snackbars -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Switches -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Tab Bar Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. diff --git a/packages/mdc-tab-indicator/README.md b/packages/mdc-tab-indicator/README.md index 463b92d8efe..f14d8507b73 100644 --- a/packages/mdc-tab-indicator/README.md +++ b/packages/mdc-tab-indicator/README.md @@ -7,8 +7,6 @@ iconId: tabs path: /catalog/tabs/indicator/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Tab Indicator A Tab Indicator is a visual guide that shows which Tab is active. diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md index b75a707bda6..9e19795fa5a 100644 --- a/packages/mdc-tab-scroller/README.md +++ b/packages/mdc-tab-scroller/README.md @@ -7,8 +7,6 @@ iconId: tabs path: /catalog/tabs/scroller/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Tab Scroller A Tab Scroller allows for smooth native and animated scrolling of tabs. diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 446278cdb08..b491f11ec7d 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -7,8 +7,6 @@ iconId: tabs path: /catalog/tabs/tab/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Tab Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. diff --git a/packages/mdc-tabs/README.md b/packages/mdc-tabs/README.md index 7eda4855f7f..c393137045c 100644 --- a/packages/mdc-tabs/README.md +++ b/packages/mdc-tabs/README.md @@ -7,8 +7,6 @@ iconId: tabs path: /catalog/tabs/legacy/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - ## Important - Deprecation Notice The `mdc-tabs` package is deprecated and no longer maintained, and is no longer included in the all-in-one diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md index 46a50a2b0c7..896ea9338a0 100644 --- a/packages/mdc-textfield/README.md +++ b/packages/mdc-textfield/README.md @@ -6,8 +6,6 @@ iconId: text_field path: /catalog/input-controls/text-field/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Text Field Text fields allow users to input, edit, and select text. diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md index 0664e68857a..c7a42a304f1 100644 --- a/packages/mdc-textfield/helper-text/README.md +++ b/packages/mdc-textfield/helper-text/README.md @@ -7,8 +7,6 @@ iconId: text_field path: /catalog/input-controls/text-field/helper-text/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Text Field Helper Text Helper text gives context about a field’s input, such as how the input will be used. It should be visible either persistently or only on focus. diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md index 462b94823f3..1679e4d353c 100644 --- a/packages/mdc-textfield/icon/README.md +++ b/packages/mdc-textfield/icon/README.md @@ -7,8 +7,6 @@ iconId: text_field path: /catalog/input-controls/text-field/icon/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Text Field Icon Icons describe the type of input a text field requires. They can also be interaction targets. diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md index 22f1c4e7d01..1a5ffa00d2a 100644 --- a/packages/mdc-theme/README.md +++ b/packages/mdc-theme/README.md @@ -7,8 +7,6 @@ iconId: theme path: /catalog/theme/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Theme The Material Design color system can be used to create a color scheme that reflects your brand or style. diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md index 56ecd03a784..0fe6170ae2f 100644 --- a/packages/mdc-toolbar/README.md +++ b/packages/mdc-toolbar/README.md @@ -7,8 +7,6 @@ iconId: toolbar path: /catalog/toolbar/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - ## Important - Deprecation Notice The existing `MDCToolbar` component and styles will be removed in a future release. Some of its functionality diff --git a/packages/mdc-top-app-bar/README.md b/packages/mdc-top-app-bar/README.md index 355bfaa2184..91bfd13b109 100644 --- a/packages/mdc-top-app-bar/README.md +++ b/packages/mdc-top-app-bar/README.md @@ -7,8 +7,6 @@ iconId: toolbar path: /catalog/top-app-bar/ --> -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Top App Bar -> ✨ Are you a part of the Material Design web community? Help us improve by filling out this **10 minute survey**. ✨ - # Typography Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions. @@ -124,7 +122,7 @@ These styles can be used as the `$style` argument for the `mdc-typography` mixin #### Overriding Styles -All styles can be overridden using Sass global variables _before_ the component is imported by setting a global +All styles can be overridden using Sass global variables _before_ the component is imported by setting a global variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties you want to override for a particular style. @@ -139,7 +137,7 @@ $mdc-typography-styles-button: ( @import "@material/button/mdc-button"; ``` -Example: Overriding the global `font-family` property. +Example: Overriding the global `font-family` property. ```scss $mdc-typography-font-family: "Arial, Helvetica, sans-serif"; From 3fe92fe7da0e92cc9811d93399926802cdaa9a60 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 14 Nov 2018 14:30:08 -0500 Subject: [PATCH 3/5] chore: Publish (cherry picked from commit 7fb83432eac5735279b8418ccd9214f8e76ad33d) --- lerna.json | 2 +- packages/material-components-web/package.json | 6 +++--- packages/mdc-card/package.json | 2 +- packages/mdc-drawer/package.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lerna.json b/lerna.json index dae2ddea4b9..f55689d483b 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-beta.36", - "version": "0.41.0", + "version": "0.41.1", "commands": { "publish": { "ignore": [ diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index 9c6916a4f96..238dc6759ce 100644 --- a/packages/material-components-web/package.json +++ b/packages/material-components-web/package.json @@ -1,7 +1,7 @@ { "name": "material-components-web", "description": "Modular and customizable Material Design UI components for the web", - "version": "0.41.0", + "version": "0.41.1", "license": "MIT", "keywords": [ "material components", @@ -17,12 +17,12 @@ "@material/auto-init": "^0.41.0", "@material/base": "^0.41.0", "@material/button": "^0.41.0", - "@material/card": "^0.41.0", + "@material/card": "^0.41.1", "@material/checkbox": "^0.41.0", "@material/chips": "^0.41.0", "@material/dialog": "^0.41.0", "@material/dom": "^0.41.0", - "@material/drawer": "^0.41.0", + "@material/drawer": "^0.41.1", "@material/elevation": "^0.41.0", "@material/fab": "^0.41.0", "@material/floating-label": "^0.41.0", diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json index 6d2b6df73b0..49ba60d6cd3 100644 --- a/packages/mdc-card/package.json +++ b/packages/mdc-card/package.json @@ -1,6 +1,6 @@ { "name": "@material/card", - "version": "0.41.0", + "version": "0.41.1", "description": "The Material Components for the web card component", "license": "MIT", "keywords": [ diff --git a/packages/mdc-drawer/package.json b/packages/mdc-drawer/package.json index db072aa9343..8045cdabdee 100644 --- a/packages/mdc-drawer/package.json +++ b/packages/mdc-drawer/package.json @@ -1,6 +1,6 @@ { "name": "@material/drawer", - "version": "0.41.0", + "version": "0.41.1", "description": "The Material Components Web drawer component", "license": "MIT", "keywords": [ From c8148350a5e0b8a6c3afde3c068df65536adee6d Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 14 Nov 2018 14:31:31 -0500 Subject: [PATCH 4/5] docs: Update CHANGELOG.md (cherry picked from commit adbd113d3d9905ed609e0c618727b28eb3422549) --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17e5c0721eb..d3758bc06a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ + +## [0.41.1](https://github.com/material-components/material-components-web/compare/v0.41.0...v0.41.1) (2018-11-14) + + +### Bug Fixes + +* **card:** Corrected baseline shape value of card small => medium ([#4060](https://github.com/material-components/material-components-web/issues/4060)) ([875b159](https://github.com/material-components/material-components-web/commit/875b159)) +* **drawer:** allow drawer below top app bar ([#4028](https://github.com/material-components/material-components-web/issues/4028)) ([1eff602](https://github.com/material-components/material-components-web/commit/1eff602)) +* **drawer:** Fix issue where drawer fires opened event twice. ([#4027](https://github.com/material-components/material-components-web/issues/4027)) ([4a5a8e2](https://github.com/material-components/material-components-web/commit/4a5a8e2)) + + + # [0.41.0](https://github.com/material-components/material-components-web/compare/v0.40.0...v0.41.0) (2018-10-29) From c640d50758f109bc2a19cbc8203b10d4a11ac426 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 14 Nov 2018 15:34:32 -0500 Subject: [PATCH 5/5] fix(select): Enhanced select doesn't wrap focus (#4083) --- packages/mdc-menu/README.md | 1 + packages/mdc-menu/index.js | 10 ++++++++++ packages/mdc-select/index.js | 1 + test/unit/mdc-menu/mdc-menu.test.js | 10 ++++++++++ 4 files changed, 22 insertions(+) diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md index 32facf9c3fe..4ffec2cbb0e 100644 --- a/packages/mdc-menu/README.md +++ b/packages/mdc-menu/README.md @@ -192,6 +192,7 @@ Property | Value Type | Description `open` | Boolean | Proxies to the menu surface's `open` property. `items` | Array | Proxies to the list to query for all `.mdc-list-item` elements. `quickOpen` | Boolean | Proxies to the menu surface `quickOpen` property. +`wrapFocus` | Boolean | Proxies to list's `wrapFocus` property. Method Signature | Description --- | --- diff --git a/packages/mdc-menu/index.js b/packages/mdc-menu/index.js index 305404a7861..ed9fdc3fcf6 100644 --- a/packages/mdc-menu/index.js +++ b/packages/mdc-menu/index.js @@ -99,6 +99,16 @@ class MDCMenu extends MDCComponent { this.menuSurface_.open = value; } + /** @return {boolean} */ + get wrapFocus() { + return this.list_.wrapFocus; + } + + /** @param {boolean} value */ + set wrapFocus(value) { + this.list_.wrapFocus = value; + } + /** * @param {!Corner} corner Default anchor corner alignment of top-left * menu corner. diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js index 4a66cebf618..27e1d08e163 100644 --- a/packages/mdc-select/index.js +++ b/packages/mdc-select/index.js @@ -304,6 +304,7 @@ class MDCSelect extends MDCComponent { this.menu_.hoistMenuToBody(); this.menu_.setAnchorElement(/** @type {!HTMLElement} */ (this.root_)); this.menu_.setAnchorCorner(menuSurfaceConstants.Corner.BOTTOM_START); + this.menu_.wrapFocus = false; } /** diff --git a/test/unit/mdc-menu/mdc-menu.test.js b/test/unit/mdc-menu/mdc-menu.test.js index 52cceec4d64..d67c55d2c81 100644 --- a/test/unit/mdc-menu/mdc-menu.test.js +++ b/test/unit/mdc-menu/mdc-menu.test.js @@ -52,6 +52,7 @@ class FakeList { this.root = root; this.destroy = td.func('.destroy'); this.itemsContainer = td.func('.root_'); + this.wrapFocus = true; this.listElements = [].slice.call(root.querySelectorAll('.mdc-list-item')); } } @@ -158,6 +159,15 @@ test('get/set open', () => { assert.isFalse(menuSurface.open); }); +test('wrapFocus proxies to MDCList#wrapFocus property', () => { + const {component, list} = setupTestWithFakes(); + + assert.isTrue(component.wrapFocus); + + component.wrapFocus = false; + assert.isFalse(list.wrapFocus); +}); + test('setAnchorCorner proxies to the MDCMenuSurface#setAnchorCorner method', () => { const {component, menuSurface} = setupTestWithFakes(); component.setAnchorCorner(Corner.TOP_START);