themesberg / flowbite-react Goto Github PK
View Code? Open in Web Editor NEWOfficial React components built for Flowbite and Tailwind CSS
Home Page: https://flowbite-react.com
License: MIT License
Official React components built for Flowbite and Tailwind CSS
Home Page: https://flowbite-react.com
License: MIT License
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.
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:
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
The tooltip element is misaligned from the parent element
To Reproduce
Steps to reproduce the behaviour:
Expected behaviour
The tooltip is aligned to parent element
I believe this is impact other components like the dropdown.
Desktop (please complete the following information):
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
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:
<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
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
I found 2 bugs that happen to me.
To Reproduce
first bug:
<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>
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
Reference: https://flowbite.com/docs/components/toast/
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:
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...
collapsed
, hide the Sidebar
completely
collapseBehavior="hide|icons"
Screenshots
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/tables/
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/avatar/
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:
<DarkThemeToggle />
to your pageExpected 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.
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
Spinner
s are an <svg>
with role="status"
, but they do not have an accessible label.
To Reproduce
Steps to reproduce the behavior:
<Spinner />
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.
Reference: https://flowbite.com/docs/components/footer/
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 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.
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>
<Button custom='w-full'>
custom prop should have high priority then internal class
</Button>
Additional context
discord thread
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:
fixed
div like below screenshot. I just copy Default modal example code from your docsExpected 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):
Additional context
Add any other context about the problem here.
Reference: https://flowbite.com/docs/components/rating/
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
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 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/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
Reference: https://flowbite.com/docs/components/tabs/
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/modal/
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:
Expected behavior
carousel slide is full
Screenshots
Desktop (please complete the following information):
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:
Breadcrumb
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
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
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.
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
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.
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.
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 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
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.