New: Input Group

[zyl-edison-telus]

Problem Statement

• As a developer consuming TDS components, I would like to have an input box with a search button, so that I can use this as a UI component to build a search tool.

Recommendation

• Examples
• https://react.semantic-ui.com/elements/input/
• https://material-ui.com/components/text-fields/

User stories

Design intent

As a customer, I want to be able to search a catalogue or page (so that I do not have to use ctrl+F ) so find what I am looking to for.

Designs

[XL] https://telus.invisionapp.com/share/GQUPE828R62#/392062248_XL_-_1200px

Acceptance criteria

This section is intentionally left blank. See story writing process.

Design and Developer Acceptance Criteria:

• leads with an sm text label that defines the search criteria, eg. Search:
• includes placeholder text that further defines the search parameters, eg. Search TV channels
• 40px high
• Max width 768px (8 cols). and minimum width should be 384px (4 cols). Must be long enough to see all of the expected input (approximately)
• Extra small to medium viewport component should be full width.
• includes an interactive search icon as a button, 40px x 40px, level 2 spacing
• a line cursor must appear after the input text area
• interactive close icon to appear when a search term is entered, clears / resets search field (clickable or tapable)
• default outline is 1px #D8D8D8, active state includes a 1 px #4B286D outline, focus state has a further outline of 2px rgba(75,40,109,0.5) then an outline of 1 px #FFFFF, then the active state outline, Hover state increases to 2px #4B286D,
• hint text is optional
• see design file for spacing
• see visual design for focus state
• accessibility tags should include multilingual options for search and close icon and placeholder descriptors.
• interactions:
  1. When user clicks or key presses close icon, the search is cleared, and placeholder reinstated.
  2. When user clicks or key presses search icon, there is no visual change to this TDS component.
  3. When user types whilst input field is in focus, the text updates to the typed text
• Props that the component should have include:
  1. Accessibility text for search, with language options
  2. Accessibility text for close function, with language options
  3. Accessibility text for placeholder, with language options
  4. A callback function which provides the developer a means of accessing the search input value.

Out of scope

An optional dropdown which can be populated with autocomplete or past search terms.

Meta

• Willing to design solution: Yes
• Willing to develop solution: Yes
• Has workaround: No
• Do any similar components already exist in TDS (core or community): No
• Does this pattern exist already but isn’t a community component? (include url)
• Which teams/applications do you think would use this improvement? Any dev team consuming TDS
• High impact: Yes

[theetrain]

Other use cases for search

• Solutions catalogue
• TELUS support

Questions

• Whether to use to filter existing results
• Whether to search real-time for results
• Whether the clickable search icon is necessary

Let's have some design intent and reusability conversations next.

[varunj90]

@twirlingsky and @apurvray please add your designs here, thank you!

[donnavitan]

Adding the screenshot here so you don't have to visit Slack:

[twirlingsky]

The visual design of above ^ https://telus.invisionapp.com/d/main#/console/16401801/357188149/preview Active state: https://telus.invisionapp.com/d/main#/console/16401801/367708325/preview

