fix(divider): fix divider props

Signed-off-by: Leonid Romanov <[email protected]>
acronis · Aug 20, 2024 · 995a17c · 995a17c
1 parent 772e161
commit 995a17c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 25 deletions.
diff --git a/packages/demos/src/divider/DividerBasic.vue b/packages/demos/src/divider/DividerBasic.vue
@@ -6,6 +6,6 @@
   <p>Some content to fill</p>
   <AcvDivider />
   <p>Some content to fill</p>
-  <AcvDivider>Insert text</AcvDivider>
+  <AcvDivider />
   <p>Some content to fill</p>
 </template>
diff --git a/packages/demos/src/divider/DividerVertical.vue b/packages/demos/src/divider/DividerVertical.vue
@@ -1,9 +1,13 @@
+<script setup>
+  import AcvDivider from '@/components/divider/divider.vue';
+</script>
+
 <template>
   <p>
     Some content
-    <Divider vertical />
+    <AcvDivider vertical />
     Some content
-    <Divider vertical />
+    <AcvDivider vertical />
     Some content
   </p>
 </template>
diff --git a/packages/documentation/components/divider/divider.doc.md b/packages/documentation/components/divider/divider.doc.md
@@ -2,7 +2,7 @@ Used to group content in horizontal or vertical lists,
 and also serves as a visual separator between logical blocks within the interface.
 
 :::info Figma mockups
-https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=123-8541
+https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=123-8541&m=dev
 :::
 
 ## Basic usage
@@ -13,23 +13,20 @@ https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=123-8541
 <<< ../../../demos/src/divider/DividerBasic.vue
 :::
 
-## With text
-
-You can place text into default dividers slot and use `text-position` property
-to align it in a _center_, _left_ or _right_ position.
-
-<DividerVariants />
-
-## Colors
-
-You can use `color` property to highlight the divider with a specific color.
-
-<DividerColors />
+[//]: # '## Colors'
+[//]: #
+[//]: # 'You can use `color` property to highlight the divider with a specific color.'
+[//]: #
+[//]: # '<DividerColors />'
 
 ## On backgrounds
 
 <DividerBackground />
 
+::: details Source code
+<<< ../../../demos/src/divider/DividerBackground.vue
+:::
+
 ## Accessibility
 
 Separators must be ignored by the screenreader.

diff --git a/packages/documentation/components/divider/divider.md b/packages/documentation/components/divider/divider.md
@@ -11,12 +11,12 @@ description: This file is generated automatically from the source code. Changes
 
 ## Props
 
-| Prop name    | Description                         | Type                      | Values                                                                    | Default |
-| ------------ | ----------------------------------- | ------------------------- | ------------------------------------------------------------------------- | ------- |
-| vertical     | Orientation of the Divider          | boolean                   | -                                                                         |         |
-| textPosition | Position of the text in the Divider | AcvDividerTextPosition    | -                                                                         |         |
-| margin       | Margin of the Divider               | string \| number          | -                                                                         |         |
-| color        | Color of the Divider                | ColorBrand \| ColorStatus | 'primary', 'secondary', 'neutral', 'success', 'warning', 'danger', 'info' | 'brand' |
+| Prop name    | Description                           | Type                      | Values                                                                    | Default |
+| ------------ | ------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | ------- |
+| vertical     | Orientation and height of the Divider | boolean \| number         | -                                                                         |         |
+| textPosition | Position of the text in the Divider   | AcvDividerTextPosition    | -                                                                         |         |
+| margin       | Margin of the Divider                 | string \| number          | -                                                                         |         |
+| color        | Color of the Divider                  | ColorBrand \| ColorStatus | 'primary', 'secondary', 'neutral', 'success', 'warning', 'danger', 'info' | 'brand' |
 
 ## Slots
 

diff --git a/packages/ui/src/components/divider/divider.ts b/packages/ui/src/components/divider/divider.ts
@@ -1,12 +1,12 @@
-import type { ColorBrand, ColorStatus } from '../../utils/color.ts';
+import type { ColorBrand, ColorStatus } from '@/utils/color.ts';
 
 export type AcvDividerTextPosition = 'center' | 'left' | 'right';
 
 export interface AcvDividerProps {
   /**
-   * Orientation of the Divider
+   * Orientation and height of the Divider
    */
-  vertical?: boolean
+  vertical?: boolean | number
 
   /**
    * Position of the text in the Divider