feat(checkbox): add checkbox indeterminate prop #1155

grasdira · 2023-11-28T09:22:33Z

I have followed the Your First Code Contribution section of the Contributing guide

Start from the discussion #870

Related to #871

There are no breaking API changes.
Here are my changes:

To ensure that checkboxes with an indeterminate state display the correct style, this commit(65e9f8b) added the following CSS in both .storybook/style.css and docs.css to override the default styles:

[type='checkbox']:indeterminate {
  background-image: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0ndHJ1ZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyBmaWxsPSdub25lJyB2aWV3Qm94PScwIDAgMTYgMTInPgogIDxwYXRoIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczJyBkPSdNMCA2SDE2Jy8+Cjwvc3ZnPg==');
  background-color: currentColor;
}

This commit(f1a8478) added a new example of using the indeterminate state to handle multiple checkboxes in a group or tree structure.

vercel · 2023-11-28T09:22:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 4, 2024 1:23pm

codecov · 2023-11-28T09:25:18Z

Codecov Report

Attention: Patch coverage is 73.91304% with 6 lines in your changes missing coverage. Please review.

Project coverage is 97.29%. Comparing base (7461173) to head (1586050).
Report is 275 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Checkbox/Checkbox.tsx	73.91%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1155      +/-   ##
==========================================
- Coverage   99.54%   97.29%   -2.26%     
==========================================
  Files         163      216      +53     
  Lines        6621     9244    +2623     
  Branches      401      541     +140     
==========================================
+ Hits         6591     8994    +2403     
- Misses         30      250     +220

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

tulup-conner · 2023-11-30T01:05:48Z

Hey thanks for the contribution! I don't have the time to look at this right now but forgive me for jumping in and rebasing, we're trying to figure out what's wrong with codecov. Thank you for your patience! @grasdira

SutuSebastian · 2023-12-08T12:16:19Z

src/components/Checkbox/Checkbox.tsx

    const theme = mergeDeep(getTheme().checkbox, customTheme);

+    const inputRef = useRef<HTMLInputElement | null>(null);


can't this be done using custom data attribute prop (eg: data-...) instead of injecting it through ref and checking the data attribute with tailwind directly in this file? 🤔

Hi, @SutuSebastian . I have provided my responses in this comment. Please review them at your earliest convenience.

Stupidism · 2024-01-13T07:53:29Z

Anyone still working on this?

SutuSebastian · 2024-01-15T08:42:55Z

Anyone still working on this?

Doesn't seem like it 🤔

grasdira · 2024-01-17T11:02:28Z

I'm really sorry for not keeping up with this PR 😔
Since not quite familiar with this project, I need more help to discuss how to solve this problem.

grasdira · 2024-01-17T17:18:41Z

Hi!
After rethinking the code, I have made some adjustments to provide developers with more flexibility when using the component:

