Apollo Theme: Radio button shows twice

[chrishj59]

Hi,

Using the Apollo theme, my Radio button shows twice, once with the non-Primefaces look and once with the Primefaces look.
Here is the code:
<RadioButton inputId={attrib.id.toString()} name={title} value={attrib.id} onChange={(e) => onSetRadio(e)} checked={sizeId === attrib.id} /> <label htmlFor={attrib.id.toString()} className="ml-2"> {attrib.title} </label>

I think this may be waiting for an update to the Apollo theme.
Please let me know when the theme will be updated.

Thanks

[arussell-wc]

I am actually having this same issue with not only RadioButtons but MultiSelect as well.

First i must say this was working fine in V9 primereact, then updated to the latest PrimeReact and PrimeIcons when this happened. I also tried setting the versions of the packages back to what Apollo requires, same results.

    "primeicons": "^6.0.1",
    "primereact": "^10.2.1",

And for the RadioButton

For the MultiSelect this is my code

<MultiSelect
    value={newTask.labels}
    onChange={(e) => {
        setNewTask({...newTask, labels: e.value});
    }}
    options={labels}
    optionLabel="name"
    filter
    display="chip"
    itemTemplate={labelTemplate}
    placeholder={t("TimeTracking.Form.labels")}
    className="w-full mt-2 checkbox-bufix-multiselect"
/>

For the RadioButtons i believe its the same as when the template is shipped. But here is that as well.

<div className="field-radiobutton">
    <RadioButton name="colorScheme" value="light" checked={layoutConfig.colorScheme === "light"} onChange={(e) => changeColorScheme(e.value)} inputId="mode-light" />
    <label htmlFor="mode-light">
        Light
    </label>
</div>
<div className="field-radiobutton">
    <RadioButton name="colorScheme" value="dim" checked={layoutConfig.colorScheme === "dim"} onChange={(e) => changeColorScheme(e.value)} inputId="mode-dim" />
    <label htmlFor="mode-dim">
        Vibrant (Dim)
    </label>
</div>
<div className="field-radiobutton">
    <RadioButton name="colorScheme" value="dark" checked={layoutConfig.colorScheme === "dark"} onChange={(e) => changeColorScheme(e.value)} inputId="mode-dark" />
    <label htmlFor="mode-dark">
        Dark
    </label>
</div>

[chrishj59]

I believe an update to the theme css is required. There was a fix in in the primereact for one of the colour themes .
Hopefully there will be an update on when a new CSS will be released for V10

[arussell-wc]

I pulled all the new CSS from the v10.1.0 theme and still same results, as i view the rendered HTML i can clearly see that css classes are not being applied to the elements when clicking into a radiobutton or checkbox, and the input element is not being hidden. This tells me its a component logic issue? not a CSS issue?

[arussell-wc]

I was able to pull over the CSS and changing the version to primereact 10.4.0, but any version above that results in the same issue.

Doing both the CSS and the primereact version seems to have done the trick.

[chrishj59]

This also affects TabView
TabView shows the headers aligned vertically with one under the other as unstyled bullet points. It used to have them in a single row all syled

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

[chrishj59]

The only way I have got this to work is to revert to 10.2.1.
When will the Apollo template be updated to work with the current version of PrimeReact?

[chrishj59]

I have attempted to follow the theme migration guide this has not fixed the issue

[melloware]

@chrishj59 i updated Diamond Template to 10.7.0 with latest SASS without issue and it resolves the double radio button. I have a feeling you are not doing it correctly.

[chrishj59]

I get the error:
Error: Undefined variable. ╷ 87 │ background: $highlightFocusBg; │ ^^^^^^^^^^^^^^^^^ ╵ public/theme/theme-base/components/input/_cascadeselect.scss 87:33 @import public/theme/theme-base/_components.scss 12:13 @import public/theme/theme-dark/blue/theme.scss 12:9 root stylesheet ^^^^^^^^^^^^^^^^^
steps followed:
Copy down load primereact-sass-theme-10.8.2 into the directory apollo-react-10.1.0
run the command; sass --update public/theme:public/them
from the directory apollo-react-10.1.0.

Should I be running from a different directory?
Thank you

[melloware]

No it looks like a new variable was added so look in your theme.scss for files that look like this.

$primaryColor: #90CAF9;
$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #212529;

$highlightBg: rgba(144, 202, 249, 0.16);
$highlightTextColor: rgba(255,255,255,.87);

@import '../../sass/theme/_theme_dark';

you need to add $highlightFocusBg: rgba($primaryColor, 0.24) !default; like this...

$primaryColor: #90CAF9;
$primaryLightColor: scale-color($primaryColor, $lightness: 30%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #212529;

$highlightBg: rgba(144, 202, 249, 0.16);
$highlightTextColor: rgba(255,255,255,.87);
$highlightFocusBg: rgba($primaryColor, 0.24) !default;

@import '../../sass/theme/_theme_dark';

[chrishj59]

There also seem to be the below missing :
Is there a file I can use to find out what values these should be?
I have guessed at the below values

$chipFocusBg: rgba($primaryColor, 0.24) !default;
$highlightBg: rgba(147, 197, 253, 0.16) !default;
$highlightTextColor: rgba(255, 255, 255, 0.87) !default;
$chipFocusTextColor: rgba(255, 255, 255, 0.87) !default;
$inputListItemTextFocusColor: rgba(255, 255, 255, 0.87) !default;
$inputListItemFocusBg: rgba($primaryColor, 0.24) !default;
$menuitemActiveFocusBg: rgba(255, 255, 255, 0.87) !default;
$menuitemTextFocusColor: rgba(255, 255, 255, 0.87) !default;
$menuitemFocusBg: rgba($primaryColor, 0.24) !default;
$menuitemIconFocusColor: rgba(255, 255, 255, 0.87) !default;
$dockItemBorderRadius: not sure what value this should have.

Thanks

[arussell-wc]

So, this is essentially what was happening to be as well, i kept trying to follow the migration guide and all i was getting was missing SASS variables. I eventually said forget it, "High effort, low priority" and am missing out on some great features that are above 10.4. And the way i had to get to 10.4 seemed hackish in my opinion. Call it user error if you will, but i followed that guide to the T.

[melloware]

Agreed @arussell-wc

@chrishj59 yes just go to say ARYA for example and look at all the variables: https://github.com/primefaces/primereact-sass-theme/blob/main/themes/arya/_variables.scss

[arussell-wc]

@melloware good point, just get them directly from the source. But your saying you didn't have to do any of this hackish stuff by bringing in those variables manually? Was 10.7.0 your first attempt at it? Last time i tried was 10.6. You mentioned you are on the Diamond template, maybe it would be worth the time to invest into just switching to another template.

[melloware]

So I use the Diamond Template which has 3 modes light, dim and dark. Those modes happen to be Arya, Saga, Vela in that PrimeReact SASS project so I literally just copied over Arya Saga and Vela to my Diamond respective light, dim, and dark themes and voila!

I don't own Apollo so I can't speak to it.

[chrishj59]

Thanks @melloware I will go to the ARYA source.

[chrishj59]

Thanks for your help, this is now sorted.

[lordpizzo]

Hi, can anyone help me with updating the themes in Apollo version 10.1.0? I'm trying to perform the update, but several variables don't exist. I tried to create them all but I couldn't. Does anyone have an updated version of these themes to help me?

[chrishj59]

Hi, can anyone help me with updating the themes in Apollo version 10.1.0? I'm trying to perform the update, but several variables don't exist. I tried to create them all but I couldn't. Does anyone have an updated version of these themes to help me?

Have you tried the migration guide higher up this thread?