How to use it in our PS module ? about prestashop-ui-kit HOT 15 OPEN

Hi, just tested that it works 👍

You might want to add this to documentation https://devdocs.prestashop.com/ I add trouble finding this

from prestashop-ui-kit.

@PrestaShop/prestashop-modules do you've some modules using the UIKit ?

from prestashop-ui-kit.

@TheTakylo import it by using npm install --save prestakit, then import it inside a scss selector like this :

#myModulePageSelector {
  @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css';
}

That should be fine and override the style from the BO, I think that's how the module team does...

I agree that's dirty as hell, but we're trying to improve that :)

from prestashop-ui-kit.

@justeen35 sorry for the late answer, I think I'm gonna work on that after the next uikit release which will be way complete and reusable!

Any news about the release of the next uikit ?

from prestashop-ui-kit.

Is there a solution ? Because even when importing css / js files there are style conflicts with PrestaShop

from prestashop-ui-kit.

Ping @NeOMakinG

from prestashop-ui-kit.

On legacy page, how the module team does is that they import the UIKit inside a new parent class/id, so they only have the last uikit release on their app without creating conflict with the existing BO style @TheTakylo

from prestashop-ui-kit.

@NeOMakinG Okay, so how can I make it look the same as here for example

from prestashop-ui-kit.

@justeen35 sorry for the late answer, I think I'm gonna work on that after the next uikit release which will be way complete and reusable!

from prestashop-ui-kit.

@JS-starlord It's released

PrestaShop/PrestaShop#18396 currently working on the BO theme to use source files!

from prestashop-ui-kit.

Is it possible to use uikit without entering in conflict with Prestashop BO's bootstrap ? If i compare popovers on ui storybook and popovers on my module, there is clearly a visual difference (see attachment). How can i get the exact same visual of prestaui kit when developing a module ?

on my module's back-office :

on https://build.prestashop.com/prestashop-ui-kit/?path=/docs/popovers--popovers

from prestashop-ui-kit.

I think @PrestaShop/prestashop-modules team does include the UIKit inside a specific selector in order to override the default theme bootstrap on a legacy controller

from prestashop-ui-kit.

I don't see any prestashop official modules using uikit, do you have some hint to guide me ? I have try to put my uikit import in a body selector for my module, but it's don't seem to totally override the default theme

from prestashop-ui-kit.

@TheTakylo import it by using npm install --save prestakit, then import it inside a scss selector like this :

#myModulePageSelector {
  @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css';
}

That should be fine and override the style from the BO, I think that's how the module team does...

I agree that's dirty as hell, but we're trying to improve that :)

i tried but no changes. i installed prestashop-ui-kit by npm in /<myshop>/modules/<mymodule>/src/
and it created node_modules directory

then i made a file named back.scss and loaded it in module config page like this: $this->context->controller->addCSS('back.scss') and checked through view page source and it is loaded

then i write this part you mentioned
#myModulePageSelector { @import '~prestakit/dist/bootstrap-prestashop-ui-kit.css'; }
not working and tried this
#myModulePageSelector { @import '../../node_modules/prestakit/dist/bootstrap-prestashop-ui-kit.css'; }

from prestashop-ui-kit.

Hey @stifler97, did you properly add the selector (might be stupid but I prefer to ask)?

Also, $this->context->controller->addCSS('back.scss') won't work, you need a preprocessor such as Webpack to "compile" the SCSS in order to import the CSS

from prestashop-ui-kit.