diff --git a/.changeset/cool-socks-fold.md b/.changeset/cool-socks-fold.md
new file mode 100644
index 0000000000..c5cc0fda8b
--- /dev/null
+++ b/.changeset/cool-socks-fold.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**divider**: add new border style dashed
diff --git a/docs/stories/components/bal-divider/bal-divider.mdx b/docs/stories/components/bal-divider/bal-divider.mdx
index 42841d9741..4662fa03ef 100644
--- a/docs/stories/components/bal-divider/bal-divider.mdx
+++ b/docs/stories/components/bal-divider/bal-divider.mdx
@@ -26,6 +26,12 @@ Change the layout of the divider to vertical to use them in a horizontal stack c
+
+
+To divide inner section the dashed version can be used.
+
+
+
{/* ------------------------------------------------------ */}
## Component API
diff --git a/docs/stories/components/bal-divider/bal-divider.stories.ts b/docs/stories/components/bal-divider/bal-divider.stories.ts
index 5a688d8c5b..4cac8918f8 100644
--- a/docs/stories/components/bal-divider/bal-divider.stories.ts
+++ b/docs/stories/components/bal-divider/bal-divider.stories.ts
@@ -23,6 +23,12 @@ const Story = StoryFactory(meta)
export const Basic = Story()
+export const Dashed = Story({
+ args: {
+ borderStyle: 'dashed'
+ }
+})
+
export const LayoutVertical = Story({
args: {
layout: 'vertical',
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 11ab6a1c51..cf5e6f3ab5 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -955,6 +955,10 @@ export namespace Components {
"value"?: string;
}
interface BalDivider {
+ /**
+ * Defines the color of the separator line.
+ */
+ "borderStyle": BalProps.BalDividerBorderStyle;
/**
* Defines the color of the separator line.
*/
@@ -6133,6 +6137,10 @@ declare namespace LocalJSX {
"value"?: string;
}
interface BalDivider {
+ /**
+ * Defines the color of the separator line.
+ */
+ "borderStyle"?: BalProps.BalDividerBorderStyle;
/**
* Defines the color of the separator line.
*/
diff --git a/packages/core/src/components/bal-divider/bal-divider.interfaces.ts b/packages/core/src/components/bal-divider/bal-divider.interfaces.ts
index 5e4e80f308..8f1991bb75 100644
--- a/packages/core/src/components/bal-divider/bal-divider.interfaces.ts
+++ b/packages/core/src/components/bal-divider/bal-divider.interfaces.ts
@@ -5,6 +5,7 @@
namespace BalProps {
export type BalDividerLayout = 'horizontal' | 'vertical' | ''
+ export type BalDividerBorderStyle = 'solid' | 'dashed' | ''
export type BalDividerColor =
| 'primary'
| 'primary-light'
diff --git a/packages/core/src/components/bal-divider/bal-divider.sass b/packages/core/src/components/bal-divider/bal-divider.sass
index 813260d9d9..35c1001427 100644
--- a/packages/core/src/components/bal-divider/bal-divider.sass
+++ b/packages/core/src/components/bal-divider/bal-divider.sass
@@ -46,6 +46,34 @@
align-self: stretch
width: var(--bal-divider-border-width)
//
+ // border styles
+ &--border-style-dashed#{&}--color-primary
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-primary-light
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-primary-dark
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-grey-light
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-grey
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-grey-dark
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey-dark) 0px, var (--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-warning
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-warning) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-success
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-success) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-danger
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-danger-dark
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-danger-darker
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger-darker) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-white
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-white) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ &--border-style-dashed#{&}--color-light-blue
+ background: repeating-linear-gradient( 90deg, var(--bal-divider-background-light-blue) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px )
+ //
// horizontal spaces
&--space-none
margin: 0
diff --git a/packages/core/src/components/bal-divider/bal-divider.tsx b/packages/core/src/components/bal-divider/bal-divider.tsx
index 20aab12a3f..aecf133efc 100644
--- a/packages/core/src/components/bal-divider/bal-divider.tsx
+++ b/packages/core/src/components/bal-divider/bal-divider.tsx
@@ -35,6 +35,11 @@ export class Divider implements ComponentInterface, Loggable {
*/
@Prop() color: BalProps.BalDividerColor = 'grey'
+ /**
+ * Defines the color of the separator line.
+ */
+ @Prop() borderStyle: BalProps.BalDividerBorderStyle = 'solid'
+
/**
* RENDER
* ------------------------------------------------------
@@ -45,6 +50,7 @@ export class Divider implements ComponentInterface, Loggable {
const layout = !!this.layout
const space = !!this.space
const color = !!this.color
+ const borderStyle = !!this.borderStyle
return (