Skip to content

Make styles overridable by default #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 4, 2022
Merged

Make styles overridable by default #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a692b08
Update testing library
andreaswilli Aug 3, 2022
e5e20a3
Make styles overridable by default
andreaswilli Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ All of these props are optional and some also come with a default value. However
| validChars | String | `'A-Za-z0-9'` | Set of characters the input should allow. The string is inserted into a regexp character set ( `/[]/` ) for input validation. |
| placeholder | String | `'·'` (U+00B7) | The character to display in empty fields. In order to use the blank character as a placeholder, specify this option as `' '` or `''`. |
| autoFocus | Boolean | `false` | Focus the input automatically as soon as it is rendered. |
| removeDefaultStyles | Boolean | `false` | Completely remove any styles that are not required for the component to work properly. This is useful if you want to override the default styles (see [Custom Styling](#custom-styling)). |
| debug | Boolean | `false` | Reveal what is going on behind the scenes, which might come in handy when trying to better understand the component. Obviously you don't want to use this in production. 😄 |
| inputProps | Object | `{}` | The properties of this object get forwarded as props to the input element. |
| containerProps | Object | `{}` | The properties of this object get forwarded as props to the container element. |
Expand All @@ -65,13 +64,10 @@ All of these props are optional and some also come with a default value. However

## Custom Styling

> **Note:** It's recommended to use the `removeDefaultStyles` option when applying custom styles, otherwise you may not be able to override the default styles.

Style the input by passing it your custom class names like so:

```js
<VerificationInput
removeDefaultStyles
classNames={{
container: "container",
character: "character",
Expand Down Expand Up @@ -128,6 +124,10 @@ Have a look at this example:

Custom props are no longer forwarded to the container element. Use the new prop `containerProps` instead and specify the custom props in object literal form.

- **prop: `removeDefaultStyles`**

The `removeDefaultStyles` prop has been removed. Styles are now overridable by default. Thus this prop can be removed safely.

## Migration Guide: `v0.1.x` --> `v2`

- **prop: `input`**
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^13.1.9",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.2",
"babel-loader": "^8.0.0",
Expand All @@ -65,8 +65,8 @@
"eslint-plugin-react-hooks": "^4.1.2",
"jest": "^27.0.4",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"regenerator-runtime": "^0.13.7",
"webpack": "^5.74.0",
"webpack-cli": "^4.7.2"
Expand Down
9 changes: 0 additions & 9 deletions src/constants.js
View file
Open in desktop

This file was deleted.

23 changes: 4 additions & 19 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { useRef, useState, useEffect, forwardRef } from "react";
import classNames from "classnames";
import PropTypes from "prop-types";

import { KEY_CODE } from "./constants";

import style from "./styles.css";

const VerificationInput = forwardRef(
Expand All @@ -14,7 +12,6 @@ const VerificationInput = forwardRef(
validChars,
placeholder,
autoFocus,
removeDefaultStyles,
debug,
inputProps,
containerProps,
Expand Down Expand Up @@ -42,12 +39,7 @@ const VerificationInput = forwardRef(

const handleKeyDown = (event) => {
if (
[
KEY_CODE.ARROW_LEFT,
KEY_CODE.ARROW_RIGHT,
KEY_CODE.ARROW_UP,
KEY_CODE.ARROW_DOWN,
].includes(event.keyCode)
["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)
) {
// do not allow to change cursor position
event.preventDefault();
Expand Down Expand Up @@ -100,27 +92,22 @@ const VerificationInput = forwardRef(
/>
<div
data-testid="container"
className={classNames("vi__container", classes.container, {
"vi__container--default": !removeDefaultStyles,
})}
className={classNames("vi__container", classes.container)}
onClick={() => inputRef.current.focus()}
{...containerProps}
>
{[...Array(length)].map((_, i) => (
<div
className={classNames("vi__character", classes.character, {
"vi__character--default": !removeDefaultStyles,
"vi__character--selected--default":
!removeDefaultStyles &&
"vi__character--selected":
(getValue().length === i ||
(getValue().length === i + 1 && length === i + 1)) &&
isActive,
[classes.characterSelected]:
(getValue().length === i ||
(getValue().length === i + 1 && length === i + 1)) &&
isActive,
"vi__character--inactive--default":
!removeDefaultStyles && getValue().length < i,
"vi__character--inactive": getValue().length < i,
[classes.characterInactive]: getValue().length < i,
})}
onClick={handleClick}
Expand All @@ -146,7 +133,6 @@ VerificationInput.propTypes = {
validChars: PropTypes.string,
placeholder: PropTypes.string,
autoFocus: PropTypes.bool,
removeDefaultStyles: PropTypes.bool,
debug: PropTypes.bool,
inputProps: PropTypes.object,
containerProps: PropTypes.object,
Expand All @@ -166,7 +152,6 @@ VerificationInput.defaultProps = {
validChars: "A-Za-z0-9",
placeholder: "·",
autoFocus: false,
removeDefaultStyles: false,
debug: false,
inputProps: {},
containerProps: {},
Expand Down
25 changes: 8 additions & 17 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.vi__wrapper {
/* :where() gives the styles specificity 0, which makes them overridable */
:where(.vi__wrapper) {
position: relative;
}

.vi {
:where(.vi) {
height: 100%;
box-sizing: border-box;
position: absolute;
Expand All @@ -18,44 +19,34 @@
transform: scale(1);
}

.vi__container {
:where(.vi__container) {
display: flex;
}

.vi__container--default {
gap: 8px;
height: 50px;
width: 300px;
}

.vi__character {
:where(.vi__character) {
height: 100%;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}

.vi__character--default {
font-size: 36px;
line-height: 50px;
color: black;
background-color: white;
margin-left: 8px;
border: 1px solid black;
cursor: default;
user-select: none;
box-sizing: border-box;
}

.vi__character--default:first-child {
margin-left: 0;
}

.vi__character--inactive--default {
:where(.vi__character--inactive) {
color: dimgray;
background-color: lightgray;
}

.vi__character--selected--default {
:where(.vi__character--selected) {
outline: 2px solid cornflowerblue;
color: cornflowerblue;
}
Loading