Skip to content

Conversation

nei1ee
Copy link
Contributor

@nei1ee nei1ee commented Sep 19, 2022

I checked the following components, there is no any side effects when adding Add display: inline-block to extraProperties in presetIcons. But I have a question, vitepress has its own default style that overrides anu-vue, should we add a new playground to check it? For example, in vitepress, input supports dark mode, but I don't support it in my own project. In fact, vitepress configures the default background of input to be transparent, which will confuse us into thinking that anu-vue also supports it.

  • Alert
  • Avatar
  • Button
  • Card
  • Checkbox
  • Input
  • List
  • Select
  • Switch
  • Table

@netlify
Copy link

netlify bot commented Sep 19, 2022

Deploy Preview for anu-vue ready!

Name Link
🔨 Latest commit 0a80169
🔍 Latest deploy log https://app.netlify.com/sites/anu-vue/deploys/63282b650eb1dd00082aa22b
😎 Deploy Preview https://deploy-preview-16--anu-vue.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@jd-solanki
Copy link
Owner

Hey 👋🏻

Thanks for this PR :)

should we add a new playground to check it?

Yes, We do have playground.md file if you noticed but it is .md file we don't get good TS support while playing. For now we need .vue file as a playground. I haven't spent much time on it but it's on my mind.

Regarding VitePress default styles

Yes, you are 💯 true here. To mitigate this best we can do is create our own VitePress theme or build the docs ourself. But both of them are overkill for now. The best I can think of is using vp-raw in demos. We already used this in list & card demos to get rid of default styling from VitePress.

I am planning to create a custom container for our docs which use vp-raw that will wrap our demo. Hence, no VitePress style will affect our demo. (We have to do the same in the playground as well).

::: demo

demo description

::: raw

<DemoInputBasic />

:::

::: code

<<<@/...

:::

:::

This will require a few hours to convert all demos.

@jd-solanki
Copy link
Owner

Moreover, to use that vp-raw container we also have to update the vitepress to the latest & require opt-in as mentioned in docs.

@jd-solanki
Copy link
Owner

@nei1ee
Copy link
Contributor Author

nei1ee commented Sep 19, 2022

Moreover, to use that vp-raw container we also have to update the vitepress to the latest & require opt-in as mentioned in docs.

That's so disappointing. Vitepress is still in the beta version, and there may be a breaking change in the future, which will increase costs.

@nei1ee
Copy link
Contributor Author

nei1ee commented Sep 19, 2022

Do we need inline-block now in https://github.com/jd-solanki/anu/blob/49071628e12805944a67aa548cb6b28a7b47873e/packages/anu-vue/src/components/base-input/ABaseInput.tsx on line 67 & 87?

No longer needed. UnoCSS will generate inline-block for icon if add display: inline-block to extraProperties in presetIcons.

@jd-solanki jd-solanki linked an issue Sep 19, 2022 that may be closed by this pull request
4 tasks
@jd-solanki jd-solanki changed the title feat(presetIcons)!: add display: inline-block default, resolve #9 feat!: assume display: inline-block as extraProperty in presetIcon Sep 19, 2022
@jd-solanki jd-solanki merged commit facce15 into jd-solanki:main Sep 19, 2022
@nei1ee nei1ee deleted the presetIcons branch September 19, 2022 09:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🏗️ Check and add display: inline-block in extraProperties of presetIcons
2 participants