What's in a button?

Building user interfaces goes beyond the pixels you see on the screen. There's plenty of engineering complexity in building UI that's easy to use, easy to customize, and provides user delight. We'll start with very simple components and extend them to use animations and multiple elements, while discussing the technical challenges that we might run into along the way.

Transcript

1. What’s in a Button? UI Engineering and Building Components
4. Who am I? Bonnie Zhou Software Engineer Google
5. Let’s make a button
6. Design requirements 1. Text: purple color 2. Border: purple color Design requirements for interaction 3. When you hover over it, light purple (#f2e5f2) background color 4. When you focus on it, medium purple (#e5cce5) background color
7. Button HTML <button>My button!</button>
8. Button CSS button { color: purple; border: 1px solid purple; }
9. Button hover and focus CSS button:hover { background-color: #f2e5f2; } button:focus { background-color: #e5cce5; }
10. Button hover and focus CSS button:hover { background-color: #f2e5f2; } button:focus { background-color: #e5cce5; } pseudo-classes
11. <button>My button!</button> button { color: purple; border: 1px solid purple; } button:hover { background-color: #f2e5f2; } button:focus { background-color: #e5cce5; } HTML CSS
12. We have a button!
17. Make it a component
18. <button>My button!</button> button { color: purple; border: 1px solid purple; } button:hover { background-color: #f2e5f2; } button:focus { background-color: #e5cce5; } HTML CSS
19. <button class="button-component">My button!</button> .button-component { color: purple; border: 1px solid purple; } .button-component:hover { background-color: #f2e5f2; } .button-component:focus { background-color: #e5cce5; } HTML CSS
20. Using the button component
21. <button class="button-component">My other button!</button> .button-component { color: purple; border: 1px solid purple; } .button-component:hover { … HTML CSS (that we already wrote!)
22. <button class="button-component">My other button!</button> HTML
23. <button class="button-component">My other button!</button> HTML
24. A more complex component: Text Field
25. Design requirements 1. Text: purple color, Roboto font 2. Border: purple color, only on the bottom Design requirements for interaction 3. When you focus on the input, the label should float to the top right 4. When you blur (stop focusing) on the input, the label should go back to its initial position UNLESS the input is filled
26. Text Field HTML <input type="text"> <label>Name</label>
27. Text Field HTML <div class="text-field-component"> <input type="text"> <label>Name</label> </div>
28. Text Field CSS .text-field-component { width: 180px; height: 30px; color: purple; font-family: Roboto; border-bottom: 1px solid purple; } .text-field-component input { width: 170px; height: 28px; } .text-field-component label { position: absolute; transform: translateX(-170px) translateY(5px); }
29. Text Field CSS .text-field-component { width: 180px; height: 30px; color: purple; font-family: Roboto; border-bottom: 1px solid purple; } .text-field-component input { width: 170px; height: 28px; } .text-field-component label { position: absolute; transform: translateX(-170px) translateY(5px); }
30. Text Field CSS .text-field-component { width: 180px; height: 30px; color: purple; font-family: Roboto; border-bottom: 1px solid purple; } .text-field-component input { width: 170px; height: 28px; } .text-field-component label { position: absolute; transform: translateX(-170px) translateY(5px); }
31. Text Field CSS .text-field-component { width: 180px; height: 30px; color: purple; font-family: Roboto; border-bottom: 1px solid purple; } .text-field-component input { width: 170px; height: 28px; } .text-field-component label { position: absolute; transform: translateX(-170px) translateY(5px); }
32. <div class="text-field-component"> <input type="text"> <label>Name</label> </div> HTML CSS .text-field-component { … } .text-field-component input { … } .text-field-component label { … }
33. Our HTML/CSS text field component
34. Now let’s animate it...using CSS animations and JavaScript!
35. Without floating-label class: With floating-label class: Without hover pseudo-class: With hover pseudo-class:
36. HTML with floating-label class <div class="text-field-component"> <input type="text"> <label class="floating-label">Name</label> </div>
37. CSS animation .floating-label { transform: translateX(-175px) translateY(-15px) scale(0.75); } .text-field-component label { … transition: transform 200ms ease; }
38. Without floating-label class: With floating-label class:
39. JavaScript: 3 steps to animating the label 1. Setup: select the HTML elements in JavaScript 2. On focus: add the floating-label class 3. On blur: remove the floating-label class
40. 1. Select the HTML elements textFieldElement = document.querySelector(".text-field-component"); inputElement = textFieldElement.querySelector("input"); labelElement = textFieldElement.querySelector("label");
41. 2. On focus, add the floating-label class inputElement.addEventListener("focus", { labelElement.classList.add("floating-label"); });
42. 3. On blur, remove the floating-label class inputElement.addEventListener("blur", { if (!inputElement.value) { labelElement.classList.remove("floating-label"); } });
43. 3. On blur, remove the floating-label class inputElement.addEventListener("blur", { if (!inputElement.value) { labelElement.classList.remove("floating-label"); } });
44. An animating text field!
45. Put it all in a JavaScript class textFieldElement = document.querySelector("..."); class TextFieldComponent(textFieldElement) { inputElement = document.querySelector("..."); labelElement = document.querySelector("..."); inputElement.addEventListener("focus", {...}); inputElement.addEventListener("blur", {...}); }
46. <div class="text-field-component">...</div> HTML CSS .text-field-component { … } .text-field-component input { … } .text-field-component label { … } JavaScript class TextFieldComponent(textFieldElement) { … }
47. Using the text field component
48. <div class="text-field-component my-other-text-field"> <input type="text"> <label class="floating-label">My other text field</label> </div> HTML JavaScript myOtherTextField = document.querySelector(".my-other-text-field"); new TextFieldComponent(myOtherTextField);
52. Thanks! @bonniezzzhou material.io/components/web github.com/material-components/material-components-web