I am continuing to use useRef to directly set the indeterminate property on the DOM element. This enables the use of the pseudo-class modifiers indeterminate: in TailwindCSS for CSS customization. (@SutuSebastian sorry for taking so long to reply, this point is why I don't think data-... is a better way on this feature. )
I have removed the modifications I previously made in two .css files, realizing that this approach was limiting the developers’ ability to change the icon or other styles for the indeterminate state. (90ec304)
In tailwind.config.ts, I have extended indeterminate backgroundImage(a4af18f) and set the CSS for the indeterminate checkbox with indeterminate: modifier in Checkbox.tsx(a1bfc21).

What are your opinions on these changes?

SutuSebastian · 2024-02-26T10:09:52Z

tailwind.config.ts

Enforcing the users to apply the same config into their tailwind config is not the way to go, the only thing they'd have to configure is primary and secondary colors override, if needed.

On top of that, needing a custom tailwind config just for a simple component state, is a bit over-engineered. We need to find a simple solution here, that does not spill out more than the components context/folder.

I certainly understand we should not ask user to update their Tailwind config. But I do noticed that the indeterminate state's style definition isn't covered by default in Flowbite.

Is it a better way to integrate indeterminate state's styles directly into Flowbite's default stylesheet, so that all users have access without extra configuration?

U mean to include the indeterminate into flowbite/plugin?

I'd rather have it at the component level, its just a matter of a dash icon and an extra prop.

I can also see in the core library plugin, we already have it: https://github.com/themesberg/flowbite/blob/main/plugin.js#L350

I wasn't aware that the indeterminate state's style had already been defined in the plugin. Thank you for pointing me to it.
I'll update and resubmit shortly.

@SutuSebastian Hey, am I allowed to update flowbite to the latest version.
I just found out the indeterminate state icon changed in a recent commit , and it's causing the icon keep showing the check icon before. 😲

Sure, go ahead

themesberg#871

…f checkbox :indeterminate Override the original style of [type='checkbox']:indeterminate. themesberg#871

themesberg#871

…r indeterminate checkbox Add an example of using the indeterminate state to handle multiple checkboxes in a group of tree structure. themesberg#871

Added extended theme 'colors.current' and 'backgroundImage.indeterminate' to set default styles for indeterminate checkbox themesberg#871

…yles remove [type='checkbox']:indeterminate styles to make development more flexibility themesberg#871

…the indeterminate state 'indeterminate:bg-indeterminate' uses the extended backgroundImage in `tailwind.config.ts`; 'dark:indeterminate:bg-current dark:indeterminate:border-gray-600' fixes checkbox's bg-color and border under dark mode themesberg#871

The indeterminate icon fixed in a recent commit: themesberg/flowbite@ec0eab5 Upgrade flowbite version to apply changes. themesberg#871

themesberg#871

vercel bot temporarily deployed to Preview November 28, 2023 09:24 Inactive

tulup-conner force-pushed the feat/checkbox-indeterminate-prop branch from f1a8478 to 22e6f68 Compare November 30, 2023 01:02

vercel bot temporarily deployed to Preview November 30, 2023 01:04 Inactive

SutuSebastian reviewed Dec 8, 2023

View reviewed changes

vercel bot temporarily deployed to Preview January 17, 2024 17:09 Inactive

grasdira requested a review from SutuSebastian February 20, 2024 05:33

SutuSebastian reviewed Feb 26, 2024

View reviewed changes

grasdira added 7 commits March 3, 2024 20:20

feat(checkbox): add indeterminate state to checkbox component

6ec82f3

themesberg#871

feat(storybook style.css and docs.css): override the original style o…

d9662bd

…f checkbox :indeterminate Override the original style of [type='checkbox']:indeterminate. themesberg#871

docs(forms.checkbox.tsx): add indeterminate checkbox example to docs

2b06acf

themesberg#871

docs(new:forms.checkboxindeterminate.tsx): add a separated example fo…

5564a3c

…r indeterminate checkbox Add an example of using the indeterminate state to handle multiple checkboxes in a group of tree structure. themesberg#871

style(tailwind.config.ts): added extended theme for tailwind

9a4f930

Added extended theme 'colors.current' and 'backgroundImage.indeterminate' to set default styles for indeterminate checkbox themesberg#871

style(style.css, docs.css): remove [type='checkbox']:indeterminate st…

f6a6ea2

…yles remove [type='checkbox']:indeterminate styles to make development more flexibility themesberg#871

grasdira force-pushed the feat/checkbox-indeterminate-prop branch from a1bfc21 to 1943cc3 Compare March 3, 2024 12:30

vercel bot temporarily deployed to Preview March 3, 2024 12:32 Inactive

grasdira marked this pull request as draft March 3, 2024 12:32

grasdira added 2 commits March 4, 2024 21:10

chore(package.json): upgrade flowbite to latest version

753f342

The indeterminate icon fixed in a recent commit: themesberg/flowbite@ec0eab5 Upgrade flowbite version to apply changes. themesberg#871

style: remove extended theme: bg-indeterminate

e1c37ae

themesberg#871

grasdira marked this pull request as ready for review March 4, 2024 13:17

grasdira requested a review from SutuSebastian March 4, 2024 13:18

vercel bot temporarily deployed to Preview March 4, 2024 13:19 Inactive

style(tailwind.config): remove extended color: current

1586050

themesberg#871

vercel bot temporarily deployed to Preview March 4, 2024 13:23 Inactive

grasdira closed this Mar 17, 2025

SutuSebastian mentioned this pull request Mar 17, 2025

New engine #1498

Merged

24 tasks

github-actions bot mentioned this pull request Mar 24, 2025

Version Packages #1534

Merged

		const theme = mergeDeep(getTheme().checkbox, customTheme);

		const inputRef = useRef<HTMLInputElement \| null>(null);

Uh oh!

feat(checkbox): add checkbox indeterminate prop #1155

feat(checkbox): add checkbox indeterminate prop #1155

Uh oh!

Conversation

grasdira commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

tulup-conner commented Nov 30, 2023

Uh oh!

SutuSebastian Dec 8, 2023

Choose a reason for hiding this comment

Uh oh!

grasdira Feb 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Stupidism commented Jan 13, 2024

Uh oh!

SutuSebastian commented Jan 15, 2024

Uh oh!

grasdira commented Jan 17, 2024

Uh oh!

grasdira commented Jan 17, 2024

Uh oh!

SutuSebastian Feb 26, 2024

Choose a reason for hiding this comment

Uh oh!

grasdira Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

SutuSebastian Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

SutuSebastian Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

grasdira Feb 29, 2024

Choose a reason for hiding this comment

Uh oh!

grasdira Mar 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SutuSebastian Mar 3, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

grasdira commented Nov 28, 2023 •

edited

Loading

vercel bot commented Nov 28, 2023 •

edited

Loading

codecov bot commented Nov 28, 2023 •

edited

Loading

grasdira Feb 20, 2024 •

edited

Loading

grasdira Mar 3, 2024 •

edited

Loading