Feature request 🚀

• Add a sample application under folder examples.
• Show how to overwrite styles with className.
• Show how to overwrite styles with inline-style.

Feature request 🚀

Expected:

• No breaking changes

Examples:

Programme:

Others:

Like Card.Footer or Card.Actions?, to create cards like on the zeit (Vercel?) website.

Feature request 🚀

Expected:

• An example of how to get started on create-react-app
• There may be some compatibility issues to deal with

Bug report 🐞

Expection

I used next/link to wrap UI button and get forwardRef error:

<NextLink href='/write'>
  <Button ghost auto>
    <Add /> Write a story
  </Button>
</NextLink>

Actual results (or Errors)

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

About docs

The example code at the first section (Switch themes) at https://react.zeit-ui.co/docs/customization/themes does not work properly, at least on Next.js 9.2.2, since:

1. The hooks need to be inside the function component, and not outside;
2. useTheme() doesn't seem to be very needed, since the current theme type will be stored on the type state variable?
3. At const switchThemes = () => () => the extra set of => () isn't needed;
4. At <ZEITUIProvider theme={{ type }}> the theme attribute actually takes in a value of type ThemeParam, which is an array of objects, where there is a "type" property. Therefore I replaced the above for <ZEITUIProvider theme={{ type: typevariable }}>;

As an example, this is my code currently (which works):

const App = () => {
  const [themeType, setThemeType] = useState('dark')
  const switchThemes = () => {
    let nextTheme = themeType === 'dark' ? 'light' : 'dark'
    setThemeType(nextTheme)
  }
  return (
    <ZEITUIProvider theme={{ type: themeType }}>
      <CSSBaseline />
      <MyApp pressAction={switchThemes} />
    </ZEITUIProvider>
  )
}

I can make a commit with the updated code for the docs in case this is confirmed, or maybe you'll want to change some things on the code

Bug report 🐞

Version & Environment

Expection

Actual results (or Errors)

About styles 🛠️

In Vercel the filled Note text color is white.

Feature request 🚀

• A sample application under folder examples.
• Show how to custom themes.
• Support TypeScript

Feature request 🚀

Expected:

• No secret is used in the deployment of Now
• Query contributors with HTTP services
• Contributors data is updated when pull request merged

Bug report 🐞

Version & Environment

Expection

Actual results (or Errors)

Feature request 🚀

Now we can use the Link component from next.js like this:

import NextLink from 'next/link'
import { Link, Button } from '@zeit-ui/react'

() => (
  <>
    <NextLink href="..." as="..."><Link>text</Link></NextLink>
    <NextLink href="..." as="..."><Link><Button>text</Button></Link></NextLink>
  </>
)

As seen above, for forward ref and add styles, we have to add a extra Link when using next/link. If we provider a HOC component, the code will be much simpler:

import { Link, NextLink } from '@zeit-ui/react'

() => (
  <>
    <NextLink                 // <--- use in the nextjs project
      href="..." as="..."     // <--- next/link props
      block                       // <--- zeit-ui/react props
    >text</NextLink>
    <Link href="...">text</Link>    // <--- use in the normal project
  </>
)

Expected:

• Add NextLink component, no breaking changes
• Forward all props of next/link and @zeit-ui/react/link
• If you don't use next.js, the package size doesn't change

Others:

If you like this change, please leave an emoji of +1. (any point of view, please feel free to leave a message.)

Feature request 🚀

How can we use Link components as a React-Router Link or NextJS Link

Expected:

• No breaking changes

Examples:

Programme:

Others:

Feature request 🚀

This maybe helpful for some users, and additional documents need to be added.

Examples:

import { useClipboard } from '@zeit-ui'

const { copy } = useClipboard()

About styles 🛠️

in dark mode the modal overly color is off.

can we make it darker to fit the zeit design.

and also can we change the heading and subheading to title case?

About styles 🛠️

Your version puts the active element in a box with all-caps text.

Zeit's just makes the text bold.

About docs

The document states that the input component has type attributes, but there are errors in using type props when coding.

@zeit-ui/react version 0.0.1-beta.8

<Input
    placeholder={"password"}
    value={password}
    onChange={(ev: any) => setPassword(ev.target.value)}
    type={"password"}   // have error in there
    clearable
/>

Version & Environment

"@zeit-ui/react": "^0.0.1-beta.20",

Expectation

