refactor: use helper-text-component

telekom · May 31, 2023 · ec5549b · ec5549b
1 parent 4ec19b2
commit ec5549b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 49 deletions.
diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css
@@ -126,12 +126,6 @@ duet-date-picker .duet-date__toggle:active scale-icon-content-calendar {
   color: var(--telekom-color-text-and-icon-functional-informational);
 }
 
-.scale-date-picker .date-picker__meta {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--telekom-spacing-unit-x1);
-}
-
 .scale-date-picker .date-picker__label {
   top: -2px;
   color: var(--telekom-color-text-and-icon-additional);
@@ -206,9 +200,6 @@ duet-date-picker .duet-date__input:focus::placeholder {
   outline-offset: 1px;
   box-shadow: none;
 }
-.scale-date-picker--status-error .date-picker__helper-text {
-  color: var(--telekom-color-text-and-icon-functional-danger);
-}
 
 .scale-date-picker--status-error .duet-date__toggle {
   width: 47px;
@@ -237,9 +228,7 @@ duet-date-picker .duet-date__input:focus::placeholder {
   scale-icon-content-calendar {
   color: var(--telekom-color-text-and-icon-disabled);
 }
-.scale-date-picker.scale-date-picker--disabled .date-picker__helper-text {
-  color: var(--telekom-color-text-and-icon-disabled);
-}
+
 .scale-date-picker.scale-date-picker--disabled .date-picker__label {
   color: var(--telekom-color-text-and-icon-disabled);
 }
@@ -399,16 +388,21 @@ duet-date-picker .duet-date__day:hover::before {
   color: var(--telekom-color-text-and-icon-white-standard);
 }
 
+duet-date-picker .scale-date-picker__popup-heading {
+  padding: var(--telekom-spacing-unit-x2);
+}
+
+scale-date-picker .has-helper-text scale-helper-text {
+  display: block;
+  margin-top: var(--telekom-spacing-unit-x1);
+}
+
 @media (max-width: 35.9375em) and (orientation: landscape) {
   duet-date-picker .duet-date__dialog-content {
     zoom: 70%;
   }
 }
 
-duet-date-picker .scale-date-picker__popup-heading {
-  padding: var(--telekom-spacing-unit-x2);
-}
-
 @media (max-width: 35.9375em) {
   duet-date-picker .scale-date-picker__popup-heading {
     display: none;

diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
@@ -149,6 +149,8 @@ export class DatePicker {
   /** @deprecated */
   @Prop() size?: string;
 
+  @Prop() variant?: 'informational' | 'warning' | 'danger' | 'success' =
+    'informational';
   /** Whether the input element has focus */
   @State() hasFocus: boolean = false;
 
@@ -439,7 +441,6 @@ export class DatePicker {
   }
 
   render() {
-    const helperTextId = `helper-message-${this.internalId}`;
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
@@ -450,7 +451,8 @@ export class DatePicker {
             this.invalid && `scale-date-picker--status-error`,
             this.hasFocus && 'scale-date-picker--focus',
             this.disabled && 'scale-date-picker--disabled',
-            this.hasValue && 'animated'
+            this.hasValue && 'animated',
+            this.helperText && 'has-helper-text'
           )}
         >
           <label class="date-picker__label" htmlFor={this.identifier}>
@@ -485,15 +487,11 @@ export class DatePicker {
               (this.duetInput = element)
             }
           ></duet-date-picker>
-          {!!this.helperText && (
-            <div
-              class="date-picker__meta"
-              id={helperTextId}
-              aria-live="polite"
-              aria-relevant="additions removals"
-            >
-              <div class="date-picker__helper-text">{this.helperText}</div>
-            </div>
+          {this.helperText && (
+            <scale-helper-text
+              helperText={this.helperText}
+              variant={this.invalid ? 'danger' : this.variant}
+            ></scale-helper-text>
           )}
         </div>
       </Host>