prestashop / prestashop-ui-kit Goto Github PK
View Code? Open in Web Editor NEWUI kit for PrestaShop Backoffice - A collection of styled components, based on Bootstrap 4
UI kit for PrestaShop Backoffice - A collection of styled components, based on Bootstrap 4
Is it possible to use this a module which uses Symfony pages for the back office without having to compile anything via npm?
If I add a component to my twig template, it seems to render as expected, however JS does not seem to work on it, for example, toggling behaviours do not work.
For example, when using a dropdown button and the button is clicked, the following JS error appears in the browser:
main.bundle.js:629 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument')
at P (main.bundle.js:629:6759)
at F (main.bundle.js:629:7163)
at e.W (main.bundle.js:629:8375)
at e.value (main.bundle.js:629:20374)
at main.bundle.js:629:346
Am I missing something?
This is coming from : https://github.com/PrestaShop/PrestaShop/pull/17215/files#r384581937
Following this UX feedback: PrestaShop/PrestaShop#13458 (comment)
We need to update the UI kit to allow text labels next to toggling switch inputs
I found some issues while browsing the preview on the develop branch:
Hello,
I suggest to increase the font-size
of the validation message.
For now, the font-size
compute to 10px
.
It comes from the mixin @mixin ps-form-validation-state($state, $color)
in scss/mixins/_forms.scss
@mixin ps-form-validation-state($state, $color) {
.form-control.is-#{$state},
.is-#{$state} {
border-color: $color;
&:focus {
box-shadow: none;
}
}
.#{$state}-feedback {
margin-top: 0.3125rem;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
color: $color;
}
}
The variable $font-size-xs
is defined in scss/_variables.scss
:
The value is:
$font-size-xs: 0.625rem; // PS custom
What do you think about increasing the computed value to 12px
instead?
After discussion with @MatShir, @PrestaShop/ux-team could you design a colorpicker ?
After that, I will work on its implementation. Thanks for advance
https://build.prestashop-project.org/
If I remember correctly, you were able to show the code of the button/warning/etc displayed in the Canvas. I am not sure if Docs button is for that, but now, when you click on Docs, you get a white page and bunch of .js errors.
https://build.prestashop-project.org/prestashop-ui-kit/?path=/docs/alerts--basics
The file bootstrap-prestashop-ui-kit.css either from the npm repo or the cdn has an error.
height:calc(1.751rem + 2px)-2;
This causes that when you use a CSS preprocessor to make the kit works with your own custom modules.
#66 (comment)
This is the error that appears when you try to import it in a sass.
As detected in this PR PrestaShop/PrestaShop#25920 and discussed in its comments (including this one PrestaShop/PrestaShop#25920 (comment)) the search icon from search input should now be on the left.
This is handled here:
prestashop-ui-kit/scss/_forms.scss
Line 210 in b8542c1
Readability and accessibility are paramount these days and companies get fined for not complying with accessibility basic rules (in the US and soon in Europe)
The buttons used in PrestaShop UI kit fail the simplest contrast test (WCAG:AA) Foreground:#FFFFFF background:#2eb9d7
https://color.a11y.com/ContrastPair/?bgcolor=2eb9d7&fgcolor=ffffff
One way to fix this would be to use the purple that's available in PrestaShop's colors #442CC7 ensuring a good contrast between the text and the background
https://color.a11y.com/ContrastPair/?bgcolor=442CC7&fgcolor=ffffff
We should setup the main branch for "github-pages" feature, in order to provide a live overview.
Then we update the readme.md with a link. This way it will be easy for anyone to look at it, without using rawgit or other stuff like that.
You have an example on how to make it work, but if I want to disabled the (forced) choice, how can I make it work ?
We should remove jQuery from the final source file distributed in dist
directory.
jQuery and Bootstrap should come as pure external dependencies, and not be included in the final source file of prestashop-ui-kit.
It would be good to add all button (and other elements) to storybook. So we can preview them and check that they work correctly.
Example
Info, Light, Dark, Link variants missing on buttons
http://build.prestashop.com/prestashop-ui-kit/?path=/story/buttons--basics
https://getbootstrap.com/docs/4.6/components/buttons/
ping @NeOMakinG
package.json mentions OSL license but the file is not in the repo. Should we add the file?
Hello there,
Sorry for the long title, but I couldn't find a way to phrase it better.
When one uses an anchor tag <a>
with the class .btn
in an alert, the button will be underlined and the color won't be the one from the class .btn
.
<div class="alert alert-info" role="alert">
<p class="alert-text">
This is a info alert with <a href="#">an example link</a>. Click me to delete
</p>
<div>
<a href="//google.com" class="btn btn-secondary">
I'm an a tag
</a>
</div>
</div>
In _alert.scss
, replace line 10:
From:
a {
To:
a:not(.btn) {
I can't think of any potential issue with this fix, let me know what you think about it.
Thank you :)
I see we use a jQuery plugin dependency https://github.com/PrestaShop/pstagger that has not been updated since 2016.
Is this OK? Should we stop relying on it? Should we update it?
Hi,
in the README you say:
Note: If you use PrestaShop, there's no need to install – the UI kit is already installed in PrestaShop.
But when I copy/paste some code from http://build.prestashop.com/prestashop-ui-kit like the select box component into my configure.tpl file I get the old design and not the one from PSUI.
Do we have to do something special to use it in our module development ?
Regards
What i did:
I opened this guide
Copied some sample code
Then pasted in configure.tpl
of my custom module.
The result:
It has no effect. its like styles do not exist in prestashop admin theme.
Then what i did:
I downloaded prestashop ui kit with npm.
Added these lines:
<link href="{$css_dir}" rel="stylesheet">
<script src="{$js_dir}"></script>
It shows some changes but it has lots of conflicts with admin theme.
We are currently using the same icon for our tooltips and info alerts which is called "info". Also this icon looks a lot like the icon used for danger alert which is called "error". To prevent any type of dyslexia or to avoid confusing both icons between each other, it will be better to replace the tooltips icon by the one called "help". It's more representative of the feature.
See the difference
Select2 uses default theme which is the one for Bootstrap 5. The initSelect2 function should set something like this:
var newObj = {minimumResultsForSearch: -1, theme: 'bootstrap4};
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.