Merge branch 'develop' of https://github.com/public-ui/kolibri into v…

…2/6050_bmf-scss-refactor
public-ui · Mar 8, 2024 · 6982d44 · 6982d44
1 parent faf6e98
commit 6982d44
Show file tree

Hide file tree

Showing 125 changed files with 8,505 additions and 4,449 deletions.
diff --git a/packages/components/src/components/@shared/form-field-msg.tsx b/packages/components/src/components/@shared/form-field-msg.tsx
@@ -10,7 +10,7 @@ type FormFieldMsgProps = {
 };
 
 export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _error, _hideError, _id }) => (
-	<kol-alert
+	<kol-alert-wc
 		/**
 		 * This message is read out by screen readers if the input field
 		 * refers to the message using the <code>aria-describedby</code>
@@ -27,5 +27,5 @@ export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _
 		}}
 	>
 		{_error}
-	</kol-alert>
+	</kol-alert-wc>
 );
diff --git a/packages/components/src/components/@shared/kol-alert-mixin.scss b/packages/components/src/components/@shared/kol-alert-mixin.scss
@@ -0,0 +1,24 @@
+@import '../style';
+@import '../host-display-block';
+
+@mixin kol-alert-styles {
+	@layer kol-component {
+		.kol-alert-wc {
+			display: grid;
+		}
+
+		.kol-alert-wc .heading {
+			display: flex;
+			place-items: center;
+		}
+
+		.kol-alert-wc .heading > div {
+			flex-grow: 1;
+		}
+
+		.close {
+			/* Visible with forced colors */
+			outline: transparent solid 1px;
+		}
+	}
+}
diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
@@ -100,6 +100,8 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 ### Used by
 
 - [kol-alert](.)
+- kol-input
+- [kol-input-radio](../input-radio)
 
 ### Depends on
 
@@ -119,6 +121,8 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
   kol-alert --> kol-alert-wc
+  kol-input --> kol-alert-wc
+  kol-input-radio --> kol-alert-wc
   style kol-alert-wc stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/alert/style.scss b/packages/components/src/components/alert/style.scss
@@ -1,22 +1,3 @@
-@import '../style';
-@import '../host-display-block';
+@import '../@shared/kol-alert-mixin.scss';
 
-@layer kol-component {
-	.kol-alert-wc {
-		display: grid;
-	}
-
-	.kol-alert-wc .heading {
-		display: flex;
-		place-items: center;
-	}
-
-	.kol-alert-wc .heading > div {
-		flex-grow: 1;
-	}
-
-	.close {
-		/* Visible with forced colors */
-		outline: transparent solid 1px;
-	}
-}
+@include kol-alert-styles;
diff --git a/packages/components/src/components/input-checkbox/checkbox.scss b/packages/components/src/components/input-checkbox/checkbox.scss
@@ -15,6 +15,7 @@
 			position: absolute;
 			z-index: 1;
 		}
+
 		&:not(.checked):not(.indeterminate) .icon::part(icon) {
 			display: none;
 		}

diff --git a/packages/components/src/components/input-checkbox/readme.md b/packages/components/src/components/input-checkbox/readme.md
@@ -111,12 +111,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-checkbox/style.scss b/packages/components/src/components/input-checkbox/style.scss
@@ -3,3 +3,6 @@
 @import 'button';
 @import 'checkbox';
 @import 'switch';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
diff --git a/packages/components/src/components/input-color/readme.md b/packages/components/src/components/input-color/readme.md
@@ -97,12 +97,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-color/style.scss b/packages/components/src/components/input-color/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 	div.input {

diff --git a/packages/components/src/components/input-date/readme.md b/packages/components/src/components/input-date/readme.md
@@ -132,12 +132,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-date/style.scss b/packages/components/src/components/input-date/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 	.kol-input-number {

diff --git a/packages/components/src/components/input-email/readme.md b/packages/components/src/components/input-email/readme.md
@@ -101,12 +101,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-email/style.scss b/packages/components/src/components/input-email/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 }
diff --git a/packages/components/src/components/input-file/readme.md b/packages/components/src/components/input-file/readme.md
@@ -92,12 +92,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 	label input[type='file']::-webkit-file-upload-button {

diff --git a/packages/components/src/components/input-number/readme.md b/packages/components/src/components/input-number/readme.md
@@ -91,12 +91,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-number/style.scss b/packages/components/src/components/input-number/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 }
diff --git a/packages/components/src/components/input-password/readme.md b/packages/components/src/components/input-password/readme.md
@@ -91,12 +91,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 }
diff --git a/packages/components/src/components/input-radio/readme.md b/packages/components/src/components/input-radio/readme.md
@@ -116,23 +116,22 @@ Type: `Promise<W3CInputValue | undefined>`
 ### Depends on
 
 - kol-input
-- [kol-alert](../alert)
+- [kol-alert-wc](../alert)
 
 ### Graph
 
 ```mermaid
 graph TD;
   kol-input-radio --> kol-input
-  kol-input-radio --> kol-alert
+  kol-input-radio --> kol-alert-wc
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-radio/style.scss b/packages/components/src/components/input-radio/style.scss
@@ -1,4 +1,7 @@
 @import '../input';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 	:host {

diff --git a/packages/components/src/components/input-range/readme.md b/packages/components/src/components/input-range/readme.md
@@ -102,12 +102,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 	.inputs-wrapper {

diff --git a/packages/components/src/components/input-text/readme.md b/packages/components/src/components/input-text/readme.md
@@ -112,12 +112,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/input-text/style.scss b/packages/components/src/components/input-text/style.scss
@@ -1,4 +1,7 @@
 @import '../input-line';
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
 
 @layer kol-component {
 }
diff --git a/packages/components/src/components/input/style.scss b/packages/components/src/components/input/style.scss
@@ -0,0 +1,3 @@
+@import '../@shared/kol-alert-mixin.scss';
+
+@include kol-alert-styles;
diff --git a/packages/components/src/components/pagination/readme.md b/packages/components/src/components/pagination/readme.md
@@ -84,8 +84,7 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-alert --> kol-alert-wc
+  kol-input --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/select/readme.md b/packages/components/src/components/select/readme.md
@@ -144,12 +144,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/table/readme.md b/packages/components/src/components/table/readme.md
@@ -212,8 +212,7 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-alert --> kol-alert-wc
+  kol-input --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
@@ -106,12 +106,11 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
+  kol-input --> kol-alert-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon

diff --git a/packages/themes/bmf/src/components/abbr.scss b/packages/themes/bmf/src/components/abbr.scss
@@ -3,4 +3,5 @@
 		border-bottom: dashed var(--color-black) 1px;
 		text-decoration: none !important;
 	}
-}
+
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		@import '../@shared/kol-alert-mixin.scss';

		@include kol-alert-styles;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,5 @@ @@
     		border-bottom: dashed var(--color-black) 1px;
     		text-decoration: none !important;
     	}
-    }
+    }