chakra-ui / chakra-ui Goto Github PK
View Code? Open in Web Editor NEW⚡️ Simple, Modular & Accessible UI Components for your React Applications
Home Page: https://chakra-ui.com
License: MIT License
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Home Page: https://chakra-ui.com
License: MIT License
In certain cases, <Spinner />
and <Button />
or <IconButton />
with isLoading
are not visible.
Here is the sandbox.
The issue is the missing borderStyle
prop in <Spinner />
which should be solid
by default. You can see the difference in the sandbox. For <Spinner />
it's possible to pass the prop explicitly but not in case of <Button />
and <IconButton />
.
PR on the way :)
On chakra-ui.com, the logo link in the header and the social media links in the footer don't have a prominent style when focused (e.g. an outline).
WICG has started a project called Open UI, which aims to standardize UI components for the web. I think that Chakra UI fits the purpose well and should consider contributing design system details towards the initiative.
Checkboxes and radio buttons have a lot of states heavily depending on CSS pseudo selectors. As suggested in #46, using PseudoBox
to style form controls would open up new possibilities like using different icon colors for active and inactive states of a checkbox.
Also, the button-like behavior described by #45 could be achieved by code similar to below:
const choice = 'Answer to a quiz question';
<Radio
key={choice}
value={choice}
isDisabled={selectedChoice != null}
isFullWidth
px={3}
py={2}
bg={color}
borderWidth={1}
_hover={{
// This is the important part
// ...
}}
>
{choice}
</Radio>
I'm getting this error after adding it to my next.js
project. I have a component in typescript Layout.tsx
in which I import as follows:
import { ThemeProvider, Flex, Box } from "@chakra-ui/core";
resulting in the following error
Error: Cannot find module '@chakra-ui/core'
I also installed running the following command:
yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
Currently, labels of Checkbox
and Radio
components cannot be colored. I tried applying a color
prop on the parent element, but it had no effect:
const choice = 'Answer to a quiz question';
<Box color="red">
<Radio key={choice} value={choice} color="green">
{choice}
</Radio>
</Box>
The text remained black, as inherited from the root html
element's styles (caused by <CSSReset />
).
I would like to propose that the color
attribute should not have special behavior on form components, see Bootstrap Forms. As for styling checkboxes or radio buttons, I think there should be a separate iconColor
prop for altering their appearance, which could be used in combination with PseudoBox
props to style states other than checked.
When using the code below:
export default function Component() {
const [selectedChoice, setSelectedChoice] = useState<string>();
return (
<RadioButtonGroup
value={selectedChoice}
onChange={value => setSelectedChoice(value)}
>
{/* ... */}
</RadioButtonGroup>
);
}
I get the following TypeScript error in strict mode:
Parameter 'value' implicitly has an 'any' type. - ts(7006)
I have been enjoying use this library so far but I am unfamiliar with how to use toast. I want to be able to create a toast that has a different color and description based on the result of a function, but everytime I try I get a notification telling me I'm breaking the rules of hooks. How should I set this up? I'm sorry for the second noob question today.
Hey so I followed the getting started guide but when I try to use some components they just don't work. This might just be me being newish to reactjs, but for example when I create a Button it is really thin and the text flows out. When I try to do an input I get an error saying "blue is not defined" or something like that. I can provide more info if needed but does anyone know what I might be doing wrong?
Hi, I notice that Chakra is not setting border
property for buttons. Therefore, it inherits the default browser styling, which makes it quite inconsistent (Moz vs Chrome). Is there anything we can do about this?
Thank you.
Hey there 👋, great work here!
Are you planning to add a test strategy to Chakra?
I'd be glad to open a PR to add React Testing Library to cover some components.
Hey there
Amazing library, seriously nice 👏
Wondering if there are plans to write type definitions for it?
Thanks
Hitting native browser back does not close the drawer.
I think it would be beneficial pull component variant css values from the theme.
For example, on Button, maybe I'd like to adjust the padding values of the different size variants. This could by just using aliases where possible instead of array values directly. As it is now, you'd have to adjust the value of a certain array scale, where as using a 'lg' alias that pointed to the key would allow for more customization. Another place I am currently doing this is with border radius. I have set the 'rounded' default prop to 'default', and added said key into the theme specification.
Alternatively, you could use styled-system variants to allow optional configuration. Thoughts?
I created a sandbox with the defect https://codesandbox.io/s/chakra-ui-sandbox-9e5v4
Note that the menu popper gets cut off when component is far right.
Loving the library! 😃
When I rapidly click the up/down controls of the NumberInput samples at https://chakra-ui.com/numberinput in macOS Safari, I get wide selections, i.e. light blue areas across the window. This fast clicking seems to be handled as double-clicks. I'm using macOS 10.14.6 and Safari 12.1.2.
I did not see the same effect in Chrome or Firefox.
There's a lot of reasons why we shouldn't use placeholder text in form fields:
https://www.smashingmagazine.com/2018/06/placeholder-attribute/
When creating a button wider than its contents (e.g. with its uncodumented isFullWidth
prop or width="100%"
), the textAlign="left"
does nothing. I tried playing around with left and right paddings, but with no luck.
<Button isFullWidth textAlign="left">
I'm a full width button with text aligned to the left
</Button>
When a group of buttons contain check boxes or radios, one may want to align them together.
Hi, thanks for a great project. I couldn't see a mention of the browser versions you're targetting. Obviously you need flexbox support but specifically I'm interested in whether you are looking to support IE11.
@segunadebayo @tioluwani94 Really great work on everything so far!
I notice in the roadmap that you are planning to build a custom select component in Chakra and I wanted to start a discussion about how that would look.
In my experience for real-world projects, select boxes often need features that are not provided by the native HTML select such as search, multi-select, and dynamic option loading. I frequently turn to the react-select
package because I feel it has the best API and available features. How do you see Chakra handling this problem, if at all? I see a few options:
react-select
I am in favor of options 1 and/or 3 and would like to hear the community's opinions about the pros/cons of each.
Side note: This issue is also going to apply to other "complex" components such as date pickers
Running yarn run docs:dev
correctly set up my localhost but seems like it's not hot reloaded? (According to the CONTRIBUTING guide it should.)
"docs:dev": "lerna run --scope=@chakra-ui/docs dev --stream",
It might be because of this and I feels like I've missed something that isn't mentioned in the docs.
Any pointer would be appreciated! :)
Progress
and CircularProgesss
components are ideal for denoting the passage of time. However, they do not support time-based value animations yet. While it is possible to combine a state variable (useState
) with a timer (setTimeout
or requestAnimationFrame
), JavaScript animations are not as smooth as the ones made with CSS, as the latter can be GPU-accelerated.
I propose adding an AnimatedValueProvider
based on the React Context API, with syntax similar to below, inspired by the animation
CSS property:
<AnimatedValueProvider duration="30s">
<CircularProgress />
</AnimatedValueProvider>
Only the duration
prop should be mandatory, and the following could also be configured:
timingFunction
(override browser default value to be linear
, as it fits the use-case better)delay
iterationCount
direction
The implementation could reuse the logic behind an indeterminate CircularProgress
component, depending on the useContext
hook to retrieve parameters from AnimatedValueProvider
:
duration
is nullish, then leave the behavior of child components intact.value
explicitly given to a child.min
and max
values given to a progress component should be respected by AnimatedValueProvider
readings.I followed the docs, and trying Accordion example. But i got the error
node_modules/@chakra-ui/core/dist"' has no exported member 'AccordionIcon
The code is
import {
Box,
Accordion,
AccordionItem,
AccordionHeader,
AccordionPanel,
AccordionIcon
} from "@chakra-ui/core";
Am i missing anything here ?
Thanks you for great library.
Hi there! Really impressive work! 🙌
One thing I noticed when navigating the chakra-ui.com website using my keyboard is that once the code editor ("editable example") gets focus, it seems impossible to get out with the cursor. This is because the editor recognises the "tab" key as a way to change the indentation. It would be nice to escape this keyboard trap somehow.
A suggestion would be to allow the "escape" key to move the focus out of the "edit" mode (suggested by slugolicious here). The spec might be helpful: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html
Hi, amazing work you've done here! Thanks for sharing it with the community and thank you for building it with accessibility in mind! ❤️
While I was testing components, I noticed that Popover
isn't accessible by default, specially because the content inside the popover isn't perceived by screen reader users when it opens. Even sighted users using only keyboard would have difficulty using it.
I think the issue is basically it not receiving focus when it opens.
Here's an accessible Popover
I've built that you can use as a reference: https://reakit.io/docs/popover/
I tried using number | undefined
type values with RadioGroup
:
const [selectedChoiceID, setSelectedChoiceID] = useState<number>();
return (
<RadioGroup
value={selectedChoiceID}
onChange={event => {
// Input values are stored as strings under the hood
// Thus, a conversion back to number is necessary
const choiceID = Number(event.target.value);
setSelectedChoiceID(choiceID);
}}
spacing={0}
>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
</RadioGroup>
);
Unfortunately, as value
attributes are stored as strings under the hood, the code above does not work: None of the radio buttons can be checked. However, if I explicitly convert selectedChoiceID
to string
with the value={String(selectedChoiceID)}
syntax, the example above works flawlessly.
I would suggest explicitly asking for string
values in TypeScript, as input field attributes are stored as strings under the hood (see the conversion necessary in the onChange
callback).
So in the typings for the hook: useColorMode
, it returns an object with two values: of course, the mode
and the toggle
.
However, in the actual code, it is expecting colorMode
and toggleColorMode
, so in the type defs the names are off. Easy fix, but TypeScript will give an error without this change so it's currently unusable.
I would be happy to put in a PR :)
When trying to conditionally render an element inside a Stack
, I came across an exception:
<Stack>
<Heading>Quiz question</Heading>
{timeLimit && (
<CircularProgress value={timeRemaining} max={timeLimit}>
<CircularProgressLabel>{timeRemaining}</CircularProgressLabel>
</CircularProgress>
)}
</Stack>
If no timeLimit
is given, then nothing should be rendered as the second child of the Stack
, but the following error gets thrown instead:
Uncaught TypeError: Cannot read property 'type' of null
at React$$1.cloneElement (react-hot-loader.development.js:2847)
at index.js:38
at mapSingleChildIntoContext (react.development.js:1232)
at traverseAllChildrenImpl (react.development.js:1099)
at traverseAllChildrenImpl (react.development.js:1115)
at traverseAllChildren (react.development.js:1176)
at mapIntoWithKeyPrefixInternal (react.development.js:1254)
at Object.mapChildren [as map] (react.development.js:1276)
at Stack (index.js:24)
A temporary workaround is using timeLimit ? ... : <div />
, but it results in a useless empty element.
Hello,
I tried using the CircularProgress component but got an error when importing from @chakra-ui/core. It only worked now with import like this:
import CircularProgress, {
CircularProgressLabel
} from "@chakra-ui/core/dist/CircularProgress";
PS: Thanks for perfect ui lib ;)
While checkboxes and radio buttons may be disabled, they cannot be made read-only through Chakra UI. According to the HTML specification, every input type has a readonly
attribute.
I would like to propose adding an isReadOnly
prop to checkable input fields, as it is suitable for making forms which cannot be modified after submission.
Would be nice to have a drawer that is always on screen, without overlay on the rest of the window. Something like https://material-ui.com/components/drawers/#permanent-drawer
Common use case - application wide menu.
Thanks for amazing library!
By specifying the font-variant-numeric: tabular-nums
CSS rule, janky changes can be evaded.
Change '41%' to '42%' in the code below:
<CircularProgress value={41} color="green">
<CircularProgressLabel fontFamily="Comic Sans MS">41%</CircularProgressLabel>
</CircularProgress>
When testing the drawer example, after copy and paste from the docs in a new create-react-app app
https://codesandbox.io/s/morning-fire-yjoi9
I see this kind of unrelated warnings.
import "@reach/dialog/styles.css";
Otherwise you'll need to include them some other way:
<link rel="stylesheet" type="text/css" href="node_modules/@reach/dialog/styles.css" />
For more information visit https://ui.reach.tech/styling.
in Component (created by Anonymous)
in Anonymous (created by Context.Consumer)
in Context.Consumer (created by Context.Consumer)
in Context.Consumer (created by Styled(Component))
in Styled(Component) (created by Anonymous)
in Anonymous (created by Spring)
in Spring (created by KeyframesImpl)
in KeyframesImpl (created by Anonymous)
in Anonymous (created by Transition)
in Transition (created by DrawerTransition)
in DrawerTransition (created by Drawer)
in Drawer (at App.js:36)
in DrawerExample (at App.js:109)
in App (at src/index.js:7)
r @ backend.js:1
checkStyles @ index.js:12
checkDialogStyles @ index.js:72
componentDidMount @ index.js:93
commitLifeCycles @ react-dom.development.js:21142
commitLayoutEffects @ react-dom.development.js:24138
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
commitRootImpl @ react-dom.development.js:23903
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
commitRoot @ react-dom.development.js:23723
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `zIndex` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `zindex` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Component)
in div (created by RemoveScroll)
in RemoveScroll (created by Component)
in div (created by FocusLock)
in FocusLock (created by Component)
in Component (created by ForwardRef)
in Component (created by Portal)
in Portal (created by ForwardRef)
in Component (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in Styled(Component) (created by ForwardRef)
in ForwardRef (created by Spring)
in Spring (created by KeyframesImpl)
in KeyframesImpl (created by ForwardRef)
in ForwardRef (created by Transition)
in Transition (created by DrawerTransition)
in DrawerTransition (created by Drawer)
in Drawer (at App.js:36)
in DrawerExample (at App.js:109)
in header (at App.js:104)
in div (at App.js:103)
in ThemeProvider (created by ThemeProvider)
in ThemeProvider (at App.js:102)
in App (at src/index.js:7)
console.<computed> @ index.js:1375
r @ backend.js:1
warningWithoutStack @ react-dom.development.js:563
warning @ react-dom.development.js:2965
validateProperty$1 @ react-dom.development.js:8849
warnUnknownProperties @ react-dom.development.js:8892
validateProperties$2 @ react-dom.development.js:8915
validatePropertiesInDevelopment @ react-dom.development.js:8960
setInitialProperties @ react-dom.development.js:9236
finalizeInitialChildren @ react-dom.development.js:10437
completeWork @ react-dom.development.js:20078
completeUnitOfWork @ react-dom.development.js:23540
performUnitOfWork @ react-dom.development.js:23513
workLoopSync @ react-dom.development.js:23480
renderRoot @ react-dom.development.js:23155
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `overflowY` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `overflowy` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Component)
in div (created by RemoveScroll)
in RemoveScroll (created by Component)
in div (created by FocusLock)
in FocusLock (created by Component)
in Component (created by ForwardRef)
in Component (created by Portal)
in Portal (created by ForwardRef)
in Component (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in Styled(Component) (created by ForwardRef)
in ForwardRef (created by Spring)
in Spring (created by KeyframesImpl)
in KeyframesImpl (created by ForwardRef)
in ForwardRef (created by Transition)
in Transition (created by DrawerTransition)
in DrawerTransition (created by Drawer)
in Drawer (at App.js:36)
in DrawerExample (at App.js:109)
in header (at App.js:104)
in div (at App.js:103)
in ThemeProvider (created by ThemeProvider)
in ThemeProvider (at App.js:102)
in App (at src/index.js:7)````
As you can see, since the opacity animation is also being applied to the drawer, it ends up making the text overlap with the topnav while the drawer is being opened, I think we could make it so the overlay opacity doesn't apply to the drawer body, this way it'd always be solid, what are your thoughts on this?
On chakra-ui.com/getting-started, the Getting Started text does not have proper color contrast ratio for the font size (either the font needs to be increased to 14pt or the color changed).
The Components text also fails proper color contrast for any font size.
When I look at https://chakra-ui.com/numberinput in macOS Firefox, I see some extra, smaller, controls on top of NumberInput's own controls. I'm using macOS 10.14.6 and Firefox 69.0.
I can't change the value when using iOS
Searching for alternatives to regular checkboxes and radio buttons, I found out that composing a Button
with a Checkbox
or a Radio
might be a good idea.
At first, I wanted to use the as
prop for the job, but it turns out that Button
does not accept a value
or name
prop (although they are valid button attributes according to MDN). Also, the isDisabled
prop only has an effect on the button's style, but not the checkbox element:
const choice = 'Answer to a quiz question';
<Button
as={Radio}
key={choice}
value={choice}
borderWidth={2}
size="lg"
isDisabled={selectedChoice != null}
isFullWidth
>
{choice}
</Button>
My second try was adding Radio
as a child of Button
, but that approach is semantically incorrect and makes the button's click area greater than its radio child:
const choice = 'Answer to a quiz question';
<Button variant="outline" isFullWidth>
<Radio
key={choice}
value={choice}
borderWidth={3}
size="lg"
isFullWidth
>
{choice}
</Radio>
</Button>
I think that the first approach should be fine-tuned to work without hassle. I tried using as={props => <Radio {...props} isDisabled />}
instead of as={Radio}
, but it also resulted in buggy behavior.
styled-system
props work correctly, but the custom aliases added by chakra do not have the correct types.
Example:
<Box rounded="full" />
Results in a type error on rounded.
I've traced down what I believe to be the problem.
See chakra-ui/src/Box/index.d.ts
:
...
interface ICustomConfig {
// Custom borderRadius alias
rounded?: StyledSystem.BorderRadiusProps;
...
The types are exporting the StyledSystem.BorderRadiusProps directly, but BorderRadiusProps
is an interface with a single key borderRadius
. In order to make the types match, we need to export the type of the key:
...
interface ICustomConfig {
// Custom borderRadius alias
rounded?: StyledSystem.BorderRadiusProps["borderRadius"];
...
This results in a valid code for the example above. A similar process could be used to fix many of the other aliased props like shadow
, w
, and d
.
Currently, there is no definitive guide about specifying prop types of a RadioButtonGroup
's children. I tried my best to come up with a solution browsing through React+TypeScript Cheatsheets, but could only make up the code snippet below, which is full of boilerplate:
import { Button } from '@chakra-ui/core';
import React from 'react';
type RadioButtonProps = React.ComponentPropsWithoutRef<typeof Button> & {
isChecked?: boolean;
value?: React.InputHTMLAttributes<HTMLInputElement>['value'];
};
const RadioButton = React.forwardRef(
(
{ isChecked, isDisabled, ...restProps }: RadioButtonProps,
ref: React.Ref<HTMLButtonElement>,
) => {
return (
<Button
ref={ref}
aria-checked={isChecked}
role="radio"
isDisabled={isDisabled}
{...restProps}
/>
);
},
);
export default RadioButton;
Please consider providing better docs about types or creating an official RadioButton
component with correctly specified props, as using React.forwardRef
is not a convenient approach.
version: 0.2.6
I'm submitting an issue
Current behavior: I do have an issue using the Toastr at a specific position. for example, setting the Toastr position for bottom-left
works fine. other values break like top-end
.
Nice job and I'm ready to adopt this in my future project.
I tried to make a navigation bar but it was not easy at all. if you can make a component for that. or do a little tutorial on how we can do this.
Any reason there's no Text
component in the sidebar? I see that https://chakra-ui.com/text is a valid page, so not sure why it's missing.
When using chakra-ui and styled-components the theme prop is not passed into the styled-component
Reproduction CodeSandbox below
https://codesandbox.io/s/modest-bogdan-fnc0q
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.