diff --git a/packages/fiori/src/themes/SearchItem.css b/packages/fiori/src/themes/SearchItem.css index deef749c5ed5..c94789c13496 100644 --- a/packages/fiori/src/themes/SearchItem.css +++ b/packages/fiori/src/themes/SearchItem.css @@ -2,8 +2,27 @@ border: none; } +:host(:focus-within) { + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + outline-offset: calc(-1 * var(--sapContent_FocusWidth) - 0.125rem); +} + :host { border: none; + padding-top: var(--_ui5_search_item_vertical_padding); + padding-bottom: var(--_ui5_search_item_vertical_padding); + height: auto; + min-height: var(--_ui5_list_item_base_height); + padding-left: 1rem; + padding-right: 1rem; +} + +.ui5-li-root { + padding: 0; +} + +.ui5-li-root:focus:after { + display: none; } .ui5-search-item-content { @@ -61,17 +80,16 @@ font-family: var(--sapFontFamily); font-weight: normal; color: var(--sapList_TextColor); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + line-height: 1rem; } .ui5-search-item-titles-container { - overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; flex: 1; + max-width: 100%; + gap: 1rem; } .ui5-search-item-icon { @@ -82,13 +100,8 @@ } :host([description]) { - height: auto; - min-height: var(--_ui5_list_item_base_height); -} - -:host([description]) .ui5-search-item-content { - padding-top: .5rem; - padding-bottom: .5rem; + padding-top: 1rem; + padding-bottom: 1rem; } :host([description]) .ui5-search-item-description { @@ -101,8 +114,4 @@ font-size: var(--sapFontSize); font-weight: normal; color: var(--sapContent_LabelColor); - margin-top: .25rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } diff --git a/packages/fiori/src/themes/base/Search-parameters.css b/packages/fiori/src/themes/base/Search-parameters.css new file mode 100644 index 000000000000..3b285ad204a4 --- /dev/null +++ b/packages/fiori/src/themes/base/Search-parameters.css @@ -0,0 +1,9 @@ +:root { + --_ui5_search_item_vertical_padding: 1rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_search_item_vertical_padding: 0.4375rem; +} diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css index 83b9f4a2f82e..77325cfc8bd4 100644 --- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css @@ -12,6 +12,7 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "../base/WizardTab-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "./DynamicPageTitle-parameters.css"; diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css index ac70f0dcfc7e..2ad3d9874954 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -12,6 +12,7 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "../base/WizardTab-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "../base/DynamicPageTitle-parameters.css"; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css index aec455f666b5..f462c4164432 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -12,6 +12,7 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "./WizardTab-parameters.css"; @import "./ShellBar-parameters.css"; @import "../base/DynamicPage-parameters.css"; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css index cf30632784fb..2a6cfc8058f9 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -13,6 +13,7 @@ @import "../base/Wizard-parameters.css"; @import "./WizardTab-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "./ShellBar-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "./DynamicPageTitle-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css index cbb3d8a485a3..f61c85c99230 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -17,6 +17,8 @@ @import "./MediaGallery-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "../base/SearchField-parameters.css"; +@import "../base/Search-parameters.css"; +@import "../base/Search-parameters.css"; @import "./DynamicPageTitle-parameters.css"; @import "../base/DynamicPageHeader-parameters.css"; @import "./DynamicPageHeaderActions-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css index 792b33dcc77e..4ac59062120e 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -9,6 +9,7 @@ @import "../base/ShellBar-parameters.css"; @import "./ShellBar-parameters.css"; @import "../base/SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "./TimelineItem-parameters.css"; @import "./SideNavigation-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css index 0b3f734eb019..139873809e3a 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css @@ -16,6 +16,7 @@ @import "./WizardTab-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "./DynamicPageTitle-parameters.css"; @import "../base/DynamicPageHeader-parameters.css"; @import "../sap_horizon/DynamicPageHeaderActions-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css index 686c8b49e47e..02a81ed9fbb6 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -15,6 +15,7 @@ @import "../base/ShellBar-parameters.css"; @import "./ShellBar-parameters.css"; @import "./SearchField-parameters.css"; +@import "../base/Search-parameters.css"; @import "../base/DynamicPage-parameters.css"; @import "../base/DynamicPageTitle-parameters.css"; @import "../base/DynamicPageHeader-parameters.css"; diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index df13a363ea24..bfb6f3f161d0 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -29,7 +29,11 @@ - + + + + +