✨ NeoDropdown & NeoSelect

[roiLeo]

// TODO:

• dark-mode for NeoSelect & NeoDropdown
• font-awesome integration in histoire
• check oruga scss global var
• active style
• new props/slot
• responsive dropdown (mobile version)

PR Type

• Feature

Context

• closes create NeoDropdown component based on o-dropdown in histoire #4361
• closes Create NeoSelect #4363
• fix IdentityItem import
• <NeoSelect /> component on histoire
• <NeoDropdown /> component on histoire

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Screenshot 📸

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	f279921
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/6396fa98c545f70009e51583
😎 Deploy Preview	https://deploy-preview-4430--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[yangwao]

Awesome stuff! 😍

Is it mergeable already?

[roiLeo]

Awesome stuff! 😍

Is it mergeable already?

ještě ne

[yangwao]

ještě ne

J'ai hâte qu'il soit prêt pour que nous puissions l'utiliser 🥰

[roiLeo]

This PR break current oruga tabs design, I'll be looking why

[preschian]

This PR break current oruga tabs design, I'll be looking why

oh, I found it. need to add scoped on every histoire component will fix this issue https://github.com/roiLeo/nft-gallery/blob/feature/ui/components/libs/ui/src/components/NeoDropdown/NeoDropdown.vue#L27

somehow if we didn't put the scoped attributes these components will be broken

// OVERRIDE ORUGA COMPONENTS
@import "components/o-table";
@import "components/o-tabs";
@import "components/o-tooltip";

[roiLeo]

somehow if we didn't put the scoped attributes these components will be broken

I remember mentioning it in a comment, wanted to know if there was not a better approach like a general import.

now my problem is that I can't override oruga variable on scoped element using :root selector

[preschian]

now my problem is that I can't override oruga variable on scoped element using :root selector

i see, what hapeen if we try with sass variables? does the sass variable also get the same result?

[roiLeo]

i see, what hapeen if we try with sass variables? does the sass variable also get the same result?

Sass variable ain't working :/

edit: might need some tweak

In order to work with SASS/SCSS you might also have to install sass and sass-loader depending on your environment.

[preschian]

Sass variable ain't working :/

we need to reorder like this:

@import '@oruga-ui/oruga/src/scss/utilities/expressions.scss';
@import '@oruga-ui/oruga/src/scss/utilities/variables.scss';
@import '@oruga-ui/oruga/src/scss/utilities/animations.scss';
@import '@oruga-ui/oruga/src/scss/utilities/helpers.scss';

$button-background-color: red !default;
$button-color: black !default;
// override another variables in here

@import '@oruga-ui/oruga/src/scss/components/button.scss';

// custom classes in here

should work with scoped components. the order was:

1. their utilities/mixins
2. override their variables
3. single component
4. last, override with classes in case needed

wrong order will won't work as expected

[codeclimate]

Code Climate has analyzed commit f279921 and detected 0 issues on this pull request.

View more on Code Climate.

[roiLeo]

Thanks for your help! I'm not really a fan of the current solution, but it look like it's working (don't work when using scoped scss in NeoDropdown component)

[preschian]

Thanks for your help! I'm not really a fan of the current solution, but it look like it's working (don't work when using scoped scss in NeoDropdown component)

yes, would be happy if you found a cleaner solution. that's my approach in the past when I'm wrapping https://ant.design/ components

[yangwao]

I'm not really a fan of the current solution

what would be better solution?

[roiLeo]

what would be better solution?

IMO there must be a better way to configure this stuff.
We could try to create a single file outside histoire components in which we override some sass variable. (like this)

otherwise we should really stop using oruga outside libs/ui folder

[yangwao]

oh okay, for now we can merge then?

[roiLeo]

oh okay, for now we can merge then?

I think it's good to go, don't mind failing test

[yangwao]

let's see what we can do with this