feat: improve style for form-header to make it smaller in height

gravitee-io · Mar 7, 2022 · 0d60670 · 0d60670
1 parent 540102e
commit 0d60670
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 5 deletions.
diff --git a/ui-particles-angular/.stylelintrc.js b/ui-particles-angular/.stylelintrc.js
@@ -4,5 +4,11 @@ module.exports = {
   rules: {
     'scss/dollar-variable-pattern': null,
     'selector-class-pattern': null,
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['ng-deep'],
+      },
+    ],
   },
 };
diff --git a/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.html b/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.html
@@ -29,17 +29,17 @@
       class="gio-form-headers__table__header-row"
       [formGroupName]="headerIndex"
     >
-      <td>
-        <mat-form-field appearance="standard">
+      <td class="gio-form-headers__table__header-row__td-key">
+        <mat-form-field class="gio-form-headers__table__header-row__td-key__field" [floatLabel]="'never'">
           <input formControlName="key" matInput type="text" placeholder="Name..." />
         </mat-form-field>
       </td>
-      <td>
-        <mat-form-field appearance="standard">
+      <td class="gio-form-headers__table__header-row__td-value">
+        <mat-form-field class="gio-form-headers__table__header-row__td-value__field" [floatLabel]="'never'">
           <input formControlName="value" matInput type="text" placeholder="Value..." />
         </mat-form-field>
       </td>
-      <td>
+      <td class="gio-form-headers__table__header-row__td-remove">
         <button
           *ngIf="headersFormArray.controls.length - 1 !== headerIndex"
           mat-icon-button

diff --git a/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.scss b/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.scss
@@ -13,3 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+:host {
+  display: block;
+}
+
+.gio-form-headers {
+  &__table {
+    width: 100%;
+
+    &__header-row {
+      &__td-key,
+      &__td-value {
+        &__field {
+          display: flex;
+          overflow: hidden;
+          height: 32px;
+          flex-direction: column;
+          justify-content: center;
+        }
+      }
+
+      &__td-remove {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+      }
+    }
+  }
+}
+
+::ng-deep {
+  gio-form-headers {
+    .gio-form-headers__table__header-row {
+      // Allow to have form-field with width less than 180px
+      .mat-form-field-infix {
+        width: inherit;
+      }
+    }
+  }
+}
diff --git a/...ngular/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.stories.ts b/...ngular/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.stories.ts
@@ -97,3 +97,26 @@ export const ReactiveForm: Story = {
     disabled: false,
   },
 };
+
+export const SmallWidth: Story = {
+  render: args => ({
+    template: `<div style="width: 200px;"><gio-form-headers [ngModel]="headers"></gio-form-headers></div>`,
+    props: args,
+  }),
+  args: {
+    headers: [
+      {
+        key: 'host',
+        value: 'api.gravitee.io',
+      },
+      {
+        key: 'accept',
+        value: '*/*',
+      },
+      {
+        key: 'connection',
+        value: 'keep-alive',
+      },
+    ],
+  },
+};