diff --git a/.changeset/small-pants-think.md b/.changeset/small-pants-think.md new file mode 100644 index 00000000000..3710c8fff28 --- /dev/null +++ b/.changeset/small-pants-think.md @@ -0,0 +1,7 @@ +--- +'@siemens/ix-angular': minor +'@siemens/ix': minor +'@siemens/ix-vue': minor +--- + +Add additional button properties to **ix-date-dropdown** and **ix-expanding-search**. diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index ebf9c076bf5..b091ce08100 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -568,7 +568,7 @@ export declare interface IxCustomField extends Components.IxCustomField {} @ProxyCmp({ - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'ghost', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'loading', 'locale', 'maxDate', 'minDate', 'outline', 'range', 'to', 'variant', 'weekStartIndex'], methods: ['getDateRange'] }) @Component({ @@ -576,7 +576,7 @@ export declare interface IxCustomField extends Components.IxCustomField {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'ghost', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'loading', 'locale', 'maxDate', 'minDate', 'outline', 'range', 'to', 'variant', 'weekStartIndex'], }) export class IxDateDropdown { protected el: HTMLElement; @@ -976,14 +976,14 @@ export declare interface IxEventListItem extends Components.IxEventListItem { @ProxyCmp({ - inputs: ['fullWidth', 'icon', 'placeholder', 'value'] + inputs: ['fullWidth', 'ghost', 'icon', 'outline', 'placeholder', 'value', 'variant'] }) @Component({ selector: 'ix-expanding-search', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['fullWidth', 'icon', 'placeholder', 'value'], + inputs: ['fullWidth', 'ghost', 'icon', 'outline', 'placeholder', 'value', 'variant'], }) export class IxExpandingSearch { protected el: HTMLElement; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index c6027e323dd..4a8d1b3f398 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4183,6 +4183,28 @@ "optional": false, "required": false }, + { + "name": "ghost", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "ghost", + "reflectToAttr": false, + "docs": "Button with no background or outline", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "i18nCustomItem", "type": "string", @@ -4249,6 +4271,28 @@ "optional": false, "required": false }, + { + "name": "loading", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "loading", + "reflectToAttr": false, + "docs": "Loading button", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "locale", "type": "string", @@ -4319,6 +4363,28 @@ "optional": false, "required": false }, + { + "name": "outline", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "outline", + "reflectToAttr": false, + "docs": "Outline button", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "range", "type": "boolean", @@ -4363,6 +4429,43 @@ "optional": false, "required": false }, + { + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", + "complexType": { + "original": "ButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "ButtonVariant": { + "location": "import", + "path": "../button/button", + "id": "src/components/button/button.tsx::ButtonVariant" + } + } + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Button variant", + "docsTags": [], + "default": "'primary'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + } + ], + "optional": false, + "required": false + }, { "name": "weekStartIndex", "type": "number", @@ -7849,6 +7952,28 @@ "optional": false, "required": false }, + { + "name": "ghost", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "ghost", + "reflectToAttr": false, + "docs": "Button with no background or outline", + "docsTags": [], + "default": "true", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "icon", "type": "string", @@ -7871,6 +7996,28 @@ "optional": false, "required": false }, + { + "name": "outline", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "outline", + "reflectToAttr": false, + "docs": "Outline button", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "placeholder", "type": "string", @@ -7914,6 +8061,43 @@ ], "optional": false, "required": false + }, + { + "name": "variant", + "type": "\"danger\" | \"primary\" | \"secondary\"", + "complexType": { + "original": "ButtonVariant", + "resolved": "\"danger\" | \"primary\" | \"secondary\"", + "references": { + "ButtonVariant": { + "location": "import", + "path": "../button/button", + "id": "src/components/button/button.tsx::ButtonVariant" + } + } + }, + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "button variant", + "docsTags": [], + "default": "'primary'", + "values": [ + { + "value": "danger", + "type": "string" + }, + { + "value": "primary", + "type": "string" + }, + { + "value": "secondary", + "type": "string" + } + ], + "optional": false, + "required": false } ], "methods": [], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 1c4895fe851..5d401da1abd 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -19,6 +19,7 @@ import { InputState } from "./components/category-filter/input-state"; import { ColumnSize } from "./components/col/col"; import { ContentHeaderVariant } from "./components/content-header/content-header"; import { CssGridTemplateType } from "./components/css-grid/css-grid"; +import { ButtonVariant as ButtonVariant1 } from "./components/button/button"; import { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown"; import { DateInputValidityState } from "./components/date-input/date-input"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; @@ -33,7 +34,6 @@ import { EmptyStateLayout } from "./components/empty-state/empty-state"; import { MakeRef } from "./components/utils/make-ref"; import { FlipTileState } from "./components/flip-tile/flip-tile-state"; import { IconButtonVariant } from "./components/icon-button/icon-button"; -import { ButtonVariant as ButtonVariant1 } from "./components/button/button"; import { KeyValueLabelPosition } from "./components/key-value/key-value"; import { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils"; import { IxModalSize } from "./components/modal/modal"; @@ -65,6 +65,7 @@ export { InputState } from "./components/category-filter/input-state"; export { ColumnSize } from "./components/col/col"; export { ContentHeaderVariant } from "./components/content-header/content-header"; export { CssGridTemplateType } from "./components/css-grid/css-grid"; +export { ButtonVariant as ButtonVariant1 } from "./components/button/button"; export { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown"; export { DateInputValidityState } from "./components/date-input/date-input"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; @@ -79,7 +80,6 @@ export { EmptyStateLayout } from "./components/empty-state/empty-state"; export { MakeRef } from "./components/utils/make-ref"; export { FlipTileState } from "./components/flip-tile/flip-tile-state"; export { IconButtonVariant } from "./components/icon-button/icon-button"; -export { ButtonVariant as ButtonVariant1 } from "./components/button/button"; export { KeyValueLabelPosition } from "./components/key-value/key-value"; export { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils"; export { IxModalSize } from "./components/modal/modal"; @@ -681,6 +681,10 @@ export namespace Components { * Retrieves the currently selected date range from the component. This method returns the selected date range as a `DateChangeEvent` object. */ "getDateRange": () => Promise; + /** + * Button with no background or outline + */ + "ghost": boolean; /** * Text for custom dropdown item. Will be used for translation. */ @@ -693,6 +697,10 @@ export namespace Components { * Text for the done button. Will be used for translation. */ "i18nNoRange": string; + /** + * Loading button + */ + "loading": boolean; /** * Locale identifier (e.g. 'en' or 'de'). * @since 2.6.0 @@ -706,6 +714,10 @@ export namespace Components { * The earliest date that can be selected by the date picker. If not set there will be no restriction. */ "minDate": string; + /** + * Outline button + */ + "outline": boolean; /** * If true a range of dates can be selected. */ @@ -715,6 +727,10 @@ export namespace Components { */ "to": string; "today": string; + /** + * Button variant + */ + "variant": ButtonVariant1; /** * The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday. * @since 2.6.0 @@ -1222,10 +1238,18 @@ export namespace Components { * @since 1.6.0 */ "fullWidth": boolean; + /** + * Button with no background or outline + */ + "ghost": boolean; /** * Search icon */ "icon": string; + /** + * Outline button + */ + "outline": boolean; /** * Placeholder text */ @@ -1234,6 +1258,10 @@ export namespace Components { * Default value */ "value": string; + /** + * button variant + */ + "variant": ButtonVariant1; } interface IxFieldLabel { "controlRef"?: | MakeRef @@ -5740,6 +5768,10 @@ declare namespace LocalJSX { * Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected. Format is based on `format` */ "from"?: string; + /** + * Button with no background or outline + */ + "ghost"?: boolean; /** * Text for custom dropdown item. Will be used for translation. */ @@ -5752,6 +5784,10 @@ declare namespace LocalJSX { * Text for the done button. Will be used for translation. */ "i18nNoRange"?: string; + /** + * Loading button + */ + "loading"?: boolean; /** * Locale identifier (e.g. 'en' or 'de'). * @since 2.6.0 @@ -5769,6 +5805,10 @@ declare namespace LocalJSX { * EventEmitter for date range change events. This event is emitted when the date range changes within the component. The event payload contains information about the selected date range. */ "onDateRangeChange"?: (event: IxDateDropdownCustomEvent) => void; + /** + * Outline button + */ + "outline"?: boolean; /** * If true a range of dates can be selected. */ @@ -5778,6 +5818,10 @@ declare namespace LocalJSX { */ "to"?: string; "today"?: string; + /** + * Button variant + */ + "variant"?: ButtonVariant1; /** * The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday. * @since 2.6.0 @@ -6326,6 +6370,10 @@ declare namespace LocalJSX { * @since 1.6.0 */ "fullWidth"?: boolean; + /** + * Button with no background or outline + */ + "ghost"?: boolean; /** * Search icon */ @@ -6334,6 +6382,10 @@ declare namespace LocalJSX { * Value changed */ "onValueChange"?: (event: IxExpandingSearchCustomEvent) => void; + /** + * Outline button + */ + "outline"?: boolean; /** * Placeholder text */ @@ -6342,6 +6394,10 @@ declare namespace LocalJSX { * Default value */ "value"?: string; + /** + * button variant + */ + "variant"?: ButtonVariant1; } interface IxFieldLabel { "controlRef"?: | MakeRef diff --git a/packages/core/src/components/button/button-component.ts b/packages/core/src/components/button/button-component.ts new file mode 100644 index 00000000000..6e9f60140ce --- /dev/null +++ b/packages/core/src/components/button/button-component.ts @@ -0,0 +1,47 @@ +/* + * 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 { ButtonVariant } from './button'; + +export interface IxButtonComponent { + /** + * Annotate with @Prop() decorator + */ + variant: ButtonVariant; + + /** + * Annotate with @Prop() decorator + */ + outline: boolean; + + /** + * Annotate with @Prop() decorator + */ + ghost: boolean; + + /** + * Annotate with @Prop({ reflect: true }) decorator + */ + disabled: boolean; + + /** + * Annotate with @Prop() decorator + */ + type: 'button' | 'submit'; + + /** + * Annotate with @Prop() decorator + */ + loading: boolean; + + /** + * Annotate with @Prop() decorator + */ + icon?: string; +} diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 51774982668..79b2032e8e2 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -9,6 +9,7 @@ import { Component, Element, h, Host, Listen, Prop } from '@stencil/core'; import { BaseButton, BaseButtonProps } from './base-button'; +import { IxButtonComponent } from './button-component'; export type ButtonVariant = 'danger' | 'primary' | 'secondary'; @@ -17,7 +18,7 @@ export type ButtonVariant = 'danger' | 'primary' | 'secondary'; shadow: true, styleUrl: './button.scss', }) -export class Button { +export class Button implements IxButtonComponent { /** * Button variant * @since 2.3.0 - variant danger diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 3a8ea884d2a..5f28dde2265 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -24,6 +24,8 @@ import { DateTime } from 'luxon'; import { type LiteralStringUnion } from '../utils/type-helper'; import { IxDatePickerComponent } from '../date-picker/date-picker-component'; import { makeRef } from '../utils/make-ref'; +import { ButtonVariant } from '../button/button'; +import { IxButtonComponent } from '../button/button-component'; export type DateDropdownOption = { id: string; @@ -46,7 +48,11 @@ export type DateRangeChangeEvent = { styleUrl: 'date-dropdown.scss', shadow: true, }) -export class DateDropdown implements Omit { +export class DateDropdown + implements + Omit, + Omit +{ @Element() hostElement!: HTMLIxDateDropdownElement; /** @@ -100,6 +106,27 @@ export class DateDropdown implements Omit { * if not set or no according date range label is found, nothing will be selected */ @Prop() dateRangeId = 'custom'; + + /** + * Button variant + */ + @Prop() variant: ButtonVariant = 'primary'; + + /** + * Outline button + */ + @Prop() outline = false; + + /** + * Button with no background or outline + */ + @Prop() ghost = false; + + /** + * Loading button + */ + @Prop() loading: boolean = false; + @Watch('dateRangeId') @Watch('to') @Watch('from') @@ -140,6 +167,7 @@ export class DateDropdown implements Omit { * // ... other predefined date range options ... */ @Prop() dateRangeOptions: DateDropdownOption[] = []; + @Watch('dateRangeOptions') onDateRangeOptionsChange() { this.initialize(); @@ -188,7 +216,7 @@ export class DateDropdown implements Omit { @Event() private readonly dateRangeChange!: EventEmitter; - @State() private selectedDateRangeId: LiteralStringUnion<'custom'>; + @State() private selectedDateRangeId: LiteralStringUnion<'custom'> = ''; @State() private currentRangeValue?: { from: string; to: string; @@ -202,6 +230,7 @@ export class DateDropdown implements Omit { this.closeDropdown(); } } + private datePickerTouched = false; componentWillLoad() { @@ -327,7 +356,10 @@ export class DateDropdown implements Omit { +{ /** * Search icon */ @@ -44,6 +48,21 @@ export class ExpandingSearch { */ @Prop() fullWidth = false; + /** + * button variant + */ + @Prop() variant: ButtonVariant = 'primary'; + + /** + * Outline button + */ + @Prop() outline = false; + + /** + * Button with no background or outline + */ + @Prop() ghost = true; + @State() isFieldChanged = false; @State() expanded = false; @State() hasFocus = false; @@ -51,7 +70,7 @@ export class ExpandingSearch { /** * Value changed */ - @Event() valueChange: EventEmitter; + @Event() valueChange!: EventEmitter; private expandInput() { setTimeout(this.focusTextInput, 300); @@ -108,8 +127,9 @@ export class ExpandingSearch { this.expandInput()} tabindex={this.expanded ? -1 : 0} diff --git a/packages/core/src/tests/date-dropdown/basic/index.html b/packages/core/src/tests/date-dropdown/basic/index.html index d6395d20ef8..79738777916 100644 --- a/packages/core/src/tests/date-dropdown/basic/index.html +++ b/packages/core/src/tests/date-dropdown/basic/index.html @@ -24,9 +24,13 @@ justify-content: center; position: relative; margin-top: 2rem; + gap: 1rem; " > + + + diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts index baa4a335248..e2db0c70d01 100644 --- a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts +++ b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts @@ -13,7 +13,7 @@ import { regressionTest } from '@utils/test'; regressionTest.describe('date dropdown', () => { regressionTest('basic', async ({ page }) => { await page.goto('date-dropdown/basic'); - const dateDropdown = page.locator('ix-date-dropdown'); + const dateDropdown = page.locator('ix-date-dropdown').first(); await dateDropdown.click(); const dropdown = dateDropdown.locator('ix-dropdown[data-date-dropdown]'); @@ -23,7 +23,7 @@ regressionTest.describe('date dropdown', () => { regressionTest('range options', async ({ page }) => { await page.goto('date-dropdown/range-options'); - const dateDropdown = page.locator('ix-date-dropdown'); + const dateDropdown = page.locator('ix-date-dropdown').first(); dateDropdown.evaluate((dateDropdown: HTMLIxDateDropdownElement) => { dateDropdown.dateRangeId = 'last-7'; @@ -38,7 +38,7 @@ regressionTest.describe('date dropdown', () => { regressionTest('range options - custom', async ({ page }) => { await page.goto('date-dropdown/range-options'); - const dateDropdown = page.locator('ix-date-dropdown'); + const dateDropdown = page.locator('ix-date-dropdown').first(); dateDropdown.evaluate((dateDropdown: HTMLIxDateDropdownElement) => { dateDropdown.dateRangeId = 'custom'; diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png index 81f26dbb5ec..c7f03826efd 100644 Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png index 0ea3cac555a..a737352de33 100644 Binary files a/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/date-dropdown/date-dropdown.e2e.ts-snapshots/date-dropdown-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/expanding-search/basic/index.html b/packages/core/src/tests/expanding-search/basic/index.html index 761858edf11..6bb311b2c1b 100644 --- a/packages/core/src/tests/expanding-search/basic/index.html +++ b/packages/core/src/tests/expanding-search/basic/index.html @@ -14,6 +14,9 @@
+ + + BEFORE AFTER diff --git a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts index 9cca6903ebc..36a0f345d60 100644 --- a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts +++ b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts @@ -14,7 +14,7 @@ regressionTest.describe('expanding-search', () => { regressionTest('basic', async ({ page }) => { await page.goto('expanding-search/basic'); - await page.locator('ix-expanding-search button').click(); + await page.locator('ix-expanding-search button').first().click(); await page .locator('ix-expanding-search .input-container.expanded') .waitFor(); diff --git a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png index dd317764fa8..a08060caff4 100644 Binary files a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png index f2936dade63..69e0d764909 100644 Binary files a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png index d007bf4fe19..1a7177ac7f0 100644 Binary files a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png index 05841475ae4..ed669bc5195 100644 Binary files a/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/expanding-search/expanding-search.e2e.ts-snapshots/expanding-search-basic-not-expanded-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/storybook-docs/src/stories/date-dropdown.stories.ts b/packages/storybook-docs/src/stories/date-dropdown.stories.ts new file mode 100644 index 00000000000..cc36d80b2e5 --- /dev/null +++ b/packages/storybook-docs/src/stories/date-dropdown.stories.ts @@ -0,0 +1,34 @@ +/* + * SPDX-FileCopyrightText: 2024 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 type { ArgTypes, Meta, StoryObj } from '@storybook/web-components'; +import type { Components } from '@siemens/ix/components'; +import { genericRender, makeArgTypes } from './utils/generic-render'; + +type Element = Components.IxDateDropdown & { defaultSlot: string }; + +const meta = { + title: 'Example/DateDropdown', + tags: [], + render: (args) => genericRender('ix-date-dropdown', args), + argTypes: makeArgTypes>>('ix-date-dropdown', {}), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=45886-17140&m=dev', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Default: Story = { + args: {}, +}; diff --git a/packages/storybook-docs/src/stories/expanding-search.stories.ts b/packages/storybook-docs/src/stories/expanding-search.stories.ts new file mode 100644 index 00000000000..191108b0e51 --- /dev/null +++ b/packages/storybook-docs/src/stories/expanding-search.stories.ts @@ -0,0 +1,36 @@ +/* + * SPDX-FileCopyrightText: 2024 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 type { ArgTypes, Meta, StoryObj } from '@storybook/web-components'; +import type { Components } from '@siemens/ix/components'; +import { genericRender, makeArgTypes } from './utils/generic-render'; + +type Element = Components.IxExpandingSearch; + +const meta = { + title: 'Example/ExpandingSearch', + tags: [], + render: (args) => genericRender('ix-expanding-search', args), + argTypes: makeArgTypes>>('ix-expanding-search', {}), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=680-9454&m=dev', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Default: Story = { + args: { + placeholder: 'Search...', + }, +}; diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 3d141370751..bc37e480fcf 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -332,6 +332,10 @@ export const IxDateDropdown = /*@__PURE__*/ defineContainer( 'minDate', 'maxDate', 'dateRangeId', + 'variant', + 'outline', + 'ghost', + 'loading', 'customRangeAllowed', 'dateRangeOptions', 'locale', @@ -516,6 +520,9 @@ export const IxExpandingSearch = /*@__PURE__*/ defineContainer