@internetarchive/ia-clearable-text-input
v1.1.1TypeScript
`<ia-clearable-text-input>` component to display a text input field with a clear button that appears when non-empty
0/weekUpdated 1 months agoAGPL-3.0-onlyUnpacked: 513.3 KB
Published by Internet Archive
npm install @internetarchive/ia-clearable-text-input!Build Status 
A lightweight web component to display a text input field with a button to clear it, visible only when the field contains text.
Usage example
``ts
html
.placeholder=${'Input placeholder'}
.screenReaderLabel=${'Enter a value'}
.clearButtonScreenReaderLabel=${'Clear input field'}
@clear=${(e: CustomEventValue before clear was ${e.detail})}
/>
Other properties
- By default, the input field is focused after being cleared. If this is undesirable, set .focusOnClear=${false}
to disable.
- If the input field has other external controls, set .ariaControls=${'controls_id'} with the DOM ID of the controls element.Styling the component
The following style vars are available to modify the appearance of the component:Text input field:
`
/ Primary /
var(--input-padding, 0 1rem);
var(--input-border-width, 1px);
var(--input-border-style, solid);
var(--input-border-color, #ccc);
var(--input-border-radius, 2rem);
var(--input-color, #555);
var(--input-font-size, 1.7rem);
var(--input-line-height, 1.5);
var(--input-box-shadow, inset 0 1px 1px rgba(0, 0, 0, 0.075)); / Focused /
var(--input-focused-border-color, #66afe9);
var(--input-focused-box-shadow, inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%));
Clear button
var(--clear-button-height, var(--input-height));
var(--clear-button-width, var(--input-height));
var(--clear-button-padding, 0);
var(--clear-button-border, 0);
var(--clear-button-background-image, );
var(--clear-button-background-position, center);
var(--clear-button-background-size, 75%);
var(--clear-button-background-repeat, no-repeat);
var(--clear-button-background-color, transparent);
Local Demo with
bash
yarn start
`
To run a local development server that serves the basic demo located in Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
bash
yarn run test
`To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
bash
yarn run test:watch
`Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
bash
yarn run lint
`You can lint with ESLint and Prettier individually as well
bash
yarn run lint:eslint
`
bash
yarn run lint:prettier
`To automatically fix many linting errors, run
bash
yarn run format
`You can format using ESLint and Prettier individually as well
bash
yarn run format:eslint
`
bash
yarn run format:prettier
`Tooling configs
For most of the tools, the configuration is in the
to reduce the amount of files in your project.If you customize the configuration a lot, you can consider moving them to individual files.
$3
- after forking, add your repo to the authorized codecov list: https://github.com/organizations/internetarchive/settings/installations/1268216
- then, go to the badge maker page for your repo:
- copy link & paste into top of README.mdSteps to setup
static site generatorLet's start with creating a
gh-pages branch.This branch is where Github will look for the
index.html to be hosted`
git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initializing gh-pages branch"
git push origin gh-pages
$3
- Go to repo
-> sidebar Pages
- In the Source drop-down, choose the branch where you want to host your Github Pages and the directory where it was hosted
- We'll use gh-pages branch for this but you can use other branch name for this
- Just make sure that's the branch where the index.html that you want to host lives in
Manual Deploy using
gh-pagesYou can update the current Github Page without pushing a commit by running:
yarn run ghpages:publish
This build script does the following, see
:
- ghpages:publish
- This executes ghpages:prepare in the current branch you are currently working on
- Note: The branch name is required so that it will not override the whole Github Pages directory
- You can check it by navigating through the branch name files directory you set from the step to setup gh-pages branch
- You can checkout how it looks like in one of our projects here: https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages
- ghpages:prepare
- This executes ghpages:build that builds the project dependencies and generates vite build from it
- We use vite to bundle and generate the static assets that we host in Github Pages
- See vite.config.ts related to this-
ghpages:generate
- This executes npm package command to publish/upload the generated files from our vite build files
- Upon executing this command:
- This generates a commit message formatted from the most recent commit message of the branch
- Push the commit to gh-pages branch that we setup earlierThe live demo app URL from current branch will look something like this:
https://Automatic Deploy of Demo App
Things that trigger automatic site generation:
- a merge to
- See workflow:
- Example: - a pull request against
- See workflow:
- The URL for your Pull Request will be deleted after merging to main but you can update that in the config
- When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base URL/pull request number.
- Example:
- Note that is another directory where the index.html` lives in- You are free to playaround with it and set your desired file directory/structure on your end
Another thing to note: pushing a branch up alone will not trigger site creation.
Happy devving ^_^ 🥳 🎉