themesberg / flowbite-react Goto Github PK

Describe the bug
The final item in a Breadcrumb is given text-gray-400, which is not accessible on the standard white background. The same goes for the dark mode, which uses text-gray-500.

To Reproduce
Steps to reproduce the behavior:

1. Create a Breadcrumb
2. Observe the contrast ratio of the final item

Expected behavior
This item should pass WCAG 2.1 AA, which designates a contrast ratio of 4.5:1 for normal text.

Screenshots
n/a

Additional context
n/a

Reference: https://flowbite.com/docs/components/tabs/

Reference: https://flowbite.com/docs/components/pagination/

Reference: https://flowbite.com/docs/components/footer/

Reference: https://flowbite.com/docs/components/carousel/

Describe the bug
Spinners are an <svg> with role="status", but they do not have an accessible label.

To Reproduce
Steps to reproduce the behavior:

1. Create a <Spinner />
2. Observe that screen reader skips over it, or notifies of a status, but with no explanation as to what it is

Expected behavior
Examples should contain an accessible name.

@rluders @bacali95 Users might want to provide a separate element rather than label the Spinner directly, which means there ideally would be flexibility between assigning aria-label and aria-labelledby. So I'm hesitant to say add a prop here, and instead I think it would be best to accept all HTML attributes and add accessible names to the examples. Thoughts?

Screenshots
n/a

Additional context
I've tried this on Apple VoiceOver so far.

Is your feature request related to a problem? Please describe.
The Dark Theme Togglepage missing in the documentation

Describe the solution you'd like
Implement the Dark Theme Toggle page

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Reference: https://flowbite.com/docs/components/toast/

Reference: https://flowbite.com/docs/components/tables/

Describe the bug
Hi, I'm trying to use flowbite-react's modal component (I know it is still WIP) and found something odd.
I expected modal will be on top of all html layout, but as you can see in attached img, modal confined in area (the blue area in img) that where modal used. The blue area's css position was fixed

Is it intended? or will be fixed in official release version?

To Reproduce
Steps to reproduce the behavior:

1. put flowbite-react modal in fixed div like below screenshot. I just copy Default modal example code from your docs

2. open modal

Expected behavior
A clear and concise description of what you expected to happen.

What I expected was full cover modal like below screenshot

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] mac os monterey 12.3.1
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 100.0.4896.127

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
Im attempting to use the sidebar component, but useLocation is called internally to the component from react router. Additionally the react router Link component is used in each sidebar item.

Describe the solution you'd like
Ability to pass the current path directly to the component, potentially via the SidebarComponent context as one possible solution.

Describe alternatives you've considered
Use react router within my nextjs app, I would rather not use client side routing.

Additional context
Happy to contribute if an agreed direction by the maintainers is proposed.
Ideally react-router should be opt in rather than having to opt out in my eyes.

Reference: https://flowbite.com/docs/components/timeline/

Describe the bug
I found 2 bugs that happen to me.

1. Carousel does not show if I only have images less than 4 (3, 2, or 1)
2. when the Carousel show (with the minimum image is 4) I realize that the order of the images doesn't match with the image order from my code.

To Reproduce
first bug:

1. using flowbite-react on NextJS
2. try to create a carousel component with 2 images. is the carousel appear properly? in my case, it doesn't show the slide, only the next and prev control button.
   second bug:
3. I use example code on documentation.

<Carousel slideInterval={5000}>
  <img
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
    alt="..."
  />
  <img
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
    alt="..."
  />
  <img
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
    alt="..."
  />
  <img
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
    alt="..."
  />
  <img
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
    alt="..."
  />
</Carousel>

2. in my case, carousel-5.svg becomes first slide, 4th and 5th slide.

Expected behavior
the image appears as slide and order position same as the code

Screenshots
I add some note on the pictures, hopefully it will help

Desktop

• OS: Windows
• Browser Firefox v99 and Chrome v100
• Flowbite-react version 0.0.18

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
I can't really migrate to flowbite-react without the ability to use custom colors I defined in tailwind.config.js. At the very least, I need an escape hatch in each component (className).

Describe the solution you'd like
I would like to be able to define a color, primary in tailwind.config.js, then use that color in flowbite-react components like so:

