feat: update resize handle custom design

sbb-design-systems · Mar 25, 2024 · 28ae767 · 28ae767
1 parent 5ced451
commit 28ae767
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss
@@ -45,6 +45,10 @@ sbb-form-field {
 
   textarea {
     @include scrollbar.scrollbar;
+
+    &::-webkit-resizer {
+      display: none;
+    }
   }
 
   &[negative] textarea {

diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
@@ -265,12 +265,24 @@
 }
 
 .sbb-form-field__select-input-icon {
-  @include sbb.absolute-center-y;
-
-  inset-inline-end: 0;
+  position: absolute;
   pointer-events: none;
   color: var(--sbb-form-field-arrow-color);
-  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);
+  z-index: 1;
+
+  :host(:not([data-input-type='textarea'])) & {
+    @include sbb.absolute-center-y;
+
+    inset-inline-end: 0;
+    margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);
+  }
+
+  :host([data-input-type='textarea']) & {
+    cursor: row-resize;
+    color: var(--sbb-color-smoke);
+    inset-block-end: 0;
+    inset-inline-end: #{sbb.px-to-rem-build(-7)};
+  }
 }
 
 .sbb-form-field__input-container {
@@ -430,39 +442,14 @@
     pointer-events: none;
     position: absolute;
     display: block;
-    width: var(--sbb-spacing-fixed-4x);
-    height: var(--sbb-spacing-fixed-4x);
+    width: #{sbb.px-to-rem-build(14)};
+    height: #{sbb.px-to-rem-build(12)};
     background-color: var(--sbb-form-field-background-color);
     inset-inline-end: #{sbb.px-to-rem-build(-4)};
     inset-block-end: #{sbb.px-to-rem-build(5)};
   }
 }
 
-:host([data-input-type='textarea']) .sbb-form-field__input {
-  &::before,
-  &::after {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    width: #{sbb.px-to-rem-build(6)};
-    height: #{sbb.px-to-rem-build(6)};
-    border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-smoke);
-    border-inline-start: var(--sbb-border-width-1x) solid var(--sbb-color-smoke);
-    inset-inline-end: #{sbb.px-to-rem-build(2)};
-    inset-block-end: #{sbb.px-to-rem-build(9)};
-    z-index: 1;
-  }
-
-  &::before {
-    margin-bottom: var(--sbb-spacing-fixed-1x);
-    transform: rotate(135deg);
-  }
-
-  &::after {
-    transform: rotate(-45deg);
-  }
-}
-
 .sbb-form-field__error {
   display: flex;
   min-height: var(--form-field-error-min-height);

diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts
@@ -497,9 +497,11 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
             <div class="sbb-form-field__input">
               <slot @slotchange=${this._onSlotInputChange}></slot>
             </div>
-            ${['SELECT', 'SBB-SELECT'].includes(this._input?.tagName as string)
+            ${['SELECT', 'SBB-SELECT', 'TEXTAREA'].includes(this._input?.tagName as string)
               ? html`<sbb-icon
-                  name="chevron-small-down-small"
+                  name="chevron-small-down${this._input?.tagName === 'TEXTAREA'
+                    ? '-flat'
+                    : ''}-small"
                   class="sbb-form-field__select-input-icon"
                 ></sbb-icon>`
               : nothing}