From 489f14960607a259bbcd371abb961d77f971862a Mon Sep 17 00:00:00 2001 From: Yauheni Prakopchyk Date: Thu, 20 Jul 2023 04:40:13 +0400 Subject: [PATCH] feat: badge fixes --- .../ui-elements/badge/api-description.ts | 2 +- .../ui-elements/badge/examples/Dot.vue | 4 ++ .../ui-elements/badge/examples/Offset.vue | 38 ---------- .../ui-elements/badge/examples/Overlap.vue | 70 +++++++++++-------- .../ui-elements/badge/examples/Placement.vue | 2 + .../badge/examples/WithOtherComponents.vue | 17 +++-- .../page-config/ui-elements/badge/index.ts | 18 ++--- .../src/components/va-badge/_variables.scss | 2 +- 8 files changed, 61 insertions(+), 92 deletions(-) delete mode 100644 packages/docs/page-config/ui-elements/badge/examples/Offset.vue diff --git a/packages/docs/page-config/ui-elements/badge/api-description.ts b/packages/docs/page-config/ui-elements/badge/api-description.ts index b7d392950f..0587465aad 100644 --- a/packages/docs/page-config/ui-elements/badge/api-description.ts +++ b/packages/docs/page-config/ui-elements/badge/api-description.ts @@ -4,7 +4,7 @@ export default defineApiDescription({ props: { text: "Badge text.", overlap: "Allows badge to overlap with element.", - transparent: "Makes badge semi-transparent.", + transparent: "(Deprecated) Makes badge semi-transparent.", multiLine: "Badge text will wrap to next line.", visibleEmpty: "Badge will be shown even when there is no text.", dot: "Shows dot instead of full badge. Useful to notify user without grabbing too much attention.", diff --git a/packages/docs/page-config/ui-elements/badge/examples/Dot.vue b/packages/docs/page-config/ui-elements/badge/examples/Dot.vue index 496b5f4218..a5814c50bc 100644 --- a/packages/docs/page-config/ui-elements/badge/examples/Dot.vue +++ b/packages/docs/page-config/ui-elements/badge/examples/Dot.vue @@ -3,6 +3,7 @@ class="mr-6" overlap dot + :offset="[-2, 2]" > + diff --git a/packages/docs/page-config/ui-elements/badge/index.ts b/packages/docs/page-config/ui-elements/badge/index.ts index 4b2adb16bf..6892f3a82a 100644 --- a/packages/docs/page-config/ui-elements/badge/index.ts +++ b/packages/docs/page-config/ui-elements/badge/index.ts @@ -4,7 +4,7 @@ import apiDescription from "./api-description"; export default definePageConfig({ blocks: [ block.title("Badge"), - block.paragraph("VaBadge is used to highlight information related to other element, such as missed notifications near the user's avatar."), + block.paragraph("VaBadge is used to showcase information related to other element, such as missed notifications near the user's avatar."), block.component("Playground"), @@ -16,7 +16,7 @@ export default definePageConfig({ block.example("Placement", { title: "Placement", - description: "The `placement` allows you to set placement of the badge relatively to the base element. Available values: `top/bottom/left/right - start/center/end`. The `offset` prop allows you to amend the selected position - it moves badge forward or backward relatively to the main axis (`top/bottom/left/right`)." + description: "The `placement` prop allows you to set placement of the badge relatively to the base element. Available values are: `top/bottom/left/right - start/center/end`. The `offset` prop allows you to amend the selected position - it moves badge forward or backward relatively to the main axis (`top/bottom/left/right`)." }), block.example("Color", { @@ -26,12 +26,7 @@ export default definePageConfig({ block.example("Dot", { title: "Dot", - description: "The `dot` property puts the component in a minimalist mode in order to accentuate the base element." - }), - - block.example("Offset", { - title: "Offset", - description: "The `offset` is used to set a distance between the base element and the badge." + description: "The `dot` property minimizes badge to accentuate the base element." }), block.example("Overlap", { @@ -41,12 +36,7 @@ export default definePageConfig({ block.example("WithOtherComponents", { title: "Usage with other components", - description: "By combining a component with others, you can add information to them or focus attention on them." - }), - - block.example("NoContent", { - title: "Without content", - description: "By default, the component is hidden unless content is passed to it via a slot or the `text` property. The `visible-empty` property allows displaying an empty component as a colored square." + description: "By combining a badge with other components, you can add information or focus attention." }), block.subtitle("API"), diff --git a/packages/ui/src/components/va-badge/_variables.scss b/packages/ui/src/components/va-badge/_variables.scss index 035ee69872..84078a55ab 100644 --- a/packages/ui/src/components/va-badge/_variables.scss +++ b/packages/ui/src/components/va-badge/_variables.scss @@ -2,7 +2,7 @@ :host { /* General */ --va-badge-py: 0; - --va-badge-font-size: 0.625rem; + --va-badge-font-size: 0.563rem; --va-badge-border: 0.125rem; --va-badge-size: calc(var(--va-badge-font-size) * var(--va-badge-line-height) + var(--va-badge-border) * 2); --va-badge-line-height: 1.4;