From 98e1d1b90e279fd18bf8359da4668251fe34f04c Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 7 Sep 2023 15:52:25 +0200 Subject: [PATCH] docs: remove `New` badges from edge docs --- docs/content/1.getting-started/3.theming.md | 8 +++----- docs/content/2.elements/3.avatar.md | 4 +--- docs/content/2.elements/5.button.md | 4 +--- docs/content/3.forms/10.form.md | 4 +--- docs/content/5.navigation/4.tabs.md | 6 ++---- docs/content/6.overlays/1.modal.md | 4 +--- 6 files changed, 9 insertions(+), 21 deletions(-) diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md index 0d954fd1..3c4ede0c 100644 --- a/docs/content/1.getting-started/3.theming.md +++ b/docs/content/1.getting-started/3.theming.md @@ -1,7 +1,5 @@ --- description: 'Learn how to customize the look and feel of the components.' -navigation: - badge: 'New' --- ## Overview @@ -39,7 +37,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`. :: -The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="New" class="!rounded-full" variant="subtle"} +The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. ### Smart Safelisting @@ -109,7 +107,7 @@ Each component has a `ui` prop that allows you to customize everything specifica You can find the default classes for each component under the `Preset` section. :: -Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. :u-badge{label="New" class="!rounded-full" variant="subtle"} +Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. For example, the default preset of the `FormGroup` component looks like this: @@ -144,7 +142,7 @@ You can also use the `class` attribute to add classes to the component. ``` -Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. :u-badge{label="New" class="!rounded-full" variant="subtle"} +Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. ### Default values diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md index aceb6680..e881bf3e 100644 --- a/docs/content/2.elements/3.avatar.md +++ b/docs/content/2.elements/3.avatar.md @@ -4,8 +4,6 @@ links: - label: GitHub icon: i-simple-icons-github to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue -navigation: - badge: 'New' --- ## Usage @@ -55,7 +53,7 @@ baseProps: If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`. -#### Icon :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +#### Icon Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background. diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md index 6f87b52b..0517d8b5 100644 --- a/docs/content/2.elements/5.button.md +++ b/docs/content/2.elements/5.button.md @@ -4,8 +4,6 @@ links: - label: GitHub icon: i-simple-icons-github to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue -navigation: - badge: 'New' --- ## Usage @@ -278,7 +276,7 @@ excludedProps: To stack buttons as a group, use the `ButtonGroup` component. - To size all the buttons equally, pass the `size` prop -- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"} +- To change the orientation of the buttons, set the `orientation` prop to `vertical` - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow` ::component-card{slug="ButtonGroup"} diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md index 16c4314d..330f22c9 100644 --- a/docs/content/3.forms/10.form.md +++ b/docs/content/3.forms/10.form.md @@ -4,8 +4,6 @@ links: - label: GitHub icon: i-simple-icons-github to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue -navigation: - badge: 'New' --- ## Usage @@ -234,7 +232,7 @@ async function submit (event: FormSubmitEvent) { ``` :: -### Valibot :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Valibot ::component-example #default diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md index 044b1f98..9f25dfbb 100644 --- a/docs/content/5.navigation/4.tabs.md +++ b/docs/content/5.navigation/4.tabs.md @@ -4,8 +4,6 @@ links: - label: GitHub icon: i-simple-icons-github to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue -navigation: - badge: 'New' --- ## Usage @@ -87,7 +85,7 @@ const items = [...] This will have no effect if you are using a `v-model` to control the selected index. :: -### Listen to changes :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Listen to changes You can listen to changes by using the `@change` event. The event will emit the index of the selected item. @@ -113,7 +111,7 @@ function onChange (index) { ``` :: -### Control the selected index :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Control the selected index Use a `v-model` to control the selected index. diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md index e1eb5280..21476648 100644 --- a/docs/content/6.overlays/1.modal.md +++ b/docs/content/6.overlays/1.modal.md @@ -7,8 +7,6 @@ links: - label: 'Dialog' icon: i-simple-icons-headlessui to: 'https://headlessui.com/vue/dialog' -navigation: - badge: 'New' --- ## Usage @@ -180,7 +178,7 @@ defineShortcuts({ ``` -### Fullscreen :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Fullscreen Set the `fullscreen` prop to `true` to enable it.