hack4impact-uiuc / bridge Goto Github PK
View Code? Open in Web Editor NEWHack4Impact UIUC Design System + React Components
Home Page: https://uiuc.hack4impact.org/design
License: MIT License
Hack4Impact UIUC Design System + React Components
Home Page: https://uiuc.hack4impact.org/design
License: MIT License
need to ensure styling matches with <thead>
, <tr>
, <th>
, <td>
.. not sure whether they sure inherit whatever the font the table is in?
type
: primary
, borderless
, zebra
components, structure, etc in README of /docs
["primary", "secondary", "success", "error" .....]
? Will the user be able to override that?I'm not sure if we should do this.. it's fairly complicated and idk if it's worth doing for the amount of effort vs how many people will use this
Could use https://react-dropzone.js.org/#dropzone (look at stying with styled-components) but here are some concerns:
Eventually, this would be redirected from uiuc.hack4impact.org/design
I'm imaging something like the Github' Primer or Shopify's polaris. You would have two main sections:
/design
)/components
)Both will have a sidebar of elements and clicking them will go to a page with more detail on that subject.
Content will be taken from a markdown file for ease of documentation creation and maintenance.
There's a ton of examples of react component library documentation.
Epic: #15
create a utility and file structure to map markdown files to the component/design documentation
So you have a list of components, which will be listed on the Sidebar (#5):
Each Component has details on what it does/how to use it etc... This should be in a markdown file - probably like:
- content
- design
- typography
- colors
- spacing
- ....
- components
- Button
- Alert
- Link
- ....
A sidebar may have different sections, etc - do something like this https://github.com/primer/components/blob/master/docs/src/%40primer/gatsby-theme-doctocat/nav.yml
Either we can use mdx
, gatsby
or whatever...
Epic: #15
@hack4impact-uiuc/design
mdx components that map to elements in markdown
Currently <Link/>
is a tertiary button, move that over to <Button />
Heading component that matches h1 styling
props
- type
- h1, h2, h3, h4
Should also respect as
related to #22
currently Icon only supports our icons
<Icon viewBox="0 0 32 32">
< path asdfjasldkfjklasjdlkfjalsdjfklajsdf />
</Icon>
props
- type
- body, hero, overline, caption, tables
Should also respect as
use rollup to include them in the bundle?
just a little off rn
in index.t.ds
for better library usage experience
props
<Checkbox>
- a radio input. for a radio input, with Blue as the description, do <Checkbox>Blue</Checkbox>
(would follow https://ant.design/components/radio/)<Checkbox.Group>
- a vertical group?Pretty similar to Radios #52
Let me know if you need the icons - im not sure if you need the svg or not
there's probably some that i missed and overlooked but here are my initial thoughts. A
component encompasses a group of input elements - this includes everything in #31 . Check out ant.design for inspiration.There are multiple types of form layouts.. we'll focus on vertical ones. Within vertical forms, you need to account for either
1.
Label Name [ your choice of input ]
2.
Label Name
[ your choise of input ]
The design system spec only accounts for the 2nd choice. We should add the 1st choice as well.
inline forms (e.g. two text inputs side by side) can be done with Flexbox by dev
props
props
<Form>
<Form.Item row>
<Form.Label required> Favorite Color </Form.Label>
<TextArea />
<Form.Text>some description </Form.Text>
</Form.Item>
// inline
<Flex>
<Box flex={1}>
<Form.Label required> Favorite Car </Form.Label>
<Dropownd asdfasdf />
<Form.Text>some description </Form.Text>
</Box>
<Box flex={1}>
<Form.Label required> Favorite shoe </Form.Label>
<TextField />
<Form.Text>some description </Form.Text>
</Box>
<Flex>
<Form.Item>
<Button>Submit</Button>
<Form.Item>
</Form>
<Alert variant="error" mb="8px">
<Icon type="errorAlert" />
Error! Logs will be <Link href="#">here</Link>!
</Alert>
or
<Alert variant="error" mb="8px">
Error! Logs will be <Link href="#">{" "}here</Link>!
</Alert>
doesnt add a space in between text. It doesn't work with a vanilla a
tag either.
Using Storybook to hot reload components during development
Polaris does this well https://github.com/Shopify/polaris-react/blob/master/.storybook/main.js
We'll do a simple dropdown for now (no complex things for like header,
within dropdown - we let user do that on their own if they want... we wont provide the api for that)
<Dropdown.Item>
Render children
tags font size should be 12px, line height 16 px, letterspacing 0.3 px
Grid and Box components - take from primer/components
get
is a HOC over themeGet
provided by styled-system... themeGet has the API of
themeGet(objectPath, fallbackValue)(props)
it takes props as a value and gets props.theme...
get
just defaults with the default theme...
However, with the way we've been using it outside styled-components (not tagged template literal) and in object literal syntax, it will always fallback the default theme ignoring the passed theme, if it exists...
So, we should
styled.div or whatever
do get(key)(props)
where props.theme
is the theme... However, we've been converting the theme
passed in as props as propTheme
since it conflicts with the default theme we import in components... Thus, we should alias default theme we import in as defaultTheme (since we use it once) -import {default as defaultTheme} from '../theme'
then whenever we deconstruct props for the component, we leave it as theme
, instead of aliasing it to propTheme
as such:
const Button = ({theme, ...props}){
}
// instead of ({theme: propTheme, ...props})
some theme attributes like letterSpacings
are defined as a scalar array. Then, each value is mapped to a key... but it would make sense not to initially represent it in an array
woops british and american english haha. We'll stick with grey. But it's inconsistent in theme.js
<Table>
<Row fontSize="12px">
doesnt work
</Row>
</Table>
fonts still stay 18px
Title: Bridge
Hero: A flexible but simple design system
Smaller: Design & Build with Hack4Impact UIUC Design System
Then below โ Lead User to clicking either Design or Components pages
remember about form validation...
<Radio>
- a radio input. for a radio input, with Blue as the description, do <Radio>Blue</Radio>
(would follow https://ant.design/components/radio/)<Radio.Group>
- a vertical group?I'm not exactly sure how to name these color variants since we have success, error, warning stuff with buttons. Maybe just the name of the color itself? green, blue, red... and then have another prop for "light", "primary", "dark"
required
: required
, optional
helperText
: strautoComplete
aria-label
placeholder
icon
?more?
#32 sister component
An issue to hold a list of potential components. We have a list of initial components from the design system but there are more to be added, especially with grid or just helping with hard to do components. We already have a Flex
box container but think of more abstractions like sidebars, row, etc... Look at other component libraries for inspiration too!
Feel free to comment to add more.. I will cross out and link the issue once we decide to go forward with a component on this list.
Grid Components
#89
use Box
but this is to provide the margins between Buttons
for the doโs and donts in documentation
required
: required
, optional
helperText
: strautoComplete
aria-label
placeholder
icon
?more?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.