(We're reviewing a11y tomorrow)

[donnavitan]

Hello @zyl-edison-telus,

As mentioned by @theetrain and discussions with CX (@kittybourne and @gkychow), it would be best to provide more use cases and examples to determine how to proceed.

Questions

• Whether to use to filter existing results
• Whether to search real-time for results
• Whether the clickable search icon is necessary (@theetrain could clarify what you mean by this?)
• What elements/functionality do you need from the UPC search component? -- Icon only button (navigation/page) -- Display quick links (navigation only) -- Display top results (navigation only) -- Ability to cancel/reset search (page only) -- Button turns green on focus (navigation only) -- Button turns green once you enter data (page only) -- Use the UPC search component that appears on the top navigation or the one that appears in the page content?

@twirlingsky Please added your ACs here and learnings from your a11y! Mucho appreciated!

Adding screen captures from examples provided by @twirlingsky for easy reference: Default state

Active state

@zyl-edison-telus, you provided links to examples and while it would be nice to have all these permutations, we need to determine what the immediate focus could be to help provide a timely solution.

[zyl-edison-telus]

Hi @donnavitan,

Thanks for the details. I think these questions will be more likely for our UX designers or the people from accessibility team? However, below are my comments based on my initial understanding from the requirements

Q1. Whether to use to filter existing results Initial requirement, search and filter will not work together. We clean filter when we search or the other way around. From my opinion, we could combine them so that it gives users more flexibilities to filter results

Q2. Whether to search real-time for results Initial requirement, it does not involve searching in real time. It is just a simple search. We did talk about this and we think we may include the real time search in the future.

Q3. Whether the clickable search icon is necessary Initial requirement, it is necessary. But I am not sure if it is really necessary from the design point of view.

Q4. What elements/functionality do you need from the UPC search component I am not sure about this

This issue is to create INPUT GROUPS (refs are in the links I originally provided). They are more generic and plain components for all different kinds of purposes like other TDS component such as input, button, links and etc. And from what I understand, that is how design system components should be. They SHOULD NOT involve any specific functionality for example SEARCH. Those functionalities should be developed by the implementation teams?

[apurvray]

The standalone search input with the integrated button is what I was talking about in the meeting. I think the global elements team is the guardian for this particular pattern and we should consult with them if they can extend the functionality.

Attaching gif of the interaction below.

The text box seems normal until you type something, that's when the icon on the right turns in to a button.

[twirlingsky]

Adding updated design screens.

Hover state (matches filters)

Active

[twirlingsky]

Wondering if this component should be completed by Home Solutions and then contributed back when we're done? Noticing that we're having to duplicate a lot of conversation.

Notes from design / a11y: Our understanding is that the search will work will the filters. A customer will only be able to search by channel name initially - for example AMC, and the filter was set to Type (Theme pack and premium), then the Prime Time card would show in the results, but not the AMC channel card.

alternative text on search button to be different than global search element (content strategy to advise)

Field sets needs to be defined for Search and Filters

Loading state - brings up the spinner and then we need to direct where to go next (channel card) (no results message / page being worked on)

Clear result with X icon or by typing in the search box

Auto-complete set to off

Will not have any quick links

Will not have animation for search component like the global element does

[varunj90]

DPA Discussion

@twirlingsky Laurel suggested that the due to deadlines, the team will go ahead with the implementation and contribute back to tds-community shortly after.

cc: @zyl-edison-telus - please let your PO know so it's part of your backlog :)

[zyl-edison-telus]

@varunj90 sounds good

[Franimal604]

also I am working with a vendor that needs the same functionality and have designed there own. How far out is this from being developed?

[varunj90]

consolidating conversation on slack: https://telusdigital.slack.com/archives/CDQ6P8VNU/p1561492597046500

Designs by @twirlingsky

The designs are here:

[XL, hover state (matches filters hover state): https://telus.invisionapp.com/d/#/console/16401801/368447546/preview [XL, active state] https://telus.invisionapp.com/d/#/console/16401801/367708325/preview [XS] https://telus.invisionapp.com/d/main#/console/16401809/354496463/preview

The a11y are in the notes

[varunj90]

@kittybourne @Franimal604 and @gkychow to quickly do a design review and provide direction forward for first vs second pass

moved it to design review

[kittybourne]

Hi @zyl-edison-telus I know you are working on this very soon so I just regrouped with @gkychow and @Franimal604 to provide some quick feedback:

-use smaller icons (16px), look at existing search button in meganav for inactive state -"x" is too big on active also should be 16px -active/inactive states are too similar, make search button purple for active state -hover state is very subtle -should search be on the right of the filters? -consider vertical keyline between search and filter -more spacing above and below -consider same shape for pilters -button alt text for accessibility

let me know if you need any clarification

[twirlingsky]

Just a note that we decided to put search on the left for Optik TV channels since it is more of the primary focus, filters are secondary (as seen in testing)

[varunj90]

hi @kittybourne @twirlingsky based on comments above, will there be amendments to design?

can we please update the invision links to reflect those? can someone help in Laurel's absence? @Franimal604 @guramritsingh86 ?

[Franimal604]

Sorry forgot to add a comment here. Laurel is away till next week. Unfortunately I don't have the sketch file for this component so I won't be able to help out.

[twirlingsky]

@zyl-edison-telus please update the following:

• reduce X utility icon to 1 rem. I think right now it is 1.5 rem which puts it at 24px. I'm not 100% sure what our base em unit is. It looks slightly too big currently.
• increase spacing above the labels and under the search and filter components to level 4

Notes to the recommendations above: I'd like to leave the active/inactive and hover states as is currently. If we move to a grey inactive state it is suspected that we will lose visibility since this is an inline component with a block of text above. Hover state is to match the filters (which will be modified in the future when filters are revised.) Search for TV channels is to stay on the left, giving search priority and then further linked to the filters on the right to narrow things down. Also, these 2 blocks are to be seen as connected, so no vertical line separating them is required. Shape between search filters needs to be differentiated as defined by customer testing. (more square doesn't work for filters)

[varunj90]

@Franimal604 and @kittybourne to look at the changes made by Laurel and we can move this to story writing!

[varunj90]

hey @Franimal604 @kittybourne were you able to look at the changes made by @twirlingsky - once confirmed we can move this to story writing

[varunj90]

we will update this once @abansil work on search is ready

@kittybourne çan you review laurel's updates please

[abansil]

@varunj90 2 rounds of search design meetings were done - first pass of search guidelines for both global & in-page have been made, can be further seen here: https://docs.google.com/presentation/d/1LNLYhvYgZJMHIEIga2COFOl7J767S5yIlGlmbwNhabg/edit#slide=id.g5f1a82978b_0_21

GE will be working to launch a B2B/global search design come October. designs will be enhanced for a11y, TDS and alignment with in-page as needed before dev. as far as input group goes i believe we're aligned

[varunj90]

Input group search changes are being made by Laurel based on Aprile's new design

this future component will be combined with filters

[catherinetelus]

I have another use case for something similar. For promo code application, it doesn't make sense to have a large dedicated button that competes with the main "Check out" button.

https://telus.invisionapp.com/share/7VUBO123P95#/387919846_Prototype_V1-2_DSK_1a

[varunj90]

@twirlingsky can you provide the final design file @kittybourne one last review we can move this to story writing right after.

[twirlingsky]

Visual documentation: https://telus.invisionapp.com/share/GQUPE828R62#/392062248_XL_-_1200px

[twirlingsky]

Note: this is in the backlog for the Home Solutions Catalogue team. They could continue with developing it and contributing it back to TDS (https://telusdigital.atlassian.net/browse/CATA-1893)

[ghost]

Who's working on this? We have a ticket that's blocked by the completion of this component.

[varunj90]

added you to the slack channel @charliehay

[twirlingsky]

@zyl-edison-telus Will be working on this ticket

[mike-bunce]

Laurel and myself have updated Acceptance Criteria and user stories, see the top of the ticket.

[ghost]

I'm happy to take on this ticket, I can start working on it tomorrow I believe.

[twirlingsky]

Edison (on the HS catalogue team) has already done the dev work on this ticket. Just needs a bit more done it before it is contributed back. It's in the catalogue team's current sprint.

[mike-bunce]

https://github.com/telus/tds-community/pull/331 review in place, a few changes requested.

[theetrain]

@tds/community-input-group@1.0.0 is released!