Fix/no label input dropdown (#1619)

telekom · Mar 21, 2023 · bd60e57 · bd60e57
1 parent 1fe6a9b
commit bd60e57
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 23 deletions.
diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css
@@ -89,6 +89,14 @@ scale-dropdown {
   color: var(--color);
 }
 
+.dropdown--hide-label .input__dropdown {
+  padding: 5px var(--telekom-spacing-unit-x10) 5px calc(var(--spacing-x) - 1px);
+}
+
+.dropdown--hide-label .input__label {
+  visibility: hidden;
+}
+
 @-moz-document url-prefix() {
   .dropdown .input__dropdown {
     text-indent: -2px;

diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
@@ -68,6 +68,8 @@ export class Dropdown {
   @Prop() transparent?: boolean;
   /** (optional) Makes type `select` behave as a controlled component in React */
   @Prop() controlled?: boolean = false;
+  /** (optional) to avoid displaying the label */
+  @Prop() hideLabelVisually?: boolean = false;
 
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
@@ -298,7 +300,8 @@ export class Dropdown {
       this.helperText && 'dropdown--helper-text',
       this.variant &&
         `dropdown--variant-${this.invalid ? 'danger' : this.variant}`,
-      this.value != null && this.value !== '' && 'animated'
+      this.value != null && this.value !== '' && 'animated',
+      this.hideLabelVisually && 'dropdown--hide-label'
     );
   }
 }
diff --git a/packages/components/src/components/dropdown/readme.md b/packages/components/src/components/dropdown/readme.md
@@ -7,24 +7,25 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                               | Type                                                    | Default           |
-| ------------- | -------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
-| `controlled`  | `controlled`   | (optional) Makes type `select` behave as a controlled component in React                  | `boolean`                                               | `false`           |
-| `disabled`    | `disabled`     |                                                                                           | `boolean`                                               | `undefined`       |
-| `helperText`  | `helper-text`  | (optional) Input helper text                                                              | `string`                                                | `''`              |
-| `inputId`     | `input-id`     | (optional) Input checkbox id                                                              | `string`                                                | `undefined`       |
-| `invalid`     | `invalid`      | (optional) Input status                                                                   | `boolean`                                               | `false`           |
-| `label`       | `label`        | (optional) Input label                                                                    | `string`                                                | `''`              |
-| `multiple`    | `multiple`     | (optional) select multiple options                                                        | `boolean`                                               | `undefined`       |
-| `name`        | `name`         | (optional) Input name                                                                     | `string`                                                | `''`              |
-| `required`    | `required`     | (optional) Input required                                                                 | `boolean`                                               | `undefined`       |
-| `size`        | `size`         | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                | `string`                                                | `undefined`       |
-| `status`      | `status`       | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`                                                | `''`              |
-| `styles`      | `styles`       | (optional) Injected CSS styles                                                            | `string`                                                | `undefined`       |
-| `transparent` | `transparent`  | (optional) input background transparent                                                   | `boolean`                                               | `undefined`       |
-| `value`       | `value`        | (optional) Input value                                                                    | `number \| string`                                      | `''`              |
-| `variant`     | `variant`      | (optional) Variant                                                                        | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
-| `visibleSize` | `visible-size` | (optional) the number of visible options in a select drop-down list                       | `number`                                                | `undefined`       |
+| Property            | Attribute             | Description                                                                               | Type                                                    | Default           |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
+| `controlled`        | `controlled`          | (optional) Makes type `select` behave as a controlled component in React                  | `boolean`                                               | `false`           |
+| `disabled`          | `disabled`            |                                                                                           | `boolean`                                               | `undefined`       |
+| `helperText`        | `helper-text`         | (optional) Input helper text                                                              | `string`                                                | `''`              |
+| `hideLabelVisually` | `hide-label-visually` | (optional) to avoid displaying the label                                                  | `boolean`                                               | `false`           |
+| `inputId`           | `input-id`            | (optional) Input checkbox id                                                              | `string`                                                | `undefined`       |
+| `invalid`           | `invalid`             | (optional) Input status                                                                   | `boolean`                                               | `false`           |
+| `label`             | `label`               | (optional) Input label                                                                    | `string`                                                | `''`              |
+| `multiple`          | `multiple`            | (optional) select multiple options                                                        | `boolean`                                               | `undefined`       |
+| `name`              | `name`                | (optional) Input name                                                                     | `string`                                                | `''`              |
+| `required`          | `required`            | (optional) Input required                                                                 | `boolean`                                               | `undefined`       |
+| `size`              | `size`                | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>                                | `string`                                                | `undefined`       |
+| `status`            | `status`              | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string`                                                | `''`              |
+| `styles`            | `styles`              | (optional) Injected CSS styles                                                            | `string`                                                | `undefined`       |
+| `transparent`       | `transparent`         | (optional) input background transparent                                                   | `boolean`                                               | `undefined`       |
+| `value`             | `value`               | (optional) Input value                                                                    | `number \| string`                                      | `''`              |
+| `variant`           | `variant`             | (optional) Variant                                                                        | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
+| `visibleSize`       | `visible-size`        | (optional) the number of visible options in a select drop-down list                       | `number`                                                | `undefined`       |
 
 
 ## Events

diff --git a/packages/components/src/components/text-field/__snapshots__/text-field.spec.ts.snap b/packages/components/src/components/text-field/__snapshots__/text-field.spec.ts.snap
@@ -1,10 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextField should match snapshot 1`] = `
-<scale-text-field>
+<scale-text-field label="test">
   <div class="text-field text-field--type-text text-field--variant-informational">
-    <label class="text-field__label" htmlfor="input-text-field-0"></label>
+    <label class="text-field__label" htmlfor="input-text-field-0">
+      test
+    </label>
     <input class="text-field__control" id="input-text-field-0" inputmode="text" type="text" value="">
   </div>
 </scale-text-field>
 `;
+
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -14,6 +14,7 @@
 | `disabled`               | `disabled`                | (optional) Input disabled                                                                                        | `boolean`                                                                                                                                | `undefined`       |
 | `experimentalControlled` | `experimental-controlled` | (optional)) Makes type `input` behave as a controlled component in React                                         | `boolean`                                                                                                                                | `false`           |
 | `helperText`             | `helper-text`             | (optional) Input helper text                                                                                     | `string`                                                                                                                                 | `''`              |
+| `hideLabelVisually`      | `hide-label-visually`     | (optional) to avoid displaying the label                                                                         | `boolean`                                                                                                                                | `false`           |
 | `inputAutocomplete`      | `input-autocomplete`      | (optional) custom value for autocomplete HTML attribute                                                          | `string`                                                                                                                                 | `undefined`       |
 | `inputAutofocus`         | `input-autofocus`         | (optional) the input should automatically get focus when the page loads.                                         | `boolean`                                                                                                                                | `undefined`       |
 | `inputId`                | `input-id`                | (optional) Input checkbox id                                                                                     | `string`                                                                                                                                 | `undefined`       |

diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css
@@ -114,6 +114,15 @@ scale-text-field {
   background-color: var(--background-control);
   color: var(--color-meta);
 }
+
+.text-field--hide-label .text-field__control {
+  padding: 5px var(--telekom-spacing-unit-x10) 5px calc(var(--spacing-x) - 1px);
+}
+
+.text-field--hide-label .text-field__label {
+  visibility: hidden;
+}
+
 .text-field.text-field--helper-text .text-field__control {
   margin-bottom: var(--margin-bottom-control);
 }

diff --git a/packages/components/src/components/text-field/text-field.spec.ts b/packages/components/src/components/text-field/text-field.spec.ts
@@ -18,7 +18,7 @@ describe('TextField', () => {
   beforeEach(async () => {
     page = await newSpecPage({
       components: [TextField],
-      html: `<scale-text-field></scale-text-field>`,
+      html: `<scale-text-field label="test"></scale-text-field>`,
     });
   });
 

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -107,7 +107,8 @@ export class TextField {
   @Prop() inputAutocomplete?: string;
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailedId?: string;
-
+  /** (optional) to avoid displaying the label */
+  @Prop() hideLabelVisually?: boolean = false;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** (optional)) Makes type `input` behave as a controlled component in React */
@@ -321,6 +322,7 @@ export class TextField {
       this.variant && `text-field--variant-${this.variant}`,
       this.helperText && `text-field--helper-text`,
       this.readonly && `text-field--readonly`,
+      this.hideLabelVisually && `text-field--hide-label`,
       animated && 'animated'
     );
   }

diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -23,6 +23,7 @@
     :input-autofocus="inputAutofocus"
     :input-autocomplete="inputAutocomplete"
     :experimental-controlled="experimentalControlled"
+    :hide-label-visually="hideLabelVisually"
     @scaleInput="scaleInput"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
@@ -61,6 +62,7 @@ export default {
     inputAutofocus: { type: Boolean },
     inputAutocomplete: { type: String },
     experimentalControlled: { type: Boolean },
+    hideLabelVisually: {type: Boolean, default: false},
     styles: { type: String },
   },
   methods: {

diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -94,6 +94,7 @@ export const Template = (args, { argTypes }) => ({
       :input-autofocus="inputAutofocus"
       :input-autocomplete="inputAutocomplete"
       :experimental-controlled="experimentalControlled"
+      :hide-label-visually="hideLabelVisually"
       @scaleChange="scaleChange"
       @scaleFocus="scaleFocus"
       @scaleBlur="scaleBlur"