<ods-inputtext>
is a wrapper component containing styling and behavior for a HTML <input>
element and associated <label>
. You can pass helper text to be displayed with the input. It will also perform client-side validation of the input and display any resulting errors.
$ npm i @alaskaairux/ods-inputtext
Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this stack overflow answer.
The use of any ODS custom element has a dependency on the ODS Design Tokens. There are two options for including the necessary tokens. Choosing between Sass or CSS is specifically an option for how it is imported into the project. The content of the files are the same.
file | syntax | variable type | description |
---|---|---|---|
CSSCustomProperties.css | CSS | css custom property | full array of Auro Design Tokens |
SassCustomProperties.scss | Sass | css custom property | full array of Auro Design Tokens |
CSSSizeCustomProperties.css | CSS | css custom property | sub-set of Auro Design Tokens, filtered on size |
SassSizeCustomProperties.scss | Sass | css custom property | sub-set of Auro Design Tokens, filtered on size |
For additional details in regards to using Orion Design Tokens with components, please see docs/TECH_DETAILS.md
CSS custom properties are not supported in older browsers. For this, fallback properties are pre-generated and included with the npm.
Any update to the Orion Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
Defining the component dependency within each component that is using the <ods-inputtext> component.
import "@alaskaairux/ods-inputtext";
Reference component in HTML
<ods-inputtext label="First name" required></ods-inputtext>
The <ods-inputtext>
element should be used in situations where users may:
- enter a single line of text into a form
- enter their email into a form
<ods-inputtext label="First name" helptext="Enter your first name" required></ods-inputtext>
<ods-inputtext label="First name" value="Alaska" required></ods-inputtext>
<ods-inputtext label="First name"></ods-inputtext>
<ods-inputtext type="email" label="Email" required></ods-inputtext>
<ods-inputtext label="First name" disabled required></ods-inputtext>
<ods-inputtext label="First name" value="Alaska" error="This name already exists" required></ods-inputtext>
In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
Please be sure to review the contribution guidelines for this project. Please make sure to pay special attention to the conventional commits section of the document.
Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open three different shell sessions. One is for the Gulp tasks, the second is for a series of npm tasks and the last is to run the Polymer server.
Peer dependency: Please make sure Polymer is installed globally in order to run the Polymer server. See ODS Web Component Development Details for more information.
$ npm i polymer-cli
// shell terminal one
$ gulp dev
// shell terminal two
$ npm run dev
// shell terminal three
polymer serve
Automated tests are required for every Orion component. See .\test\ods-inputtext.test.js
for the tests for this component. Run npm test
to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See the testing documentation for more details.