Subject

Tooltip

Description

The link for "Placement" in the left menu is broken: https://chakra-ui.com/docs/overlay/tooltip#placement

Subject

Get the docs changelog to be in sync with main repo

Description

• Move the Changelog into the pages directory
• Update the CI on the main repo to open a PR to this repo each time the .changeset folder gets updated.
  Here's the process I have in mind, merge the "Version Packages" PR in the main repo >>> merge the "Update Changelog" PR in this repo
• Move the discord script from the main repo here as well. When we merge the "Update changelog" PR, we'll create a CI action to post an update to our Twitter and Discord channel

Description

Remove the flag from the Language Switcher component and replace it with a generic language icon.

Reasons:
https://www.thirdandgrove.com/insights/should-you-use-flags-for-your-country-language-selector-menu/
http://www.flagsarenotlanguages.com/blog/best-practice-for-presenting-languages/

Subject

Icon documentation

Description

The doc page for Icon contains the View theme source button, but there is no theme source for Icon. Clicking on the button produces a 404 page. The button should be removed.

Subject

All Components

Description

Whenever you want to style a component, you most likely end up going to the View theme source button of each component. This often then leads you to the @chakra-ui/anatomy folder, to investigate all parts. The View theme source has been a welcome addition a while back, but I don't think it's the most user friendly, especially for new comers.

I am wondering if we could create a more user friendly documentation around the theme file.

