Column: `selectionMode` shows SVG checkmark in unstyled mode

[Real-Gecko]

Describe the bug

When using unstyled mode Column with checkboxes in DataGrid still shows SVG checkmark when checkbox is checked.

App

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <PrimeReactProvider value={{ unstyled: true }}>
    <App />
  </PrimeReactProvider>
)

Datatable

      <DataTable
        value={items}
        tableClassName="table table-striped table-hover"
        selectionMode="checkbox"
        selection={selected}
        onSelectionChange={(e: any) => setSelected(e.value)}
        dataKey="id"
      >
        <Column selectionMode="multiple" headerStyle={{ width: "2rem" }} />
        <Column field="name" header={t("Name")} />
        <Column field="schema" header={t("Schema")} />
      </DataTable>

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chromium latest

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

@Real-Gecko can you confirm wouldn't this be all SVG icons in the whole codebase? I didn't think SVG was "unstyled" its an Icon so its not really CSS related?

[Real-Gecko]

It uses basic bootstrap CSS for styling, here's the video of completely unstyled example:

https://github.com/user-attachments/assets/95777794-eb56-4009-8043-d265d3bc7156

As you can see it appears and disappears when I click the row in a div next to checkbox input. And it's true for "select all" checkbox too.

My current workaround is

[data-pc-section="rowcheckbox.icon"],
[data-pc-section="headercheckbox.icon"] {
  display: none;
}

[gcko]

This seems to be working correctly. Check this stackblitz and you can see that Checkboxes are using the correct Tailwind-defined styling: https://stackblitz.com/edit/yjnfsw?file=src%2FApp.jsx

cc @melloware

[Real-Gecko]

This seems to be working correctly. Check this stackblitz and you can see that Checkboxes are using the correct Tailwind-defined styling

https://github.com/Real-Gecko/primereact-test Here's the link to sample project with zero styling

[gcko]

thanks @Real-Gecko , however that app isn't using the PrimeReactProvider and is not set in unstyled mode - I assume that should also be added?

[Real-Gecko]

Added provider with unstyled: true https://github.com/Real-Gecko/primereact-test/commit/a2ccf4f6ea68c9368dfc780caa30f6b7c6179cb9 according to https://primereact.org/installation/#unstyled No luck yet

[gcko]

👍 okay i'll check it out

[gcko]

@Real-Gecko Okay I have looked into this in depth, here is what I think:

cc @melloware btw, this is regarding framework implementation

The implementation for unstyled mode in PrimeReact assumes that svg icons (CheckIcon, etc) are inherently a part of "unstyled" mode.

You make a good point that svg icon's themselves are in fact intrinsically tied to styling. I have looked at solving this by adjusting the code to provide a span rather than an SVG icon when in unstyled mode:

Current Code:

const icon = props.checked ? props.checkIcon || <CheckIcon {...checkboxIconProps} /> : null;

Code with additional support for unstyled mode:

const fallBackComponent = props.unstyled ? <span {...checkboxIconProps} /> : <CheckIcon {...checkboxIconProps} />;
const icon = props.checked ? props.checkIcon || fallBackComponent : null;

While this does work, this breaks all existing implementations when you are using unstyled mode with passthrough pt options as they currently rely on the existing SVG icon. A suggested solution is to introduce another configuration unstyledOptions that can take additional values, for example:

import { PrimeReactProvider } from "primereact/api";
...
const values = {
    unstyled: true,
    unstyledOptions: {
        svgIcons: false; // default value is true
    }
}
return(
    <PrimeReactProvider value={values}>
        <App />
    </PrimeReactProvider>
)

This method provides an upgrade path for users without affecting existing users of unstyled. It also means we can write the additional support into the library as such:

Code with additional support for unstyled mode:

let fallBackComponent = <CheckIcon {...checkboxIconProps} />;
if (props.unstyled && props.unstyledOptions && props.unstyledOptions.svgIcons === false) {
    fallBackComponent = <span {...checkboxIconProps} />;
}
const icon = props.checked ? props.checkIcon || fallBackComponent : null;

@melloware what do you think?

[melloware]

Hmmm this one we need PrimeTek to weigh in on. cc @mertsincan