Input group style and examples

[DJMyles]

Description

a pattern which makes it easy for designers, developers and publishers to construct input / button combination structures across their site.

Additional information

• single class in surrounding container
• default button to the right
• reverse class for button to the left
• removes margining and appropriate border

Seeks to address - #460

Definition of Done

• Content/documentation reviewed by Julian or someone in the Content Team
• UX reviewed by Gary or someone the Design team
• Code reviewed by on(https://docs.google.com/spreadsheets/d/1B8pGWSiFbWhurnDISvD2MKnI0IF_T8tU2sl1naZCw1E/edit#gid=1030964576)e of the core developers
• Acceptance Testing
  • [Cross-browser tested against standard browser matrix]
  • Tested on multiple devices (TBD)
  • HTML5 validation (CircleCI)
  • Accessibility testing & WCAG2 compliance (npm test)
• Stakeholder/PO review
• CHANGELOG updated

[gazhands]

Be good to get everyones thoughts on site search using this kind of patten?

[gazhands]

Bit more flexible on mobile

[AndrewArch]

@gazhands - with the label moved into the Search text box via CSS and then moved off-screen when the box gets focus?

NB. I don't like 'reverse class for button to the left' - seems counter-intuitive to have the action (search/submit) before you've put your search terms in

[gazhands]

@AndrewArch Maybe follow this approach for the text? http://guides.service.gov.au/design-guide/components/forms-buttons/index.html#hint-text

[gazhands]

https://designpatterns.hackpad.com/Search-buttons-mfVImR30c7G

[AndrewArch]

'Search' inside the text box shouldn't be a hint or place-holder text, it should be a label - like on dta.gov.au

See also #432

[lreichelt]

@gazhands on that design patterns hackpad... interesting that the empty searches were reduced but I'd love to know whether the number of 'search' searches increased... (what would happen if you just hit the button and no search term? would it register as empty or search I wonder?)

[Podgkin]

Using an icon instead of text is always taking a gamble on your user's level of familiarity with the meaning of that symbol within the context of your system. The search icon is perhaps the most universal of web interface icons, however a magnifying glass does not provide inherent affordance, so the icon only approach can still be problematic for users with very low technological literacy.

Standardising to the icon approach will work on mobile sites sought out by people who regularly use the web. However, It may cause some issues for users who do not usually use technology but are required by government to use a site. This cohort is actually very large, and is over represented in some service oriented departments.

Using the icon is a sane default, but it may not be appropriate at all breakpoints for all sites. The system proposed by DJMyles allows text as well as an icon, which seems like a good solution.

As for the label, I would suggest adaptive labels

[gazhands]

@Podgkin Agree and we do already cover labels and hint text here http://guides.service.gov.au/design-guide/components/forms-buttons/index.html#hint-text

[gazhands]

And yes would like to test text as well as an icon for different breakpoints