Taking Input component as an example, we could add another section at the end of the documentation (https://chakra-ui.com/docs/form/input)

Theme

List of parts: field, addon
<insert some graphic pointing out which part is which?>

I am not sure how far one has to go, but potentially more information about inheritance as well? E.g. textarea takes from input by default, or the relationship between button and Icon button.

Would love to gage the interest in this, and more than willing to take a crack at it.

Description

When the isInvalid prop is applied to the Switch component. I would expect some visual representation of this.

Link to Reproduction

https://codesandbox.io/s/chakra-switch-isinvalid-efj7b?file=/src/index.tsx

Steps to reproduce

1. Go to index.tsx
2. See that the component with isInvalid has no styling applied

Chakra UI Version

1.6.12

Browser

Google Chrome 95

Operating System

• macOS
• Windows
• Linux

Additional Information

The docs state that it updates the state of the unchecked state. Not sure if the component or the documentation needs to change.

Description

When I try to click on the FormLabel in the docs, the controls such as Input won't get focused for all examples except "Usage with Form Libraries".

Subject

Homepage

Description

The discord members and monthly downloads on the homepage are still hardcoded and need to be updated manually. Would be nice if that could be automated.

Subject

scripts/get-search-meta.ts

Description

This script is the one responsible for updating the search with up-to-date content.

Bug report

Describe the bug

Sidebar scrolls to some other position after clicking on different list group item. But it does not scroll if same group item is selected.

To reproduce

1. Scroll sidebar down to very bottom.
2. Click on 'useBreakpointValue'.
3. Click on 'Avatar'.
4. Sidebar will scroll to some another position.

Expected behavior

Selected sidebar list item should not scroll to some other position. Item should stay below mouse cursor.

Screenshots

System information

• OS: macOS
• Browser (if applies): Safari 13.1.1

We have a number of community-created extensions and packages that I think we should reference in the docs. An example of this is @jeanverster's chakra-ui-steps package.

Create a Showcase page that'll display community projects that are built with Chakra UI. Use the #🌟-showcase channel on Discord and the Awesome Chakra UI repo to gather the initial data. Categorize the data entries similarly to the Awesome Chakra UI repo.

You can use the https://nextjs.org/showcase for inspiration.

We should write a guide for integrating Chakra UI with Capsize. There's already an NPM package by @jesstelford that does the integration: ceteio/chakra-capsize.

P.S. It has been requested previously: chakra-ui/chakra-ui#1199

Subject

Request to add Japanese Documentation

Description

First of all, thank you chakra-ui community for this awesome library!

I've just started usnig chakra and I think its wonderful!
But, It's hard for some Japanese developers to read English documentation.
Therefore, I would like to add Japanese documentation.

I can help with the Japanese translation if need be.

Thank you.

Description

When Using the BreadCrumb component I get warnings in my console about the isLastChild prop

Link to Reproduction

https://codesandbox.io/s/chakra-ui-breadcrumbseperator-bug-zrw8w

Steps to reproduce

1. Go to sandbox
2. Open Console
3. See Error

Chakra UI Version

1.7.3

Browser

Google Chrome 95

Operating System

• macOS
• Windows
• Linux

Additional Information

It seems like only BreadCrumbItems are allowed in the BreadCrumb element. I added a Breadcrumb seperator to match the design I got. I also wondered why the BreadCrumbSeperator is exported if these kind of things don't work.

(Same issue as: chakra-ui/chakra-ui#3543, but with reproduction)

Subject

Color Mode

Description

In chakra-ui source code has the ColorModeScript of Next.js in TypeScript version.

The docs don't have, which cause confusion because theme.ts already had .js and .ts version + People are using TypeScript more and more nowadays.

export default class Document extends NextDocument {
  static getInitialProps(ctx: DocumentContext) {
    return NextDocument.getInitialProps(ctx)
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Description

When I switch to mobile I expect to have a Ressource link in the docs navigation but there is none.

Steps to reproduce:

1. Use Docs webpage on mobile.
2. Open Navigation Menu

Description

Currently the get-showcase-data.ts script runs for more than 6 hours, so GitHub automatically stops it and the action is marked as failed. Let's refactor the script, so it only generates images for the new links that appeared in the Awesome repo, and remove the ones we have locally in showcase.json but don't exist in the Awesome repo.

Idea:

• Scrape the awesome-chakra-ui repo and get the links
• Read the local showcase.json
• Find the new links (exists in awesome-chakra-ui repo but don't in showcase.json)
• Remove the deleted ones (exists in showcase.json but don't in awesome-chakra-ui repo)
• Generate images only for the new ones
• Save everything in showcase.json

Subject

FormErrorMessage, FormHelperText

Description

Each of these is shown on the FormControl docs page and included in a few usage examples, but there isn't any documentation specific to them that explains their purpose and how to use them.

Subject

HomePage

Description

some languages the "with speed" part might not be at the end of the sentence.
The following is a translation into Japanese.

This needs to be dealt with using an i18n format.
(I took care of it with this commit, but it was changed before I knew it.)
8aa447b

Description

I decided to run a lighthouse test on the Chakra UI website yesterday and I was surprised to see the scores come in quite low (in fact the performance is in the red territory)

Screenshot -

Observation 1: Use of Chakra Img (docs say that it should be used with SSR pages) and chakra.img
Fix: Replace with Next Image ( #137 )

Observation 2: Bad contrast ratio on light mode


Fix: I don't know. Chakra UI team needs to change colors to improve the contrast ratio.

Observation 3: Well, something lighthouse is complaining about, I don't understand it. I hope someone can explain this to me and there is a fix for this

Observation 4: SEO issues -

Awaiting response from the team on this

I have created a pr ( #137 ) for the first observation. I am not sure about the best way to approach the other ones and hence I would like to have advice from the team.

Description

On the Checkbox documentation page, one example is not responsive and breaks the mobile layout of the docs. See following picture.

Subject

VisualHidden

Description

VisualHiddenInput element documentation is missing in the chakra-ui-docs/pages/docs/disclosure/visually-hidden.mdx even though the visually-hidden package exports two components VisualHidden and VisualHiddenInput. Moreover, the story of this component can be viewed here

Subject

Popover

Description

chakra-ui/chakra-ui#5044

Description

Create a FAQ page where we can answer the most commonly asked questions on Discord, Twitter or GitHub.

Problem Statement/Justification

There are new developers getting started with Chakra UI every day. Most of them ask the same questions on Discord/Twitter/GitHub, and wait for someone to answer them. Having a FAQ page will help the newcomers progress easier and faster.

Proposed Solution or API

Similarly to how the Resources page works, we can create pages/faq.tsx which will read the Q&As from configs/faq.json.

See pages/resources.tsx to see how it's implemented.

Subject

FAQ browser support

Description

As proposed by @segunadebayo we should have something about browser support in the faqs.

Subject

Homepage

Description

On homepage load, there’s a slight delay that shows homepage.title before the actual title shows up. Here's a video describing this behaviour: https://www.loom.com/share/bcd4dd22206b4bc0b1146046a3ab488b

Update the resources page with new apps/websites that have been posted in the #🌟-showcase channel on Discord.

Context:

• The resources page is pages/resources.tsx
• The data lives in configs/resources.json
• There are 3 types: talks, videos, and blogs. These are not set in stone. We can also enlist examples as well.

Bonus: add a link to the Design vs Dev repo in the examples category.

Description

When I went directly to any component documentation page, the first code block ie import section got obscured as shown in screenshot but it dissapeared after navigation to and fro within the site

Link to Reproduction

https://chakra-ui.com/docs/disclosure/tabs

Steps to reproduce

1. Go to https://chakra-ui.com/docs/disclosure/tabs
2. Scroll down to import section
3. See error
4. Navigate to any other tab and when back it appears correctly
5. Repeat

Chakra UI Version

1.6.12

Browser

Google Chrome 95.0.4638.69 (Official Build) (64-bit)

Operating System

• macOS
• Windows
• Linux

Additional Information

Description

When i visit https://chakra-ui.com/docs/navigation/link, documentation about Link should show but right now, it is the documentation for LinkOverlay that's being shown.

The Showcase page should only display Websites. Move everything except Websites into the Resources page.

Plan:

• Move everything from Resources into Awesome Chakra UI
• Fetch the Awesome Chakra UI repo and split the data
• Websites go to the showcase.json file
• Everything else goes to resources.json with the proper tags

In the Checkbox documentation there is a section about hooks. This one only mentions useCheckbox and useCheckboxGroup but does not give any information on how they should be used or an example.

Here is a link to the section: https://chakra-ui.com/docs/form/checkbox#hooks

They should include the return values, parameters, and at least one usage case as an example.

Moderator note: we should create a new page for the checkbox hooks in the "Hooks" section, but reference it in the Checkbox component page.

Description

Add a proper prettier config / setup to the docs project to ensure code styles are enforced.

Problem Statement/Justification

As of now there is not prettier config and not prettier linting in the project. Thus code styles are not enforced.

Proposed Solution or API

We can take the same prettier config as the main project.

Alternatives

No response

Additional Information

No response

Hello,

The SliderMark tag is not mentioned in the online documentation. Here is an example.

That said, I find it's easier to set a tooltip to the SliderThumb.

  const [sliderValue, setSliderValue] = React.useState(5);
  <Slider id="slider" defaultValue={5} min={0} max={10} colorScheme="blue" onChange=(v) => {setSliderValue(v)}>
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <Tooltip hasArrow bg="red.600" placement="top" closeOnClick={false} isOpen label={sliderValue}>
      <SliderThumb />
    </Tooltip>
  </Slider>

Subject

Icon role prop no longer defaults to presentation

Description

seems like this prop stopped receiving presentation as a default, as per chakra-ui/chakra-ui#1349 and chakra-ui/chakra-ui#1197

however the documentation still lists presentation as the default: https://chakra-ui.com/docs/media-and-icons/icon#props

Subject

Toast

Description

chakra-ui/chakra-ui#4922

🐛 Bug report

The docs for creating custom Tab components have type errors. Specifically, themeKey is not a key in StyledOptions.

Argument of type '{ themeKey: string; }' is not assignable to parameter of type 'StyledOptions'.
  Object literal may only specify known properties, and 'themeKey' does not exist in type 'StyledOptions'.

💥 Steps to reproduce

Copy the custom Tabs example into a TS project and observe TS error.

💻 Link to reproduction

https://codesandbox.io/s/custom-tabs-bug-erqe1?file=/src/CustomTabs.tsx

🧐 Expected behavior

No type errors.

🧭 Possible Solution

• Fix type definition of StyledOptions.
• Update docs example if required.

Subject

Remove MenuIcon, MenuCommand from import

Description

Currently, MenuIcon and MenuCommand are being shown in docs page without description or examples, which can cause confusion about how to use them.

Moreover, I inspect chakra-ui source code and saw them only used as composition component to implement icon and command props of MenuItem, MenuItemOption component.

MenuItem component

Subject

Getting Started

Description

Now that Remix is open sourced I think it would make sense to create a section to get started started with Remix and Chakra UI.

Prepare the static docsite strings for translation:

• Replace hardcoded strings with the t('***') method in all *.txs files
  Check out pages/team.tsx line 115 to see the translation method in use
• Add those strings in i18n/ui.json

Subject

Homepage

Description

The latest and previous Chakra version isn’t showing up on dropdown (top right screen).

Subject

Resources

Description

Refactor the Resources page.

• Isolate the Talks, Videos and Blogs into their own tabs.
• Add a search filtering functionality inside the tabs.
• ⭐️ Bonus challenge: Utilize a masonry grid to display the resources.

Add a SliderMark documentation, like chakra-ui/chakra-ui#4771

• Add script to update .all-membersrc
• Add script to update .all-sponsorsrc
• Update .all-contributorsrc to include only those who contributed to docs
• Add .github actions and workflows related to docs
• Add Vercel Github app

Subject

COTW

Description

Include component of the week on component pages.

Description

The table box is not responsive on the main page. It's a minor bug and I can fix this.

Link to Reproduction

https://chakra-ui.com/docs/data-display/table

Steps to reproduce

1. Go to the link and see the page in 320px i.e mobile view

Screenshot:

Chakra UI Version

1.14.1

Operating System

macOS

Description

Hey!

I just took a look at the docs for the Tab List and noticed that source maps were off by default which made it hard to see how the demos were running in the page.

Here's a quick replay of what it looks like now. It's still possible to see what's going on, but it'd be much nicer if we had the original code to look at as well.

Happy to help if this is interesting!

Subject

Homepage

Description

On the homepage, the “with speed” headline is currently in black but should be in teal colour.

Subject

Navigation

Description

There should be a correct Navigation from Radio > Range Slider and not Radio > Select, Slider > Switch and not Slider > Range Slider

Subject

Issue Template

Description

There's a lot of form elements people need to fill when creating a bug report.

• So, we need to simplify that Github issue template and reduce the number of fields.
• Remove feature request template. It feels a bit redundant since we're not managing code.