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

Commit e215ca8

Browse files
author
Matty Goo
authored
chore(notched-outline): separate outline from text-field (#2326)
BREAKING CHANGE: removed mdc-text-field__outline element for mdc-notched-outline. Renamed mdc-text-field-outlined-corner-radius to mdc-text-field-outline-corner-radius.
1 parent c2eb537 commit e215ca8

32 files changed

+509
-356
lines changed

‎demos/text-field.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,12 @@ <h2>Outlined Text Field</h2>
140140
<input type="text" id="tf-outlined-input" class="mdc-text-field__input"
141141
aria-controls="name-validation-message">
142142
<label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
143-
<div class="mdc-text-field__outline">
143+
<div class="mdc-notched-outline">
144144
<svg>
145-
<path class="mdc-text-field__outline-path"/>
145+
<path class="mdc-notched-outline__path"/>
146146
</svg>
147147
</div>
148-
<div class="mdc-text-field__idle-outline"></div>
148+
<div class="mdc-notched-outline__idle"></div>
149149
</div>
150150
<p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
151151
id="name-validation-message">
@@ -263,12 +263,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
263263
<i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
264264
<input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
265265
<label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
266-
<div class="mdc-text-field__outline">
266+
<div class="mdc-notched-outline">
267267
<svg>
268-
<path class="mdc-text-field__outline-path"/>
268+
<path class="mdc-notched-outline__path"/>
269269
</svg>
270270
</div>
271-
<div class="mdc-text-field__idle-outline"></div>
271+
<div class="mdc-notched-outline__idle"></div>
272272
</div>
273273
</div>
274274
<div id="demo-tf-outlined-trailing-wrapper">
@@ -277,12 +277,12 @@ <h2>Text Field - Leading/Trailing icons</h2>
277277
<input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
278278
<label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
279279
<i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
280-
<div class="mdc-text-field__outline">
280+
<div class="mdc-notched-outline">
281281
<svg>
282-
<path class="mdc-text-field__outline-path"/>
282+
<path class="mdc-notched-outline__path"/>
283283
</svg>
284284
</div>
285-
<div class="mdc-text-field__idle-outline"></div>
285+
<div class="mdc-notched-outline__idle"></div>
286286
</div>
287287
</div>
288288
<div>

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"linear-progress",
141141
"list",
142142
"menu",
143+
"notched-outline",
143144
"radio",
144145
"ripple",
145146
"rtl",
@@ -175,6 +176,7 @@
175176
"mdc-icon-toggle",
176177
"mdc-line-ripple",
177178
"mdc-menu",
179+
"mdc-notched-outline",
178180
"mdc-radio",
179181
"mdc-ripple",
180182
"mdc-selection-control",

‎packages/material-components-web/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import * as iconToggle from '@material/icon-toggle/index';
2727
import * as linearProgress from '@material/linear-progress/index';
2828
import * as lineRipple from '@material/line-ripple/index';
2929
import * as menu from '@material/menu/index';
30+
import * as notchedOutline from '@material/notched-outline/index';
3031
import * as radio from '@material/radio/index';
3132
import * as ripple from '@material/ripple/index';
3233
import * as select from '@material/select/index';
@@ -52,6 +53,7 @@ autoInit.register('MDCGridList', gridList.MDCGridList);
5253
autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
5354
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
5455
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
56+
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
5557
autoInit.register('MDCRadio', radio.MDCRadio);
5658
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
5759
autoInit.register('MDCTab', tabs.MDCTab);
@@ -78,6 +80,7 @@ export {
7880
lineRipple,
7981
linearProgress,
8082
menu,
83+
notchedOutline,
8184
radio,
8285
ripple,
8386
select,

‎packages/material-components-web/material-components-web.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import "@material/linear-progress/mdc-linear-progress";
3333
@import "@material/list/mdc-list";
3434
@import "@material/menu/mdc-menu";
35+
@import "@material/notched-outline/mdc-notched-outline";
3536
@import "@material/radio/mdc-radio";
3637
@import "@material/ripple/mdc-ripple";
3738
@import "@material/select/mdc-select";

‎packages/material-components-web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@material/linear-progress": "^0.30.0",
3535
"@material/list": "^0.32.0",
3636
"@material/menu": "^0.31.0",
37+
"@material/notched-outline": "0.0.0",
3738
"@material/radio": "^0.32.0",
3839
"@material/ripple": "^0.32.0",
3940
"@material/rtl": "^0.30.0",

‎packages/mdc-notched-outline/README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!--docs:
2+
title: "Notched Outline"
3+
layout: detail
4+
section: components
5+
excerpt: "The notched outline is a border around either a text field or select element"
6+
iconId: text_field
7+
path: /catalog/input-controls/notched-outline
8+
-->
9+
10+
# Notched Outline
11+
12+
The 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.
13+
14+
## Design & API Documentation
15+
16+
<ul class="icon-list">
17+
<li class="icon-list-item icon-list-item--spec">
18+
<a href="https://material.io/guidelines/components/text-fields.html#text-fields-field-variations">Material Design guidelines: Text Field Variations</a>
19+
</li>
20+
</ul>
21+
22+
## Usage
23+
24+
### HTML Structure
25+
26+
```html
27+
<div class="mdc-notched-outline">
28+
<svg>
29+
<path class="mdc-notched-outline__path"/>
30+
</svg>
31+
</div>
32+
<div class="mdc-notched-outline__idle"></div>
33+
```
34+
35+
> For usage within a text field see [here](../mdc-textfield/README.md#outlined/).
36+
37+
### CSS Classes
38+
39+
CSS Class | Description
40+
--- | ---
41+
`mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
42+
`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
43+
`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
44+
45+
### Sass Mixins
46+
47+
Mixin | Description
48+
--- | ---
49+
`mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
50+
`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
51+
`mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
52+
`mdc-notched-outline-corner-radius($radius)` | Sets the corner radius of the notched outline element to the given number.
53+
`mdc-notched-outline-idle-corner-radius($radius)` | Sets the corner radius of the notched outline element in idle state.
54+
> NOTE:
55+
> Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.
56+
> Consider the following example HTML:
57+
>
58+
> ```html
59+
> <div class="foo-line-ripple-parent">
60+
> <div class="mdc-notched-outline foo-line-ripple">
61+
> <svg>
62+
> <path class="mdc-notched-outline__path"/>
63+
> </svg>
64+
> </div>
65+
> <div class="mdc-notched-outline__idle"></div>
66+
> </div>
67+
> ```
68+
> In order to customize any "non-idle" part of notched-outline, use the .foo-line-ripple CSS selector:
69+
> ```scss
70+
> .foo-line-ripple {
71+
> @include mdc-notched-outline-color($fooColor);
72+
> }
73+
> ```
74+
> But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
75+
> ```scss
76+
> .foo-line-ripple-parent {
77+
> @include mdc-notched-outline-idle-color($fooColor);
78+
> }
79+
> ```
80+
81+
### `MDCNotchedOutline`
82+
83+
Method Signature | Description
84+
--- | ---
85+
`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
86+
87+
### `MDCNotchedOutlineAdapter`
88+
89+
Method Signature | Description
90+
--- | ---
91+
`getWidth() => number` | Returns the width of the outline element.
92+
`getHeight() => number` | Returns the height of the outline element.
93+
`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path.
94+
`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
95+
96+
### `MDCNotchedOutlineFoundation`
97+
98+
Method Signature | Description
99+
--- | ---
100+
`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given notchWidth and the RTL context.
101+
102+
103+
[//]: <> (TODO(mattgoo): add how to hide/show notch in outline)

‎packages/mdc-notched-outline/_mixins.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
//
2+
// Copyright 2018 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "@material/theme/mixins";
18+
19+
@mixin mdc-notched-outline-idle-color($color) {
20+
.mdc-notched-outline__idle {
21+
@include mdc-theme-prop(border-color, $color);
22+
}
23+
}
24+
25+
@mixin mdc-notched-outline-color($color) {
26+
.mdc-notched-outline__path {
27+
@include mdc-theme-prop(stroke, $color);
28+
}
29+
}
30+
31+
@mixin mdc-notched-outline-stroke-width($width) {
32+
.mdc-notched-outline__path {
33+
stroke-width: $width;
34+
}
35+
}
36+
37+
@mixin mdc-notched-outline-corner-radius($radius) {
38+
border-radius: $radius;
39+
}
40+
41+
@mixin mdc-notched-outline-idle-corner-radius($radius) {
42+
.mdc-notched-outline__idle {
43+
border-radius: $radius;
44+
}
45+
}

‎packages/mdc-textfield/outline/adapter.js renamed to ‎packages/mdc-notched-outline/adapter.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@
1818
/* eslint no-unused-vars: [2, {"args": "none"}] */
1919

2020
/**
21-
* Adapter for MDC Text Field Outline.
21+
* Adapter for MDC Notched Outline.
2222
*
2323
* Defines the shape of the adapter expected by the foundation. Implement this
24-
* adapter to integrate the Text Field outline into your framework. See
24+
* adapter to integrate the Notched Outline into your framework. See
2525
* https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
2626
* for more information.
2727
*
2828
* @record
2929
*/
30-
class MDCTextFieldOutlineAdapter {
30+
class MDCNotchedOutlineAdapter {
3131
/**
3232
* Returns the width of the root element.
3333
* @return {number}
@@ -55,4 +55,4 @@ class MDCTextFieldOutlineAdapter {
5555
getIdleOutlineStyleValue(propertyName) {}
5656
}
5757

58-
export default MDCTextFieldOutlineAdapter;
58+
export default MDCNotchedOutlineAdapter;

‎packages/mdc-textfield/outline/constants.js renamed to ‎packages/mdc-notched-outline/constants.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright 2016 Google Inc. All Rights Reserved.
3+
* Copyright 2018 Google Inc. All Rights Reserved.
44
*
55
* Licensed under the Apache License, Version 2.0 (the "License");
66
* you may not use this file except in compliance with the License.
@@ -17,8 +17,8 @@
1717

1818
/** @enum {string} */
1919
const strings = {
20-
PATH_SELECTOR: '.mdc-text-field__outline-path',
21-
IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
20+
PATH_SELECTOR: '.mdc-notched-outline__path',
21+
IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
2222
};
2323

2424
export {strings};

‎packages/mdc-textfield/outline/foundation.js renamed to ‎packages/mdc-notched-outline/foundation.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@
1616
*/
1717

1818
import MDCFoundation from '@material/base/foundation';
19-
import MDCTextFieldOutlineAdapter from './adapter';
19+
import MDCNotchedOutlineAdapter from './adapter';
2020
import {strings} from './constants';
2121

2222
/**
23-
* @extends {MDCFoundation<!MDCTextFieldOutlineAdapter>}
23+
* @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
2424
* @final
2525
*/
26-
class MDCTextFieldOutlineFoundation extends MDCFoundation {
26+
class MDCNotchedOutlineFoundation extends MDCFoundation {
2727
/** @return enum {string} */
2828
static get strings() {
2929
return strings;
3030
}
3131

3232
/**
33-
* {@see MDCTextFieldOutlineAdapter} for typing information on parameters and return
33+
* {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
3434
* types.
35-
* @return {!MDCTextFieldOutlineAdapter}
35+
* @return {!MDCNotchedOutlineAdapter}
3636
*/
3737
static get defaultAdapter() {
38-
return /** @type {!MDCTextFieldOutlineAdapter} */ ({
38+
return /** @type {!MDCNotchedOutlineAdapter} */ ({
3939
getWidth: () => {},
4040
getHeight: () => {},
4141
setOutlinePathAttr: () => {},
@@ -44,19 +44,19 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
4444
}
4545

4646
/**
47-
* @param {!MDCTextFieldOutlineAdapter} adapter
47+
* @param {!MDCNotchedOutlineAdapter} adapter
4848
*/
4949
constructor(adapter) {
50-
super(Object.assign(MDCTextFieldOutlineFoundation.defaultAdapter, adapter));
50+
super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
5151
}
5252

5353
/**
54-
* Updates the SVG path of the focus outline element based on the given width of the
55-
* label element and the RTL context.
56-
* @param {number} labelWidth
54+
* Updates the SVG path of the focus outline element based on the notchWidth
55+
* and the RTL context.
56+
* @param {number} notchWidth
5757
* @param {boolean=} isRtl
5858
*/
59-
updateSvgPath(labelWidth, isRtl = false) {
59+
updateSvgPath(notchWidth, isRtl = false) {
6060
// Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
6161
const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
6262
this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
@@ -65,7 +65,7 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
6565
const height = this.adapter_.getHeight();
6666
const cornerWidth = radius + 1.2;
6767
const leadingStrokeLength = Math.abs(11 - cornerWidth);
68-
const paddedLabelWidth = labelWidth + 8;
68+
const paddedNotchWidth = notchWidth + 8;
6969

7070
// The right, bottom, and left sides of the outline follow the same SVG path.
7171
const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
@@ -78,19 +78,19 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
7878

7979
let path;
8080
if (!isRtl) {
81-
path = 'M' + (cornerWidth + leadingStrokeLength + paddedLabelWidth) + ',' + 1
82-
+ 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength)
81+
path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
82+
+ 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
8383
+ pathMiddle
8484
+ 'h' + leadingStrokeLength;
8585
} else {
8686
path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
8787
+ 'h' + leadingStrokeLength
8888
+ pathMiddle
89-
+ 'h' + (width - (2 * cornerWidth) - paddedLabelWidth - leadingStrokeLength);
89+
+ 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
9090
}
9191

9292
this.adapter_.setOutlinePathAttr(path);
9393
}
9494
}
9595

96-
export default MDCTextFieldOutlineFoundation;
96+
export default MDCNotchedOutlineFoundation;

0 commit comments

Comments
 (0)