primefaces / primereact-sass-theme Goto Github PK
View Code? Open in Web Editor NEWPrimeReact Theming with SASS
License: MIT License
PrimeReact Theming with SASS
License: MIT License
To implement this feature the css sass theme needs to be updated to stay consistent with .p-input-icon-left
. I will create .p-chips-icon-left
in the same manner.
New Component: ButtonGroup
If we go to https://github.com/primefaces/primereact-sass-theme/blob/10.5.0/package.json we see the wrong version
Expected: 10.5.0
Actual: 10.4.0
As the title says, since "font-family" is hardcoded, no matter what "$fontFamily" has as a value, it will have no effect since it is never assigned to "font-family".
A year ago the code was correct (see here), but now it is not (see here).
Noticed in the "arya" themes but apparently, all themes have the same problem.
Describe the bug
I have imported primereact/resources/themes/bootstrap4-light-blue/theme.css as a base theme for a project. I can override the base primary, secondary, etc. colours in the root, however, that isn't used in the theme itself, rather the colours are hardcoded.
Thus it seems that the only way to replace all the hardcoded colours (in this theme's case all the versions of bootstrap's blue), is to manually find all CSS classes and override them individually to change the colours to our project's colours.
Is there a better way of doing this, because changing these hardcoded instances to use the root-defined vars seems like it would make overriding much more straightforward?
PrimeReact version
10.2.1
React version
18.x
Language
TypeScript
Build / Runtime
Create React App (CRA)
Is it planned that primereact-sass-theme can be installed as a npm / yarn package?
So it would be easier to update primereact-sass-theme if updating primereact or installing a older version.
Hover and Active states use the same primary color so no change gets applied
Hi,
.p-inputotp-input { text-align: center; width: 2 * nth($inputPadding, 2) + 1rem; }
+ 1rem
is not a good solution if $inputPadding
variable is not rem (for example pixel)
My pixel based project is broken now
Hi,
I am trying to understand the intended use of /themes/mytheme/sassdoc in this repository. In previous versions of the (former) PrimeReact Designer, an index file was present, which basically resulted in what is found at https://www.primefaces.org/designer/api/primereact/9.0.0/. (also this is a link from the current latest docs, still showing 9.0.0?).
It seems that this index file is missing. Could you please advise on whether the sassdoc directory is still relevant, and if so, how it should be used in the absence of the index file?
Should perhaps be removed?
Thank you!
Original Issue: primefaces/primereact#4427
The clear icon of the multiselect component used to look like this:
But in 9.4.0 it is not aligned correctly anymore:
https://codesandbox.io/s/primereact-test-forked-j9mtn0?file=/src/index.js
9.4.0
18.x
TypeScript
Vite
Microsoft Edge Version 113.0.1774.42
showClear
property set to true.The clear icon should be aligned properly.
To provide consistency of the design across different environments.
Needs to add class
Describe the bug
As stated in the documentation example for SlideMenu you can use a seperator item. But the seperator item isn't rendered at all.
Reproducer
https://codesandbox.io/s/dzk8kb
PrimeReact version
9.5.0
React version
18.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
Add seperator item to SlideMenu
Render SlideMenu
No seperator
Expected behavior
SlideMenu with seperator
panelHeaderHoverBg
, panelHeaderHoverBorderColor
, and panelHeaderTextHoverColor
variables are duplicated.
Related to Issue #4310 in PrimeReact
Original Issue: primefaces/primereact#4421
Original Issue: primefaces/primereact#4738
TabView does not show which Tab is selected when using TabPanel with template and PrimeReact is set with Arya Orange theme.
It does work with Lara Indigo theme.
https://codesandbox.io/s/primereact-demo-forked-7whkn5
9.6.0
18.x
ES6
Create React App (CRA)
No response
Just click the TabPanel with template "Amy Elsner" or the one with the split button.
TabView does not show those Tabs selected.
TabPanels must be displayed selected even if they use templates and the theme is Arya Orange
Hi
I just saw that the Theme Designer Editor is discontinued or somehow doesn't seem to work.
What is the plan for this? In the future is it foreseen that we will create one of our own based on the SASS api?
Thanks
Original Issue: primefaces/primereact#3918
Borders between months are not displaying correctly in Calendar Multiple Months example.
This is related to primereact-designer-8.0.0
, specifically the /src/assets/designer/components/input/_calendar.scss
file for class .p-datepicker-multiple-month
.
Note the changed styling from border-right
from v7 to border-left
in v8 caused this issue. Reverting to border-right
fixes the issue.
No response
8.7.3
17.x
TypeScript
Vite
No response
Issue can be seen on https://www.primefaces.org/primereact/calendar/ when clicking on the Multiple Months example.
Expect to see a vertical border between the middle month and the two outer months.
In the latest version, the following variables are missing in themes/mytheme/variables/_misc.scss
:
$chipFocusBg: $shade500 !default;
$chipFocusTextColor: $textColor !default;
This leads to the following error:
[sass] Undefined variable.
╷
76 │ background: $chipFocusBg;
│ ^^^^^^^^^^^^
╵
src\themes\theme-base\components\input\_chips.scss 76:29 @import
src\themes\theme-base\_components.scss 14:13 @import
src\themes\mytheme\theme.scss 3:9 root stylesheet
Please remove sass color function in all theme-base files and instead use them as a variable in _variables.scss in each theme.
Actually is it not possible to set a css variable as a value for a color.
Currently, themes are relying on SASS variables for colors. As result, dynamic change of colors from the client-code level is not possible. At the same time, PrimeFlex (https://www.primefaces.org/primeflex/) is using SASS + CSS Custom Properties for colors. Re-coloring values of PrimeFlex is fairly easy and does not require any re-compilation normally.
Use cases :
Should Prime React themes start reusing CSS Custom Properties for color values in components as well? It'll simplify the re-coloring for theme consumers and unblock dynamic change of colors.
I'm ok to make these changes and prepare a PR if needed.
Related issue: primefaces/primereact#4199
The label of the text area component is being overwritten by the text when there is a lot of it and the user scrolls down.
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.