priceline / design-system Goto Github PK

A simple styled <hr> component for adding borders as seen here: https://app.zeplin.io/project/59d3fd96ad8105a53df1650e/screen/59d5352d900c6ab3d6b9c99b

e.g. range input

The proposed <InlineBlockBox /> component is a type of<Box /> component with inline-block display.

Related: https://docs.travis-ci.com/user/deployment/pages/

We are importing theme in the Button Component. We would like to use the theme coming as a prop using the ThemeProvider context.

It would also be nice to add info as a first story for the Button component as well.

We can get some cool benefit by adding smartKnobs. In most cases, we can only create one story and adjust props with smart knobs.
It's also a great self-documentation if we're able to see all props a component accepts built into the storybook.

An extension of the Box component that includes a border/box-shadow style. This would also include adding @odmln's shadows to the theme

An extension to the Text component that sets the following styles:

  overflow: hidden;
  whiteSpace: nowrap;
  textOverflow: ellipsis;

The new theme is not supporting numbered colors anymore (blue0, green1..).

Create a set of heading components that map to different styles, per https://app.zeplin.io/project/596d11bc29e9db6303116850/screen/59ce5f3e7dae84848ceb589e

E.g.

const TitleXL = props => (
  <Heading
    fontSize={6}
    {...props}
  />
)

A "Nudge" component could help align elements like icons vertically in one-off situations and where flexbox isn't used

Composite components that include labels, helper message text, and validation messaging – with props for different states (invalid, disabled, success, warning, etc)

See #2

This is a list of design systems we found interesting, mainly built with React:

• Atlas kit - Atlassian
• Blueprint - Palantir
• Polaris - Shopify
• Lightning Design System - Salesforce
• ..

Also there is a great list of awesome design systems worth checking out.

It might be worth adding some higher-level grid layout abstractions to make page layout work like Bootstrap grid.

E.g.

const Row = props => (
  <Flex
    mx={-3}
    {...props}
  />
)

const Column = props => (
  <Box
    px={3}
    {...props}
  />
)

See: https://github.com/storybooks/storybook/tree/master/addons/info

The Box Component doesn't accept a height prop. Not sure if that is purposeful or not, but I would be happy to add it.

Support HTML heading elements(i.e. h1-h6) using syntax such as:

<Text.h3 />

Add a UI component that hides content per breakpoint. I think the media queries in this sort of component could deviate from the mobile-first min-width approach to target specific breakpoints, but still use the theme.breakpoints array

Requires new colors in #49

This would be an alternative to using the array index. For example, consider theme.mediaQueries.
Current usage inside styled component:

${props => props.theme.mediaQueries[0]} {
  css here
}

Aliased version would do the same thing, but look like this:

${props => props.theme.mediaQueries.sm} {
  css here
}

Size aliases could follow the bootstrap naming convention, so basically:
xs, sm, md, lg, xl

Seriously, the calendar is great. I would loooove to have it as an open sourced React component 👍

Add -webkit-font-smoothing: antialiased to the Button component per discussion with @odmln

See https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

Confirm with the design team font sizes they would like.

Possible Sizes.
10px $font-size-x-small
12px $font-size-small
14px $font-size-regular
16px $font-size-medium
18px $font-size-large
26px $font-size-x-large
30px $font-size-xx-large
48px $font-size-xxx-large

Per https://app.zeplin.io/project/596d11bc29e9db6303116850/screen/59ce7dfc54b85ec584d3df7e

Could be composed of the Flex, Text, and Icon components