Link color should be blue when theme.type === 'dark'.

Actual results

All Links have a color: white; when theme.type === 'dark'.

The only global styles set are through <CSSBaseline />.

About styles 🛠️

It should be like this

Feature request 🚀

Expected:

• Basic Select component
• Use event simulation select for more styles
• Animation support

Bug report 🐞

Use these components with an error message:

const App = () => {
  return (
    <>
      <Button>My Button</Button>
      <Link>My Link</Link>
    </>
  );
};

Hint Errors

This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided.ts(2745)

About styles 🛠️

I noticed that few users use icon style of Link, should we hide icon by default?

Expected

• there will be a breaking change in style.
• will not cause any errors.

Examples

• Deafult:

// current:
<Link></Link>

// after:
<Link icon></Link>

• Without Icon

// current:
<Link pure></Link>

// after:
<Link></Link>

Poll

Feature request 🚀

option to add Icon (badge) to Avatar Component.

Expected:

• No breaking changes

Examples:

Programme:

Others:

I want everyone to see the contributors to the document site, it also enables more people to participate in document optimization.

1. Get a list of contributors on each page and show them.
2. Add link to contributor's home page (github).

Feature request 🚀

Expected:

• All documents adapt to mobile

Bug report 🐞

The input autofill text color is black as well as the background, in dark mode.

Version & Environment

Expection

Actual results (or Errors)

We've exposed some functions and hooks, now we can use them like this:

import { Utils } from '@zeit-ui/react'
const {
  withDefaults,
  useBodyScroll,
  useClickAnywhere,
  useClickAway,
  useClipboard,
  useCurrentState,
  useRealShape,
  useResize,
  useSSR,
} = Utils

Now we need to supplement the docs for these utility functions.

About issue: #65

About styles 🛠️

I have a problem setting this property to false, because the effect doesn't change.
If i'm not wrong, that property should change the effect on hover on the button component, and it will have no effect by setting to false.

Code:

<Button size="small" type="success" ghost effect={false}>
  MyButton
</Button>

Result

Feature request 🚀

Expected:

• Support space / alignment
• check breaking points with CSS

Examples:

1. Basic:

<Grid.Container spacing={5}>
  <Grid size={5}>text</Grid>
  <Grid xs={2}>text</Grid>
  <Grid lg={10}>text</Grid>
  <Grid mobile={2}>text</Grid>
</Grid.Container>

2. Custom breaking points:

const breakPoints = {
  xs: {max: 600},
  sm: {min: 601, max: 959},
  md: {min: 960, max: 1279},
  lg: {min: 1280, max: 1919},
  xl: {min: 1920},
  mobile: {max: 700},
}

const app = () => (
  <ZEITUIProvider breakPoints={breakPoints}>
    <App />
  </ZEITUIProvider>
)

Others:

Fortunately, using JSS to implement custom breaking points is very simple. 😄

Feature request 🚀

Expected:

• A component that takes text spanning over multiple lines, clips the overflowing text (i.e. parts that do not fit in the provided number of lines) out, and adds an ellipsis (...) at the end (with optionally an expand text button to see the complete text).

Examples:

This is available in ant design Paragraph component under Typography.
https://ant.design/components/typography/#components-typography-demo-ellipsis

P.S. Absolutely loved the simplicity of the components and their designs.

Bug report 🐞

When I use Select in Modal I don't see the options because the z-index of class dropdown is 100 and the z-index of the modal is 1001.

I can help if you want and accept PR.

Version & Environment

1.0.0-rc.8

Expection

Actual results (or Errors)

Feature request 🚀

All components are shown as Anonymous, their names need to be specified manually through displayName.
This has no impact on the production.

Feature request 🚀

Expected:

• Reduce each file size
• Reduce the bundle size generated by the user's application

About styles 🛠️

Feature request 🚀

Expected:

• Add Tabs component
• Design refer: Tabs

Examples:

<Tabs>
  <Tabs.Item label="tab1">content 1</Tabs.Item>
  <Tabs.Item label="tab2">content 2</Tabs.Item>
</Tabs>

Feature request 🚀

1. Use x or x props to add spacers
2. Width should be controllable
3. Display text

Feature request 🚀

A hooks for query media information, it's not the most common solution, but it's practical.

Expected:

• Get media info from hooks
• Custom hooks
• High performance

Examples:

1. Basic usage

