courner's People
courner's Issues
Implement an error state for the base input
Add Prop hasError
(bool)
Component border will be colored red when hasError
is true
Rename the atomic input to "InputCore"
Create a wrapper component for Inputs
The component should have the following features:
- Display a label
- Display some descriptive text
- Display some error text
Following concepts need to be introduced:
- Breakpoints (Mobile, Tablet, Desktop)
Behaviour like in https://codepen.io/chriscoyier/full/AvYQdv :
- On Desktop and Larger sizes, have the label and the input on the same row, Label is right-aligned.
- On Tablet sizes, the label and the input are on the same row, Label is left-aligned.
- On Phone sizes, Label and Input are on the same column, Label is above the input.
- Descriptive Text will be shown below the input (optionally)
- Error Text will be shown below the descriptive text (optionally)
- Optionally the error text can also be displayed instead of the descriptive text
Implement an Accessory typography component
Add Center Component
What component is missing?
A dedicated component that will center its content.
A switch for "expand to full size" which sets width and height to 100% would be nice.
Refactor SCSS utilities (functions and mixins) throughout the project
After the development of the first components, I do have a more clearer idea on how to tackle styling.
Provide longer, or complex style definitions via mixins and functions in SCSS.
Specifics:
-
transition
property in "fast", "medium" and "slow", that accepts the properties that should be included as well as the timing definition. - Color rework, prepare everything for design tokens as far as it can get
- Convencience-methods for colors (e.g.
border-color(<DESIGN-TOKEN>)
) - Convencience-methods for more complex css selectors (as needed)
Introduce eslint and stylelint into the project
ToDo's:
- Add eslint with a prexisting config for react projects (e.g. AirBnB)
- Add stylelint, most probably use the provided rules from the demo page
Update project dependencies and caniuse database
- Update CanIUse Database
- Update package dependencies
Publish Storybook on github pages
Storybook Example: Login Screen
What example are you missing?
I want a Example Login Screen that shows usage of input components with layout components. Example should include inputs for user + password, checkbox for "remember me", link to "forgot password" and button to do the login.
Design/Style
- The input fields should be located centralized.
- The input fields should be contained on a paper component with elevation.
- There is a title (h1) that introduces the user with a messages to log in.
- The title's variant can be changed with controls
- Input for username with errortext can be changed via controls
- Input for password with errortext can be changed via controls
- Checkbox for remember me is included
- Link for "Forgot Password" is displayed (no linking)
- Button for "Register" and "Login", Login is primary (no actions)
Added Value
First example, usage of different inputs with some data display components together with some layouting
Missing Components to fulfil
- InputWrapper Component (see #5 )
- Center Component (TBD)
Create a paper component
Features:
- Elevation (needs to be implemented)
- Has Courner
- Can have border
- Interactive optional
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.