Revert "fix(Input): [BLA-869] Inputs with a Pre- and Suffix (Improvem…

…ent)" This reverts commit 42e2598.
otto-de · Sep 4, 2024 · da0e187 · da0e187
1 parent b933859
commit da0e187
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 31 deletions.
diff --git a/...ages/core-components/__snapshots__/components-form-input--prefix-and-suffix.png b/...ages/core-components/__snapshots__/components-form-input--prefix-and-suffix.png
diff --git a/packages/core-components/__snapshots__/components-form-input--prefix.png b/packages/core-components/__snapshots__/components-form-input--prefix.png
diff --git a/packages/core-components/src/components/input-group/__snapshots__/input-group.spec.tsx.snap b/packages/core-components/src/components/input-group/__snapshots__/input-group.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`B2B Input Group should not render a group error if the group is invalid
       </b2b-input-label>
       <div class="b2b-input__wrapper b2b-input__wrapper--disabled">
         <slot name="start"></slot>
-        <input class="b2b-input__native-input b2b-input__native-input--align-left" disabled="" type="text">
+        <input class="b2b-input__native-input" disabled="" type="text">
         <slot name="end"></slot>
       </div>
     </mock:shadow-root>
@@ -70,7 +70,7 @@ exports[`B2B Input Group should render a group error if one is specified and the
       </b2b-input-label>
       <div class="b2b-input__wrapper">
         <slot name="start"></slot>
-        <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+        <input class="b2b-input__native-input" type="text">
         <slot name="end"></slot>
       </div>
     </mock:shadow-root>
@@ -121,7 +121,7 @@ exports[`B2B Input Group should render a group hint if it is specified 1`] = `
       </b2b-input-label>
       <div class="b2b-input__wrapper">
         <slot name="start"></slot>
-        <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+        <input class="b2b-input__native-input" type="text">
         <slot name="end"></slot>
       </div>
     </mock:shadow-root>
@@ -169,7 +169,7 @@ exports[`B2B Input Group should render content wrapped in the input group 1`] =
       </b2b-input-label>
       <div class="b2b-input__wrapper">
         <slot name="start"></slot>
-        <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+        <input class="b2b-input__native-input" type="text">
         <slot name="end"></slot>
       </div>
     </mock:shadow-root>

diff --git a/packages/core-components/src/components/input/__snapshots__/input.spec.tsx.snap b/packages/core-components/src/components/input/__snapshots__/input.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`should apply an error style to the host element if invalid is set to tr
     </b2b-input-label>
     <div class="b2b-input__wrapper">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+      <input class="b2b-input__native-input" type="text">
       <slot name="end"></slot>
     </div>
     <span>
@@ -26,7 +26,7 @@ exports[`should render a hint if invalid and disabled are true at the same time
     </b2b-input-label>
     <div class="b2b-input__wrapper b2b-input__wrapper--disabled">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" disabled="" type="text">
+      <input class="b2b-input__native-input" disabled="" type="text">
       <slot name="end"></slot>
     </div>
     <span>
@@ -44,7 +44,7 @@ exports[`should render a hint message if a hint string is specified 1`] = `
     </b2b-input-label>
     <div class="b2b-input__wrapper">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+      <input class="b2b-input__native-input" type="text">
       <slot name="end"></slot>
     </div>
     <span>
@@ -62,7 +62,7 @@ exports[`should render an error message if an error is specified and the input i
     </b2b-input-label>
     <div class="b2b-input__wrapper">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+      <input class="b2b-input__native-input" type="text">
       <slot name="end"></slot>
     </div>
     <span>
@@ -80,7 +80,7 @@ exports[`should render the input 1`] = `
     </b2b-input-label>
     <div class="b2b-input__wrapper">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" type="text">
+      <input class="b2b-input__native-input" type="text">
       <slot name="end"></slot>
     </div>
   </mock:shadow-root>
@@ -95,7 +95,7 @@ exports[`should render with a placeholder 1`] = `
     </b2b-input-label>
     <div class="b2b-input__wrapper">
       <slot name="start"></slot>
-      <input class="b2b-input__native-input b2b-input__native-input--align-left" placeholder="test placeholder" type="text">
+      <input class="b2b-input__native-input" placeholder="test placeholder" type="text">
       <slot name="end"></slot>
     </div>
   </mock:shadow-root>

diff --git a/packages/core-components/src/components/input/input.scss b/packages/core-components/src/components/input/input.scss
@@ -42,7 +42,7 @@
     .border {
       border-left: 1px solid var(--b2b-color-grey-300);
       height: 100%;
-      margin: 0 8px;
+      margin: 0 12px;
     }
 
     .b2b-input__native-input {
@@ -61,18 +61,6 @@
       &::placeholder {
         color: var(--b2b-color-grey-300);
       }
-
-      &--align-left {
-        text-align: left;
-      }
-
-      &--align-right {
-        text-align: right;
-      }
-
-      &--align-center {
-        text-align: center;
-      }
     }
   }
 

diff --git a/packages/core-components/src/components/input/input.tsx b/packages/core-components/src/components/input/input.tsx
@@ -66,9 +66,6 @@ export class InputComponent {
   /** @internal Whether the parent input group is disabled. Per default, it is false. */
   @Prop() groupDisabled = false;
 
-  /** The alignment of the text. */
-  @Prop() inputTextAlign: 'left' | 'right' | 'center' = 'left';
-
   /** Emits whenever the input receives focus. */
   @Event({ eventName: 'b2b-focus' })
   b2bFocus: EventEmitter<FocusEvent>;
@@ -178,10 +175,7 @@ export class InputComponent {
           <slot name="start"></slot>
           {this.hasTextPrefix && <div class="border"></div>}
           <input
-            class={{
-              'b2b-input__native-input': true,
-              ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
-            }}
+            class="b2b-input__native-input"
             aria-labelledby={this.name}
             type={this.type}
             placeholder={this.placeholder}

diff --git a/packages/core-components/src/html/form.html b/packages/core-components/src/html/form.html
@@ -233,7 +233,6 @@
         label="Label"
         name="myInput"
         value="I have a value!"
-        input-text-align="right"
         ><b2b-icon icon="b2b_icon-search" slot="end" clickable></b2b-icon
       ></b2b-input>
       <b2b-input