Giter Site home page Giter Site logo

primereact-sass-theme's Introduction

Maven Actions Status CI Actions Status Integration Tests Sonar License: MIT Discord Chat Stackoverflow Prime Discussions

PrimeFaces Hero

PrimeFaces

This is an overview page, please visit PrimeFaces.org for more information.

PrimeFaces Logo

Overview


PrimeFaces is one of the most popular UI libraries in Java EE Ecosystem and widely used by software companies, world renowned brands, banks, financial institutions, insurance companies, universities and more. Here are some of the users who notified us or subscribed to a PrimeFaces Support Service.

Community <> Elite <> Pro


This is the open source code and issue tracker of the PrimeFaces master (a.k.a. community version).
Please check the following link for informations about Elite and Pro: PrimeFaces Support

What does that mean?

  • PrimeFaces is developed by PrimeTek and the open source community.
  • The most contributers here on GitHub are working on PrimeFaces in their spare time.
  • PrimeTek pushes fixes and new features from their closed source Elite and Pro repositories to the community edition.
  • We, the community on GitHub, only provide support for issues, which are reproducable with the current SNAPSHOT (scroll down for more information on how to use it).
  • We are NOT able to port bugfixes to elite releases. This is up to PrimeTek and can e.g. be triggered with PrimeFaces PRO.

Versions


Version Binary Source JSF version Java version Documentation
14.0.x JAR Sources 2.3 - 4.0 11 - ? 14.0.0 Documentation
13.0.x JAR Sources 2.0 - 4.0 1.8 - ? 13.0.7 Documentation
12.0.x JAR Sources 2.0 - 4.0 1.8 - ? 12.0.0 Documentation
Archive
Version Binary Source JSF version Java version Documentation
11.0.0 primefaces-11.0.0.jar primefaces-11.0.0-sources.jar 2.0 - 4.0 1.8 - ? 11.0.0 Documentation
10.0.0 primefaces-10.0.0.jar primefaces-10.0.0-sources.jar 2.0 - 3.0 1.8 - ? 10.0.0 Documentation
8.0 primefaces-8.0.jar primefaces-8.0-sources.jar 2.0 - 2.3 1.8 - ? 8.0 Documentation
7.0 primefaces-7.0.jar primefaces-7.0-sources.jar 2.0 - 2.3 1.7 - ? 7.0 Documentation
6.2 primefaces-6.2.jar primefaces-6.2-sources.jar 2.0 - 2.3 1.6 - ? 6.2 Documentation
6.1 primefaces-6.1.jar primefaces-6.1-sources.jar 2.0 - 2.3 1.5 - ? 6.1 Documentation
6.0 primefaces-6.0.jar primefaces-6.0-sources.jar 2.0 - 2.2 1.5 - ? 6.0 Documentation
5.3 primefaces-5.3.jar primefaces-5.3-sources.jar 2.0 - 2.2 1.5 - ? 5.3 Documentation
5.2 primefaces-5.2.jar primefaces-5.2-sources.jar 2.0 - 2.2 1.5 - ? 5.2 Documentation
5.1 primefaces-5.1.jar primefaces-5.1-sources.jar 2.0 - 2.2 1.5 - ? 5.1 Documentation

For a full list of the available downloads, please visit the download page.

Maven


Release
<!-- Java EE / javax.* / JSF 2.2 - JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->	
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>13.0.7</version>
    <classifier>jakarta</classifier>
</dependency>
SNAPSHOT
<!-- Java EE / javax.* / JSF 2.3 -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
</dependency>

<!-- Jakarta EE / jakarta.* / Faces 3.0 - Faces 4.0  -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>14.0.0-SNAPSHOT</version>
    <classifier>jakarta</classifier>
</dependency>

<repositories>
  <repository>
    <id>sonatype-snapshots</id>
    <name>Sonatype Snapshot Repository</name>
    <url>https://oss.sonatype.org/content/repositories/snapshots</url>
    <releases>
        <enabled>false</enabled>
    </releases>
    <snapshots>
        <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>

Usage


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<h:head>

	</h:head>

	<h:body>

		<p:spinner />

	</h:body>