<Button color="primary">Hi</Button>

Describe alternatives you've considered
As long as each component provides the ability to directly specify a className, I can do this myself.

Additional context
n/a

Is your feature request related to a problem? Please describe.
I add w-full class on Button component to use it by full width, but internal class w-fit ignore it.

 <Button type='button' className='w-full bg-primary-500' onClick={handleOpenAddView}>
   글 작성하기
 </Button>

Describe the solution you'd like
maybe 2 option (just suggestion). Also, I think other components will need this option too.

1. add width prop on Button component. then user can customize button component's width

// for full width button
 <Button width='full'>
   sdfsdf
 </Button>

// for CTA button 🟩🟩🟩  🟦
<Button width='0.75'>
  🟩🟩🟩  
</Button>
<Button width='0.25'> 
  🟦
<Button>

2. add custom style prop to customize free without priority issue

 <Button custom='w-full'>
   custom prop should have high priority then internal class
 </Button>

Additional context
discord thread

Reference: https://flowbite.com/docs/components/rating/

Is your feature request related to a problem? Please describe.
Some users probably would like to use the react-flowbite with React Native. We need to check if there is any "catch" in the instalation and to provide some guide, if necessary.

Describe the solution you'd like
Document the process to use react-flowbite with React Native.

Describe alternatives you've considered
Maybe it isn't supported. In this case, what do we need to do to fix it?

Additional context
n/a

Describe the bug
The tooltip element is misaligned from the parent element

To Reproduce
Steps to reproduce the behaviour:

1. Go to 'storybook'
2. Click on Tooltip
3. See the error

Expected behaviour
The tooltip is aligned to parent element

Screenshots

I believe this is impact other components like the dropdown.

Desktop (please complete the following information):

• Browser: Chrome and Brave (Firefox is working)

Smartphone (please complete the following information):
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
When I create a Sidebar with items that do not have an icon, and then collapse the Sidebar, nothing shows up.

To Reproduce
Steps to reproduce the behavior:

1. Create a collapsed Sidebar:

<Sidebar collapsed>
  <Sidebar.Items>
    <Sidebar.ItemGroup>
      <Sidebar.Item href="#">Dashboard</Sidebar.Item>
      <Sidebar.Item href="#" label="Pro" labelColor="gray">
        Kanban
      </Sidebar.Item>
      <Sidebar.Item href="#" label="3">
        Inbox
      </Sidebar.Item>
      <Sidebar.Item href="#">Users</Sidebar.Item>
      <Sidebar.Item href="#">Products</Sidebar.Item>
      <Sidebar.Item href="#">Sign In</Sidebar.Item>
      <Sidebar.Item href="#">Sign Up</Sidebar.Item>
    </Sidebar.ItemGroup>
  </Sidebar.Items>
</Sidebar>

Expected behavior
I can't find the expected behavior on flowbite.com, so I guess there isn't one yet?

A few options...

• Abbreviate label to the first letter
• Add a default icon
• When collapsed, hide the Sidebar completely
  • Could add a prop to to change this behavior, like collapseBehavior="hide|icons"
    • I prefer this option because the collapsing to icons only looks cool, and the other two options are not great

Screenshots
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
The <DarkThemeToggle /> has no accessible name, which means screen readers read it simply as, "Button", with no context.

To Reproduce
Steps to reproduce the behavior:

1. Add a <DarkThemeToggle /> to your page
2. Focus the button in a screen reader

Expected behavior
An accessible name should be read aloud, like, "Toggle dark mode".

Alternatively, the button can be labelled as hidden for screen readers. I'm not sure, are there users who would have a screen reader, but can still discern dark/light modes?

Screenshots
n/a

Additional context
I've tried this on Apple VoiceOver.

Describe the bug
on v0.0.17 we have a bug on carousel control, now on v0.0.18 it has been solved but I got the new bug, the slide width is not full.

To Reproduce
Steps to reproduce the behavior:

1. install flowbite & flowbite-react on nextjs with notus template
2. setup the tailwind config like in the documentation
3. create a carousel component
4. See an error

Expected behavior
carousel slide is full

Screenshots

Desktop (please complete the following information):

• OS: windows 11
• Browser firefox, chrome
• Version 99, 100

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
Add the Sidebar component to the storybook

