From 8112d4ff6bd85265452838a4fd7232111a6c50f9 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 4 Dec 2019 13:36:00 -0500 Subject: [PATCH 01/11] fixing to work without Polymer --- test/d2l-input-text-iron-integration.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/d2l-input-text-iron-integration.html b/test/d2l-input-text-iron-integration.html index bc132c9..6c8690a 100644 --- a/test/d2l-input-text-iron-integration.html +++ b/test/d2l-input-text-iron-integration.html @@ -52,7 +52,7 @@ it('should update bindValue when input value changes', function(done) { var textInput = elem.querySelector('d2l-input-text'); - var input = textInput.$$('input'); + var input = textInput.shadowRoot.querySelector('input'); elem.addEventListener('bind-value-changed', function() { expect(textInput.value).to.equal('hello'); From 8c64cb28d93c7ff85c0442be58c9c5c0992563be Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 4 Dec 2019 13:37:32 -0500 Subject: [PATCH 02/11] referencing text input from Lit-core --- d2l-input-text.js | 135 +----------------------------------- demo/d2l-input-text.html | 95 +++++++------------------- test/d2l-input-text.html | 144 --------------------------------------- test/index.html | 4 -- 4 files changed, 25 insertions(+), 353 deletions(-) delete mode 100644 test/d2l-input-text.html diff --git a/d2l-input-text.js b/d2l-input-text.js index 939aff8..27ab53e 100644 --- a/d2l-input-text.js +++ b/d2l-input-text.js @@ -1,134 +1 @@ -/** -`d2l-input-text` -Polymer-based web component for D2L text inputs - -@demo demo/d2l-input-text.html -*/ -/* - FIXME(polymer-modulizer): the above comments were extracted - from HTML and may be out of place here. Review them and - then delete this comment! -*/ -import '@polymer/polymer/polymer-legacy.js'; - -import 'd2l-colors/d2l-colors.js'; -import 'd2l-polymer-behaviors/d2l-focusable-behavior.js'; -import './d2l-input-text-behavior.js'; -import './d2l-input-shared-styles.js'; -import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; -const $_documentContainer = document.createElement('template'); - -$_documentContainer.innerHTML = ` - - -`; - -document.head.appendChild($_documentContainer.content); -Polymer({ - is: 'd2l-input-text', - - behaviors: [ - D2L.PolymerBehaviors.FocusableBehavior, - D2L.PolymerBehaviors.Text.InputTextBehavior - ], - - properties: { - /** - * Gets or sets the [aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute), - * which contains the IDs of the elements that describe the input. - */ - ariaDescribedby: { - type: String - }, - /** - * On "text" or "number" input types, allows user agent to provide - * automated assistance filling out forms. [Supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete: { - type: String - }, - /** - * List of pre-defined options to suggest to the user. The value must be the id of a element in the same document. - */ - list: { - type: String - }, - /** - * The maximum numeric value for this item, which must not be less than its minimum (min attribute) value. - */ - max: { - type: String - }, - /** - * The minimum numeric value for this item, which must not be greater than its maximum (max attribute) value. - */ - min: { - type: String - }, - /** - * A regular expression that the control's value is checked against. - */ - pattern: { - type: String - }, - /** - * Indicates that the form will not be submitted when the user presses enter within the input cell. - */ - preventSubmit: { - type: Boolean, - value: false, - }, - /** - * The initial size of the control as an integer number of characters. - */ - size: { - type: Number - }, - /** - * Works with the min and max attributes to limit the increments at which a numeric value can be set. - */ - step: { - type: String - }, - /** - * Gets or sets the text input type, one of "text" (default), "number", "email", "password", "url". - */ - type: { - type: String, - value: 'text' - }, - /** - * Value of the input. - */ - value: { - type: String, - notify: true - } - }, - _handleChange: function() { - // Change events don't automatically propagate across shadow DOM boundaries - this.dispatchEvent(new CustomEvent( - 'change', - {bubbles: true, composed: false} - )); - }, - _handleKeypress: function(e) { - if (this.preventSubmit && e.keyCode === 13) { - e.preventDefault(); - return false; - } - return true; - } -}); +import '@brightspace-ui/core/components/inputs/input-text.js'; diff --git a/demo/d2l-input-text.html b/demo/d2l-input-text.html index 15e8db2..819ba94 100644 --- a/demo/d2l-input-text.html +++ b/demo/d2l-input-text.html @@ -3,102 +3,55 @@ - d2l-input-text demo - - - - - - - - + + + import '/node_modules/@brightspace-ui/core/components/demo/demo-page.js'; + import '../d2l-input-text.js'; + - - - + + + diff --git a/test/d2l-input-text.html b/test/d2l-input-text.html deleted file mode 100644 index c937f5d..0000000 --- a/test/d2l-input-text.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - d2l-input-text test - - - - - - - - - - - - - - - diff --git a/test/index.html b/test/index.html index f9db430..e57ebf2 100644 --- a/test/index.html +++ b/test/index.html @@ -10,10 +10,6 @@ - - - - - - - - - - - - From a3b8057ce9acfa8dae7ce9c50d04f9fac7c97ef8 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 4 Dec 2019 14:33:41 -0500 Subject: [PATCH 07/11] switching demos to use Lit helpers --- demo/d2l-input-radio-styles.html | 94 ++++-------- demo/d2l-input-textarea.html | 238 +++++++++++-------------------- 2 files changed, 111 insertions(+), 221 deletions(-) diff --git a/demo/d2l-input-radio-styles.html b/demo/d2l-input-radio-styles.html index 9b6477e..a52f652 100644 --- a/demo/d2l-input-radio-styles.html +++ b/demo/d2l-input-radio-styles.html @@ -3,67 +3,25 @@ - d2l-inputs demo - - - - - - - + + - + import '/node_modules/@brightspace-ui/core/components/demo/demo-page.js'; + import '../d2l-input-radio-styles.js'; + + const $_documentContainer = document.createElement('template'); + $_documentContainer.innerHTML = ` + + `; + document.body.appendChild($_documentContainer.content); + - - + + diff --git a/demo/d2l-input-textarea.html b/demo/d2l-input-textarea.html index 2ed3cb3..f77b3ec 100644 --- a/demo/d2l-input-textarea.html +++ b/demo/d2l-input-textarea.html @@ -1,180 +1,116 @@ - - - - d2l-input-textarea demo - - - - - - - - + + + + - + import '/node_modules/@brightspace-ui/core/components/demo/demo-page.js'; + import '../d2l-input-textarea.js'; + - - + + + + + From 36f9ac60a430cee0e89311a607623fee0e476b0f Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 4 Dec 2019 14:33:51 -0500 Subject: [PATCH 08/11] removing unused dependencies --- package.json | 7 ------- 1 file changed, 7 deletions(-) diff --git a/package.json b/package.json index 7208aad..6e17eac 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,10 @@ "author": "D2L Corporation", "license": "Apache-2.0", "devDependencies": { - "@polymer/iron-component-page": "^4", - "@polymer/iron-demo-helpers": "^3", - "@polymer/iron-input": "^3", "@polymer/iron-test-helpers": "^3", "@webcomponents/webcomponentsjs": "^2", "babel-eslint": "^10", "chromedriver": "^2.40.0", - "d2l-typography": "BrightspaceUI/typography#semver:^7", "eslint": "^6", "eslint-config-brightspace": "^0.6.0", "eslint-plugin-html": "^6", @@ -44,9 +40,6 @@ "dependencies": { "@brightspace-ui/core": "^1.19.1", "@polymer/polymer": "^3.0.0", - "d2l-button": "BrightspaceUI/button#semver:^5", - "d2l-icons": "BrightspaceUI/icons#semver:^6", - "d2l-localize-behavior": "BrightspaceUI/localize-behavior#semver:^2", "d2l-typography": "BrightspaceUI/typography#semver:^7", "fastdom": "^1" } From c1d5030465e07c7a39574176a35801109f746134 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Wed, 4 Dec 2019 14:48:07 -0500 Subject: [PATCH 09/11] updated README --- README.md | 500 +-------------------------------------- screenshots/checkbox.gif | Bin 64020 -> 0 bytes screenshots/search.gif | Bin 248011 -> 0 bytes screenshots/text.gif | Bin 53132 -> 0 bytes 4 files changed, 6 insertions(+), 494 deletions(-) delete mode 100644 screenshots/checkbox.gif delete mode 100644 screenshots/search.gif delete mode 100644 screenshots/text.gif diff --git a/README.md b/README.md index ee7806a..a832e24 100644 --- a/README.md +++ b/README.md @@ -1,133 +1,6 @@ -# d2l-inputs -[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/inputs) -[![Bower version][bower-image]][bower-url] -[![Build status][ci-image]][ci-url] +> Deprecated: use [BrightspaceUI/core](https://github.com/BrightspaceUI/core) instead. -Polymer-based web components for D2L inputs - -## Installation - -`d2l-inputs` can be installed from [Bower][bower-url]: -```shell -bower install d2l-inputs -``` - -## Usage - -Available `d2l-inputs` components: -- [Text](#d2l-input-text) -- [Textarea](#d2l-input-textarea) -- [Checkbox](#d2l-input-checkbox-and-d2l-input-checkbox-spacer) -- [Search](#d2l-input-search) - -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components): -```html - - - -``` -Then import the components below you want to use. - -### d2l-input-text - - - -Import `d2l-input-text.html`: - -```html - - - -``` - -A `` custom element can now be used in your application: - - -```html - -``` - -Many of the same attributes from native [`` are available](https://developer.mozilla.org/en/docs/Web/HTML/Element/input): - - -```html - -``` - -The `d2l-input-text` component dispatches an event (`change`) when text is entered/changed/removed: - - -```html - -``` -When the input is cleared, the same event will be fired with an empty value. +The only component that isn't currentlly available in `@brightspace-ui/core` is ``, so it remains here. It wasn't migrated due to its reliance on Polymer style mixins, and the reliance of places that use it on overriding those mixins. Mixins aren't something that Lit supports. ### d2l-input-textarea @@ -136,61 +9,20 @@ When the input is cleared, the same event will be fired with an empty value. Import `d2l-input-textarea.html`: ```html - - - + ``` A `` custom element can now be used in your application: - + ```html ``` Many of the same attributes from native [`