</html>

Demo


Please refer to the showcase in order to see the full usage of the components. Sources of PrimeFaces showcase are available within module primefaces-showcase.

Contribution


Visit the contribution page for detailed information.

Release Instructions


  • Run mvn versions:set -DgenerateBackupPoms=false -DnewVersion=14.0.0 to update all modules versions
  • Commit and push the changes to GitHub
  • In GitHub create a new Release titled 14.0.0 to tag this release
  • Run mvn clean deploy -Prelease to push to Maven Central
  • Rename Milestone in GitHub Issues and close it
  • Create a new Milestone

License


Licensed under the MIT License.

primereact-sass-theme's People

Contributors

cagataycivici avatar gucal avatar habubey avatar melloware avatar nitrogenous avatar soydiego avatar tugcekucukoglu avatar ulasturann avatar yigitfindikli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

primereact-sass-theme's Issues

MultiSelect: Icon shifted too far

Describe the bug

Original Issue: primefaces/primereact#4427

The clear icon of the multiselect component used to look like this:
Screenshot_6

But in 9.4.0 it is not aligned correctly anymore:
Screenshot_7

Reproducer

https://codesandbox.io/s/primereact-test-forked-j9mtn0?file=/src/index.js

PrimeReact version

9.4.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Microsoft Edge Version 113.0.1774.42

Steps to reproduce the behavior

  1. Create a multiselect component with the showClear property set to true.
  2. Select one or more items from the multiselect
  3. Look at the alignment of the clear icon

Expected behavior

The clear icon should be aligned properly.

inputotp style

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

primereact-sass-theme as a npm package

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.

Toast: Unnecessary border-width

Hi, I realized in some devices/browsers/OS (I don't know exactly), the Toast component is generating a unnecessary border.
You cannot replicate in the website, but in Linux, firefox and my project I can see this problem.

image

The problem is the border-width. Is not necessary in this place.

Remove sass color functions in theme-base files

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.

Chip variables missing in mytheme

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

Messages: Inconsistency

It is clear that there is a difference between the Toast and Messages components. We desire that PrimeNG and PrimeReact will have the same features as these two components; therefore, these differences should be eliminated.

Currently:

Screenshot 2023-05-24 at 09 25 04

Expected:
Screenshot 2023-05-24 at 09 25 51

#4077

Lara theme: inconsistent color for info message

In Lara themes, the info message is fixed to an indigo color, this is inconsistent with the info button or the current primary color.

image

image

Seems to me, it should match the color of the info button.

Happy to submit a PR if a maintainer can confirm this

TabView: Arya not highlighting properly

Describe the bug

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.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-7whkn5

PrimeReact version

9.6.0

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Just click the TabPanel with template "Amy Elsner" or the one with the split button.

TabView does not show those Tabs selected.

Expected behavior

TabPanels must be displayed selected even if they use templates and the theme is Arya Orange

Calendar Style: Multiple Months borders

Describe the bug

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.

Screenshot 2023-01-05 at 18 04 45

Note the changed styling from border-right from v7 to border-left in v8 caused this issue. Reverting to border-right fixes the issue.

Reproducer

No response

PrimeReact version

8.7.3

React version

17.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Issue can be seen on https://www.primefaces.org/primereact/calendar/ when clicking on the Multiple Months example.

Expected behavior

Expect to see a vertical border between the middle month and the two outer months.

Question: CSS Custom Properties (Variables) for colors in properties in theme

Problem statement

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 :

  • Turn on/off dark-mode for the client UI - without the need to download a whole new theme
  • Re-color the theme on the code level, without the need to re-compile the whole theme with https://designer.primereact.org/ or manual compilation from this repo
  • Improved performance of https://designer.primereact.org/ , removes the need to make HTTP requests for theme compilation when colors changed in the left panel. Compilation only would be needed for Download functionality.

Suggestion / discussion

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.

CSS Themes: Override base colours

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)

Theme editor plans?

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

SlideMenu: Seperator missing

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

Clarification needed on /themes/mytheme/sassdoc usage

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.