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.

I found some issues while browsing the preview on the develop branch:

1. Low contrast link color in informational alert:

2. Blue link in green alert, again low contrast (and arguably ugly :P)

3. Low contrast in description text & icon color

4. The warning text is low contrast; the warning color background looks a little "muddy" to me, perhaps we should pick a more orangey yellow instead.

5. The warning badge looks even more muddy

6. The warning buttons suffer from the same color/contrast problems:

7. Again, low contrast:

8. Rounded background in the selected pill looks weird:

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 ?

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

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?

This is coming from : https://github.com/PrestaShop/PrestaShop/pull/17215/files#r384581937

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

Before:

After:

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?

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.

Readability and accessibility

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)

Acccessibility issue

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

Fix proposition

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.

Following this UX feedback: PrestaShop/PrestaShop#13458 (comment)

We need to update the UI kit to allow text labels next to toggling switch inputs

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.

This is an image of what expected:

This is an image of result:

Problem
Button element in the UI kit has wrong color in btn-light variant.

Desired look
btn-light should have dark text.

How to reproduce
Insert <button type="button" class="btn btn-light">Light</button> anywhere in BO.

Screenshot

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

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.

Current

Expected

This is handled here:

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?

Hello there,
Sorry for the long title, but I couldn't find a way to phrase it better.

Issue:

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.

Markup:

<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>

How it looks:

How it should look:

Fix suggested:

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 :)

package.json mentions OSL license but the file is not in the repo. Should we add the file?

After discussion with @MatShir, @PrestaShop/ux-team could you design a colorpicker ?

After that, I will work on its implementation. Thanks for advance