diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts index 9d21899378d..14dc8bb9146 100644 --- a/packages/web-components/src/components/masthead/masthead-composite.ts +++ b/packages/web-components/src/components/masthead/masthead-composite.ts @@ -228,6 +228,12 @@ class DDSMastheadComposite extends LitElement { @property({ type: Boolean, reflect: true, attribute: 'open-search-dropdown' }) openSearchDropdown = false; + /** + * Value to display when the input has an empty `value`. + */ + @property() + searchPlaceholder?: string; + /** * The user authentication status. */ @@ -271,6 +277,7 @@ class DDSMastheadComposite extends LitElement { menuButtonAssistiveTextInactive, language, openSearchDropdown, + searchPlaceholder, unauthenticatedProfileItems, userStatus, _loadSearchResults: loadSearchResults, @@ -298,6 +305,7 @@ class DDSMastheadComposite extends LitElement { input-timeout="${inputTimeout}" language="${ifNonNull(language)}" ?open="${openSearchDropdown}" + placeholder="${ifNonNull(searchPlaceholder)}" .currentSearchResults="${ifNonNull(currentSearchResults)}" ._loadSearchResults="${ifNonNull(loadSearchResults)}" > diff --git a/packages/web-components/src/components/masthead/masthead-search-composite.ts b/packages/web-components/src/components/masthead/masthead-search-composite.ts index b4c883af357..2bf771192a4 100644 --- a/packages/web-components/src/components/masthead/masthead-search-composite.ts +++ b/packages/web-components/src/components/masthead/masthead-search-composite.ts @@ -9,6 +9,7 @@ import { html, property, customElement, LitElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; import HybridRenderMixin from '../../globals/mixins/hybrid-render'; import ThrottedInputMixin from '../../globals/mixins/throttled-input'; import './masthead-search'; @@ -81,6 +82,12 @@ class DDSMastheadSearchComposite extends ThrottedInputMixin(HybridRenderMixin(Li @property({ type: Boolean, reflect: true }) open = false; + /** + * Value to display when the input has an empty `value`. + */ + @property() + placeholder?: string; + /** * The shadow slot this search UI should be in. */ @@ -104,9 +111,9 @@ class DDSMastheadSearchComposite extends ThrottedInputMixin(HybridRenderMixin(Li } renderLightDOM() { - const { active, currentSearchResults, open } = this; + const { active, currentSearchResults, open, placeholder } = this; return html` - + ${currentSearchResults.map( item => html` diff --git a/packages/web-components/src/components/masthead/masthead-search.ts b/packages/web-components/src/components/masthead/masthead-search.ts index 750597855e9..db88b14632a 100644 --- a/packages/web-components/src/components/masthead/masthead-search.ts +++ b/packages/web-components/src/components/masthead/masthead-search.ts @@ -341,7 +341,7 @@ class DDSMastheadSearch extends BXDropdown { * Value to display when the input has an empty `value`. */ @property({ reflect: true }) - placeholder = ''; + placeholder = 'Search all of IBM'; /** * The redirect URL when a user selects a search suggestion.