diff --git a/packages/angular-test-app/src/preview-examples/input-labels.ts b/packages/angular-test-app/src/preview-examples/input-labels.ts new file mode 100644 index 00000000000..41eded905b4 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-labels.ts @@ -0,0 +1,28 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ + Label Start + + + + + + Label End + +
+ `, +}) +export default class Input {} diff --git a/packages/angular-test-app/src/preview-examples/input-search.ts b/packages/angular-test-app/src/preview-examples/input-search.ts index 6e25a486f0f..eba9e8f23b4 100644 --- a/packages/angular-test-app/src/preview-examples/input-search.ts +++ b/packages/angular-test-app/src/preview-examples/input-search.ts @@ -12,51 +12,52 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', template: ` -
- - - - - - - - - -
+
+ + + + + + + + + +
`, }) export default class Input { - customSearch = '' - display = 'none' + customSearch = ''; + display = 'none'; public ngOnInit(): void { - if(this.customSearch !== ''){ - this.display = 'block' + if (this.customSearch !== '') { + this.display = 'block'; } - } + } clearInput() { - this.customSearch = '' - this.display = 'none' + this.customSearch = ''; + this.display = 'none'; } onKey(event: any) { - event.target.value === '' ? this.display = 'none' - : this.display = 'block' + event.target.value === '' + ? (this.display = 'none') + : (this.display = 'block'); } } diff --git a/packages/angular-test-app/src/preview-examples/input-types.ts b/packages/angular-test-app/src/preview-examples/input-types.ts new file mode 100644 index 00000000000..13c4e103d76 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/input-types.ts @@ -0,0 +1,53 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + template: ` +
+ + Text: + + + + + Number: + + .00 + $ + + + + Password: + + + + + Email: + + + + + Telephone: + + +
+ `, +}) +export default class Input {} diff --git a/packages/angular-test-app/src/preview-examples/input-with-icon.ts b/packages/angular-test-app/src/preview-examples/input-with-icon.ts index 7448b6cf995..c9808574400 100644 --- a/packages/angular-test-app/src/preview-examples/input-with-icon.ts +++ b/packages/angular-test-app/src/preview-examples/input-with-icon.ts @@ -14,10 +14,8 @@ import { Component } from '@angular/core'; template: `
- Price - - .00 - $ + +
`, diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss index 969a0490446..5548cdd809e 100755 --- a/packages/core/scss/components/_forms.scss +++ b/packages/core/scss/components/_forms.scss @@ -34,18 +34,20 @@ color: var(--theme-input-hint--color); } - @include hover { - background-color: var(--theme-input--background--hover); - border-color: var(--theme-input--border-color--hover); - cursor: auto; - } - - @include focus-visible { - background-color: var(--theme-input--background--focus); - border-color: var(--theme-input--border-color--focus); - outline-offset: var(--theme-input--focus--outline-offset); - box-shadow: var(--theme-input--box-shadow); - outline: 1px solid var(--theme-color-focus-bdr); + &:not(:read-only):not([readonly]):not([readOnly]):not(.readonly) { + @include hover { + background-color: var(--theme-input--background--hover); + border-color: var(--theme-input--border-color--hover); + cursor: auto; + } + + @include focus-visible { + background-color: var(--theme-input--background--focus); + border-color: var(--theme-input--border-color--focus); + outline-offset: var(--theme-input--focus--outline-offset); + box-shadow: var(--theme-input--box-shadow); + outline: 1px solid var(--theme-color-focus-bdr); + } } } @@ -96,6 +98,10 @@ color: var(--theme-color-weak-text); border-color: var(--theme-input--border-color-bottom--disabled); + + &::placeholder { + color: transparent; + } } .form-control-plaintext { diff --git a/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png index d6662b1cb52..61fc2d32614 100644 Binary files a/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png index c900e677a13..a795c3adc0a 100644 Binary files a/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/category-filter/category-filter.e2e.ts-snapshots/category-filter-categories-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/documentation/docs/controls/input.md b/packages/documentation/docs/controls/input.md index 78567dc64e3..9a72f55c6cd 100644 --- a/packages/documentation/docs/controls/input.md +++ b/packages/documentation/docs/controls/input.md @@ -5,24 +5,32 @@ import SourceInputDisabled from './../auto-generated/previews/web-component/inpu import SourceInputReadonly from './../auto-generated/previews/web-component/input-readonly.md' import SourceInputIcon from './../auto-generated/previews/web-component/input-with-icon.md' import SourceInputSearch from './../auto-generated/previews/web-component/input-search.md' +import SourceInputTypes from './../auto-generated/previews/web-component/input-types.md' +import SourceInputLabels from './../auto-generated/previews/web-component/input-labels.md' import SourceReactInput from './../auto-generated/previews/react/input.md' import SourceReactInputDisabled from './../auto-generated/previews/react/input-disabled.md' import SourceReactInputReadonly from './../auto-generated/previews/react/input-readonly.md' import SourceReactInputIcon from './../auto-generated/previews/react/input-with-icon.md' import SourceReactInputSearch from './../auto-generated/previews/react/input-search.md' +import SourceReactInputTypes from './../auto-generated/previews/react/input-types.md' +import SourceReactInputLabels from './../auto-generated/previews/react/input-labels.md' import SourceAngularInput from './../auto-generated/previews/angular/input.ts.md' import SourceAngularInputDisabled from './../auto-generated/previews/angular/input-disabled.ts.md' import SourceAngularInputReadonly from './../auto-generated/previews/angular/input-readonly.ts.md' import SourceAngularInputIcon from './../auto-generated/previews/angular/input-with-icon.ts.md' import SourceAngularInputSearch from './../auto-generated/previews/angular/input-search.ts.md' +import SourceAngularInputTypes from './../auto-generated/previews/angular/input-types.ts.md' +import SourceAngularInputLabels from './../auto-generated/previews/angular/input-labels.ts.md' import SourceVueInput from './../auto-generated/previews/vue/input.md' import SourceVueInputDisabled from './../auto-generated/previews/vue/input-disabled.md' import SourceVueInputReadonly from './../auto-generated/previews/vue/input-readonly.md' import SourceVueInputIcon from './../auto-generated/previews/vue/input-with-icon.md' import SourceVueInputSearch from './../auto-generated/previews/vue/input-search.md' +import SourceVueInputTypes from './../auto-generated/previews/vue/input-types.md' +import SourceVueInputLabels from './../auto-generated/previews/vue/input-labels.md' # Input @@ -61,7 +69,7 @@ frameworks={{ vue: SourceVueInputReadonly }}> -### with Icon +### With icon +### Label placement + + + +### Input types + + + ### Search + + + + + + Input Search example + + + + + + +
+ + Label Start + + + + + + Label End + +
+ + + + + \ No newline at end of file diff --git a/packages/html-test-app/src/preview-examples/input-readonly.html b/packages/html-test-app/src/preview-examples/input-readonly.html index ee1364c89fe..5d1a9e2837b 100644 --- a/packages/html-test-app/src/preview-examples/input-readonly.html +++ b/packages/html-test-app/src/preview-examples/input-readonly.html @@ -14,7 +14,7 @@
+ + + + + + Input Search example + + + + + + + + + Text: + + + + + Number: + + .00 + $ + + + + Password: + + + + + Email: + + + + + Telephone: + + +
+ + + + + \ No newline at end of file diff --git a/packages/html-test-app/src/preview-examples/input-with-icon.html b/packages/html-test-app/src/preview-examples/input-with-icon.html index 93ce1ebf5f8..1c29d7e127e 100644 --- a/packages/html-test-app/src/preview-examples/input-with-icon.html +++ b/packages/html-test-app/src/preview-examples/input-with-icon.html @@ -6,25 +6,26 @@ - - Pill example - - - -
- - Price - - .00 - $ - -
- - - - - + + + Input with icon example + + + + +
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/packages/react-test-app/src/preview-examples/input-labels.tsx b/packages/react-test-app/src/preview-examples/input-labels.tsx new file mode 100644 index 00000000000..ba6f4504601 --- /dev/null +++ b/packages/react-test-app/src/preview-examples/input-labels.tsx @@ -0,0 +1,27 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { IxInputGroup } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( +
+ + Label Start + + + + + + Label End + +
+ ); +}; diff --git a/packages/react-test-app/src/preview-examples/input-types.tsx b/packages/react-test-app/src/preview-examples/input-types.tsx new file mode 100644 index 00000000000..875a255739a --- /dev/null +++ b/packages/react-test-app/src/preview-examples/input-types.tsx @@ -0,0 +1,52 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { IxInputGroup } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( +
+ + Text: + + + + + Number: + + .00 + $ + + + + Password: + + + + + Email: + + + + + Telephone: + + +
+ ); +}; diff --git a/packages/react-test-app/src/preview-examples/input-with-icon.tsx b/packages/react-test-app/src/preview-examples/input-with-icon.tsx index 7eb06f8a787..c8e9d9e512b 100644 --- a/packages/react-test-app/src/preview-examples/input-with-icon.tsx +++ b/packages/react-test-app/src/preview-examples/input-with-icon.tsx @@ -7,17 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import { IxInputGroup } from '@siemens/ix-react'; +import { IxIcon, IxInputGroup } from '@siemens/ix-react'; import React from 'react'; export default () => { return (
- Price - - .00 - $ + + + +
); diff --git a/packages/vue-test-app/src/preview-examples/input-labels.vue b/packages/vue-test-app/src/preview-examples/input-labels.vue new file mode 100644 index 00000000000..2171a16d6de --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-labels.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-types.vue b/packages/vue-test-app/src/preview-examples/input-types.vue new file mode 100644 index 00000000000..70707990d21 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-types.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-with-icon.vue b/packages/vue-test-app/src/preview-examples/input-with-icon.vue index 5960877670d..a85ae380ac5 100644 --- a/packages/vue-test-app/src/preview-examples/input-with-icon.vue +++ b/packages/vue-test-app/src/preview-examples/input-with-icon.vue @@ -14,10 +14,10 @@ import { IxInputGroup } from '@siemens/ix-vue';