@material/floating-label - npm Package Compare versions

Comparing version 0.35.0 to 0.35.2

package.json

 {
   "name": "@material/floating-label",
   "description": "The Material Components for the web floating-label component",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ <!--docs:
 section: components
-excerpt: "An animated text caption for a text field or select."
+excerpt: "An animated text caption for a Text Field or Select."
 path: /catalog/input-controls/floating-label/
@@ -12,3 +12,3 @@ -->
 
-Floating labels display the type of input a field requires. Every text field and select should have a label. 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.
+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.
 
@@ -19,7 +19,10 @@ ## Design & API Documentation
   <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
+    <a href="https://material.io/go/design-text-fields#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
   </li>
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material-components.github.io/material-components-web-catalog/#/component/text-field">Demo with Text Field</a>
+  </li>
 </ul>
 
-## Usage
+## Basic Usage
 
@@ -32,16 +35,20 @@ ### HTML Structure
 
-### Usage within `mdc-text-field`
+### Styles
 
-```html
-<div class="mdc-text-field">
-  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
+```scss
+@import "@material/floating-label/mdc-floating-label";
 ```
 
-<!-- TODO(mattgoo): add ### Usage within `mdc-select` once select uses mdc-floating-label -->
+### JavaScript Instantiation
 
-#### Avoid Dynamic ID Generation
+```js
+import {MDCFloatingLabel} from '@material/floating-label';
 
+const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));
+```
+
+## Variants
+
+### Avoid Dynamic ID Generation
+
 If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
@@ -58,2 +65,6 @@ a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<label>`:
 
+> NOTE: This method also works with `<select>`.
+
+## Style Customization
+
 ### CSS Classes
@@ -64,6 +75,6 @@
 `mdc-floating-label` | Mandatory.
-`mdc-floating-label--float-above` | Indicates the label is floating above the text field.
+`mdc-floating-label--float-above` | Indicates the label is floating in the floating position.
 `mdc-floating-label--shake` | Shakes the label.
 
-### SCSS Mixins
+### Sass Mixins
 
@@ -78,10 +89,14 @@ Mixin | Description
 
-### `MDCFloatingLabel`
+## `MDCFloatingLabel` Properties and Methods
 
 Method Signature | Description
 --- | ---
-`shake(shouldShake: boolean) => void` | Shakes or stops shaking the label, depending on the value of `shouldShake`. Proxies to the foundation method of the same name.
-`float(shouldFloat: boolean) => void` | Floats or docks the label, depending on the value of `shouldFloat`. Proxies to the foundation method of the same name.
-`getWidth() => number` | Returns the width of the label element.
+`shake(shouldShake: boolean) => void` | Proxies to the foundation's `shake()` method.
+`float(shouldFloat: boolean) => void` | Proxies to the foundation's `float()` method.
+`getWidth() => number` | Proxies to the foundation's `getWidth()` method.
 
+## Usage Within Frameworks
+
+If you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
+
 ### `MDCFloatingLabelAdapter`
@@ -88,0 +103,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62345

increased by1.07%

Lines of code

1055

increased by0.29%

Number of lines in readme file

110

increased by15.79%

No dependency changes