Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement unstyled mode from PrimeVue #11

Closed
eboileau opened this issue May 23, 2023 · 4 comments
Closed

Implement unstyled mode from PrimeVue #11

eboileau opened this issue May 23, 2023 · 4 comments
Assignees
Labels
stack:frontend Frontend (FE) related

Comments

@eboileau
Copy link
Collaborator

Aims/objectives.

Implement unstyled mode from PrimeVue. Currently, we use primevue@3.28.0, but regular updates are available.

npm update primevue
npm update --save primevue 

A clear and concise description of todo items.

I started to test the pass through option on selected components, but we need important: true in the tailwind.config.js file (or do not import theme?).

As soon as this feature is fully available/supported, revisit all UI components, and implement our own styling with Tailwind.

@eboileau eboileau added status:in-progress This issue is being dealt with stack:frontend Frontend (FE) related labels May 23, 2023
@eboileau eboileau self-assigned this May 23, 2023
@eboileau eboileau mentioned this issue May 23, 2023
3 tasks
@eboileau eboileau mentioned this issue Oct 19, 2023
1 task
@eboileau
Copy link
Collaborator Author

Set-up unstyle mode

  1. Tailwind CSS: @layer configuration, see https://primevue.org/tailwind/#csslayer
  2. Setup see https://primevue.org/tailwind/#setup, in particular make tailwind.config.js aware of PrimeVue, set unstyle mode globally, but use Tailwind (and remove important: true):
import Tailwind from 'primevue/passthrough/tailwind';
app.use(PrimeVue, { unstyled: true, pt: Tailwind, ptOptions: { mergeProps: true } });
  1. Component styles are provided via a pass through configuration that utilizes Tailwind CSS, check also https://primevue.org/unstyled/#theme for global pt configuration. Still a particular component can override a global configuration since the pt props of a component and the global setting is merged with component having higher precedence, we'll need to test that in styling individual components.

@eboileau
Copy link
Collaborator Author

Next step: shared pass through properties per component type (defined globally) or UsePassThrough.

eboileau added a commit that referenced this issue Oct 25, 2023
@eboileau
Copy link
Collaborator Author

Theming didn't work exactly as I thought... with UsePassthrough, see also here, adding a component pt didn't always worked (Tailwind theme was completely overriden).

Adding ptOptions to app.use(PrimeVue, ...) seems to resolve the issue, although behavior of merging was already defined in 3rd option of usePassThrough. Maybe I didn't understand exactly how this works...

But things may change again, see e.g. primefaces/primevue#4707, so we need to be careful when updating PrimeVue.

@eboileau
Copy link
Collaborator Author

WIP as new components are added. Closing this issue.

@eboileau eboileau removed the status:in-progress This issue is being dealt with label Oct 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stack:frontend Frontend (FE) related
Projects
None yet
Development

No branches or pull requests

1 participant