Describe the solution you'd like
Add the Sidebar component to the storybook.
Like this example: https://flowbite-react.com/storybook/?path=/story/components-carousel--default-carousel

Describe alternatives you've considered
n/

Additional context
n/

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Reference: https://flowbite.com/docs/components/sidebar/

Describe the bug
Compound components have their . separator removed by the syntax highlighter used for example pages.

To be clear, it is still valid to import ButtonGroup directly, but the examples pages use Button.Group.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://flowbite-react.com/#/button-group
2. Notice the Default example produces the following syntax highlighted code:

<ButtonGroup>
  <ButtonComponent color="alternative">
    Profile
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Settings
  </ButtonComponent>
  <ButtonComponent color="alternative">
    Messages
  </ButtonComponent>
</ButtonGroup>

Expected behavior
The code should look like:

<Button.Group>
  <Button color="alternative">Profile</Button>
  <Button color="alternative">Settings</Button>
  <Button color="alternative">Messages</Button>
</Button.Group>

Screenshots
n/a

Desktop (please complete the following information):
n/a

Smartphone (please complete the following information):
n/a

Additional context
n/a

Describe the bug
I have an App Component, authentication takes place inside it. If the user is authorized, we output Dashboard, otherwise Authentication.

Dashboard has a Navbar, and it has a button that shows a modal window. But this button doesn't work because the EventListener is missing.

If you skip authentication and display Dashboard, the button works and the modal window opens.

dont work

`function App() {
const {verifyAuthentication} = useActions()
const authData = useTypedSelector(state => state.auth)
const [status, setStatus] = useState('no')
const [auth, setAuth] = useState(false)

if (localStorage.getItem('token') && !auth) {
    verifyAuthentication()
    setAuth(true) // todo fix
}

useEffect(() => {
    if (authData.loading && !authData.authResponse) setStatus('loading')
    if (!authData.loading && authData.authResponse?.user) setStatus('yes')
    if (!authData.loading && !authData.authResponse) setStatus('no')
}, [authData])

if (status === 'loading') return <FullWindowSpinner/>
if (status === 'yes')     return <Dashboard/>
if (status === 'no')      return <Authentication/>

}`

if i change to

return <Dashboard/>

modal window open

i used this example

when i try
const modal = new Modal(document.getElementById('defaultModal'), null).show();

i got error

Uncaught ReferenceError: Modal is not defined

Is your feature request related to a problem? Please describe.
The sidebar page missing in the documentation

Describe the solution you'd like
Implement the Sidebar page

Describe alternatives you've considered
n/a

Additional context
n/a

Reference: https://flowbite.com/docs/components/modal/

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

• Checkbox
• FileInput
• Label
• Radio
• Select
• TextInput
• TextArea
• ToggleSwitch

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Reference: https://flowbite.com/docs/components/progress/

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
I believe that is important for us to have some automated tests. Since we do have the docs pages it should not be complicated to test the behaviors of the components. The test must cover usability and accessibility.

Describe the solution you'd like

• Install Cypress
• Install Axe
• Create at least ONE example test

Describe alternatives you've considered
I don't know any alternative.

Additional context
The Sumé LMS frontend already has those tests on it, maybe it would be easy to just bring them to this repository. Also, there is this guide, that can be useful.

Reference: https://flowbite.com/docs/components/avatar/

Reference: https://flowbite.com/docs/components/navbar/

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a

Is your feature request related to a problem? Please describe.
Currently, the repository doesn't have a README.md, so we need to introduce it to make it easy to people to use the library as well to contribute to it.

Describe the solution you'd like
I think that the current flowbite's README is pretty good. So, maybe get some inspiration there. Just be away that we already have at the project the CODE_OF_CONDUCT.md and the CONTRIGUTING.md files that probably need to be linked at the README.md.

Describe alternatives you've considered
Well, I guess that other alternatives are not possible, but maybe some guides and inspirations:

• https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/
• https://github.com/matiassingers/awesome-readme

Additional context
n/a

Is your feature request related to a problem? Please describe.
The component is missing its unit test.

Describe the solution you'd like
Implement the unit test to the component.

Describe alternatives you've considered
n/a

Additional context
n/a