@material/form-field - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

package.json

 {
   "name": "@material/form-field",
-  "description": "Material Components for the web wrapper styles for laying out form fields and labels next to one another",
-  "version": "0.1.1",
+  "description": "Material Components for the web wrapper for laying out form fields and labels next to one another",
+  "version": "0.2.0",
   "license": "Apache-2.0",
+  "keywords": [
+    "material components",
+    "material design",
+    "form"
+  ],
+  "main": "index.js",
   "repository": {
@@ -11,6 +17,7 @@ "type": "git",
   "dependencies": {
-    "@material/rtl": "^0.1.1",
-    "@material/theme": "^0.1.1",
-    "@material/typography": "^0.1.1"
+    "@material/base": "^0.1.2",
+    "@material/rtl": "^0.1.2",
+    "@material/theme": "^0.1.2",
+    "@material/typography": "^0.2.0"
   }
 }

README.md

 # MDC Form Field
 
 MDC Form Field provides an `mdc-form-field` helper class for easily making theme-aware, RTL-aware
-form field + label combos.
+form field + label combos. It also provides an `MDCFormField` class for easily making input ripples
+respond to label events.
 
@@ -12,3 +13,3 @@ ## Installation
 
-## Usage
+## CSS Usage
 
@@ -75,1 +76,79 @@ The `mdc-form-field` class can be used as a wrapper element with any `input` + `label` combo:
 color when used within a dark theme.
+
+
+## JS Usage
+
+### Including in code
+
+#### ES2015
+
+```javascript
+import {MDCFormField, MDCFormFieldFoundation} from 'mdc-form-field';
+```
+
+#### CommonJS
+
+```javascript
+const mdcFormField = require('mdc-form-field');
+const MDCFormField = mdcFormField.MDCFormField;
+const MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;
+```
+
+#### AMD
+
+```javascript
+require(['path/to/mdc-form-field'], mdcFormField => {
+  const MDCFormField = mdcFormField.MDCFormField;
+  const MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;
+});
+```
+
+#### Global
+
+```javascript
+const MDCFormField = mdc.radio.MDCFormField;
+const MDCFormFieldFoundation = mdc.radio.MDCFormFieldFoundation;
+```
+
+### Instantiation
+
+```javascript
+import {MDCFormField} from 'mdc-form-field';
+
+const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
+```
+
+### MDCFormField API
+
+The `MDCFormField` functionality is exposed through a single accessor method.
+
+#### MDCFormField.input
+
+Read-write property that works with an instance of an MDC-Web input element.
+
+In order for the label ripple integration to work correctly, this property needs to be set to a
+valid instance of an MDC-Web input element which exposes a `ripple` getter.
+
+```javascript
+const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
+const radio = new MDCRadio(document.querySelector('.mdc-radio'));
+
+formField.input = radio;
+```
+
+No action is taken if the `input` property is not set or the input instance doesn't expose a
+`ripple` getter.
+
+
+### Adapter
+
+The adapter for `MDCFormField` is extremely simple, providing only methods for adding and
+removing event listeners from the label, as well as methods for activating and deactivating
+the input ripple.
+
+| Method Signature | Description |
+| --- | --- |
+| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |
+| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |
+| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |
+| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |

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

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

Improved metrics

Total package byte prevSize

54914

increased by216.12%

Number of package files

10

increased by100%

Lines of code

984

increased by149.11%

Number of lines in readme file

153

increased by106.76%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@material/base@^0.1.2

• + Added@material/base@0.1.3(transitive)

• + Added@material/typography@0.2.3(transitive)

• - Removed@material/typography@0.1.1(transitive)

• Updated@material/rtl@^0.1.2

• Updated@material/theme@^0.1.2

• Updated@material/typography@^0.2.0