Missing css styles in Steps component from build step

[thosiawa]

Hi,

I bought prime designer and I believe the build output of theme.css is missing some styles that I see in chrome dev tools.
I tried to figure out if I'm missing something/doing something wrong, but no luck so far.

STEPS TO REPRODUCE:
1. Add "REACT_APP_EDITOR=code" to .env
2. Add Steps component to HomeExtension.jsx
3. Visually, it looks good (matches what's on https://www.primefaces.org/primereact/steps/)
4. Chrome dev tools shows css like
on p-steps div

Code: Select all

.p-steps {
    position: relative;
}

on p-steps-item div

Code: Select all

.p-steps ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
}

4. Run

Code: Select all

sass --update src/assets/themes/mytheme:src/assets/themes/mytheme

OUTCOME:
- The output to theme.css is missing the styles I see in step 5
- When I use the build them.css in my own build. Steps appears are a vertical list

[Melloware]

Som styles are defaulted right inside the PrimeReact library `primereact.css` These styles are the following:

Code: Select all

.p-steps {
    position: relative;
}

.p-steps ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
}

.p-steps-item {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
}

.p-steps-item .p-menuitem-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    text-decoration: none;
}

.p-steps.p-readonly .p-steps-item {
    cursor: auto;
}

.p-steps-item.p-steps-current .p-menuitem-link {
    cursor: default;
}

.p-steps-title {
    white-space: nowrap;
}

.p-steps-number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-steps-title {
    display: block;
}

[thosiawa]

Thank you! I'll manually add this into my scss. It might be useful to put all the missing styles somewhere in the download we're provided.

[Melloware]

They are documented at the bottom of this page under "Styling": https://primefaces.org/primereact/steps/

[thosiawa]

Thank. Not sure if I quite understand. Looking at the page, I see a list of classes but don't see an indication that I need to insert these missing styles manually?
If I misunderstand the expected steps, please let me know.

Current developer experience:
- Don't know which styles are missing from the build
- Can only detect through visual inspections
- Once detected, have to search chrome dev tools what to insert manually

Suggestion for improved developer experience:
- Include the default styles in the prime designer build by default, or
- Indicate what styles are missing on each component so we can quickly copy/paste

[Melloware]

Each component is documented as its core styles for "overriding". The Theme Designer does not override every single style of every single component some inherit core styling from the component.

So all I am pointing out is don't expect every single style to be in the Theme Designer you may have to consult docs of each component if you want to override MORE than the Theme Designer is overriding but that is the power and beauty of SASS!

[thosiawa]

Ah, ok! To confirm I understand it. It's expected to import primereact.css along with the build css file from prime designer?

[Melloware]

Yes if you look at my Code Sandbox I ALWAYS import these in this EXACT order

https://codesandbox.io/s/primereact-test-forked-bbns8k

Code: Select all

import "primereact/resources/themes/lara-light-indigo/theme.css"; //theme
import "primereact/resources/primereact.min.css"; //core css
import "primeicons/primeicons.css"; //icons
import "primeflex/primeflex.css"; // flex

[thosiawa]

Thank you! That was my misunderstanding. Will do that going forward