() => {
  const { isMobile, isDesktop } = useResponsive()
  const { xs, sm, md, lg, xl } = useResponsive()

  return <div>{isMobile && <span>mobile</span>}</div>
}

2. Custom breaking points:

// utils.jsx
const useResponsive = makeResponsiveHook({
  xs: {min: 0, max: 600},
  sm: {min: 601, max: 959},
  md: {min: 960, max: 1279},
  lg: {min: 1280, max: 1919},
  xl: {min: 1920, max: Number.MAX_SAFE_INTEGER},
  mobile: {min: 0, max: 700},
  defaultWidth: 1920,            //  <----  we need to specify the width for server side render 
})

export default useResponsive

// app.jsx
import useResponsive from './utils.jsx'
() => {
  const { xs, isMobile } = useResponsive()
}

3. With class name:

() => {
  const { lg } = useResponsive()

  return <span className={`${lg ? 'lg' : ''}`} />
}

Programme:

1. Listen to resize event, trigger hander after hit condition.
2. query matchMedia api.

Feature request 🚀

Make a navbar like Zeit's

About styles 🛠️

Feature request 🚀

We need to optimize the style of password input, or provide a component.

About styles 🛠️

Hi, first of all thanks for all the work done will keep in mind this for future projects =)

Just wanted to share that on Firefox 72 in Ubuntu the vertical alignment in the main item of the dropdown doesn't work as expected the text is align too close to the top.

A change that may fix this is adding in components/button-dropdown/item.tsx on the style jsx of the button.

align-items: center;

I have only tested it on Firefox/Chrome if the change is made please confirm with other browsers.

(this is not a real feature request, so I deleted the template)

This is a gorgeous UI Kit and I had used it in our project. So is there any way to be a project sponsor?
Taking my meager power to make the project more briskly.

Feature request 🚀

I'll rewrite the layout component everytime I create a project (especially in the next.js project),
can we provider Page component to improve the experience?
The component Page has some useful parameters to reduce repetitive code:

<Page size="large">{content}</Page>  // width: 1000pt
<Page size="small">{content}</Page>  // width: 700pt

<Page meta={meta}>{content}</Page> 
<Page footer={Footer}>{content}</Page>

...others

Expected

• set width / height / other styles
• set the meta in head automatically
• adjust width at breakpoint
• render after effect triggered
• render after effect triggered, but keep the html string and hide it for SEO

Others

This component doesn't seem to be universal, but I really want use it 😄. maybe we need to create
a new repo to manage these components? (Page / Sidebar / Sharer ...)

I'd like to hear from your views 👀

Feature request 🚀

Vercel have a hover state and a variant

1. thicker white border and slightly elevated on hover.
2. a centered play over ,

any of these features would be greatly appreciated.

Expected:

• No breaking changes

Examples:

Programme:

Others:

Bug report 🐞

When I try and embed a component in the content attribute, like this:

<Description title={field[0]} content={<Text p>{field[1]}</Text>} />

It gives me this error:

Type 'Element' is not assignable to type 'string'.

Version & Environment

"@zeit-ui/react": "^0.0.1-beta.22",
...
"react": "^16.13.1",
"react-dom": "^16.13.1",

Since ZEIT recently changed their name to Vercel (https://vercel.com/blog/zeit-is-now-vercel) would it maybe make some sense to change things around here (not only react, but vue and others as well)?

Or just not worth it and you'll keep everything the same? Just wanna be sure since you could change the package name as well (probably wouldn't happen) but yeah...

refer to design

Feature request 🚀

We simulated the option element in @zeit-ui/react, because the browser's option is the system interface called, and the style can't be modified. But simulation elements don't wokr best on mobile devices:

• Native in browser:

• @zeit-ui/react in browser:

• Native on mobile devices:

Better user experience with native option on mobile devices.

Expected:

• Simulate option in browser, and use native option on mobile devices.
• Users don't have to do anything.

Others:

Cannot render if the Option contains components:

<Select.Option value="1"><Code>TypeScript</Code></Select.Option>

Feature request 🚀

Now that we have a standard icon library, it's time to solve this problem.

Expected:

• The size of the icon inside the Button is automatically set
• Icon color follow Button
• Button in auto mode needs to be filled with width

If you added it as a peerDependency, and then told Rollup to mark it as external (and thus not need to bundle it), you'd decrease your bundle size quite a lot.