Revised toolchain, architecture, events, button, and textfield diagrams, etc. #19897

Change-Id: I6a1ff2264ee17f8b16c99494b855b619e9984a19

1 files changed, 17 insertions, 14 deletions

diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc
index fdd6cf594f..65b991404b 100644
--- a/documentation/components/components-button.asciidoc
+++ b/documentation/components/components-button.asciidoc
@@ -18,8 +18,11 @@ such as finalizing input in forms. When the user clicks a button, a
 [classname]#Button.ClickEvent# is fired, which can be handled by adding a __click listener__
 using either the [methodname]#onClick()# or the [methodname]#addClickListener()# method.
 
-You can handle button clicks with an anonymous class as follows:
+[[figure.component.button.basic]]
+.A [classname]#Button#
+image::img/button-example1.png[width=35%, scaledwidth=60%]
 
+You can handle button clicks most easily with an anonymous class or a lambda expression, as follows:
 
 [source, java]
 ----
@@ -32,17 +35,14 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#component.button.basic
 
 The listener can also be given in the constructor, which is often perhaps simpler.
 
-The button component can be styled in many ways, as illustrated in <<figure.component.button.basic>>.
-
-[[figure.component.button.basic]]
-.Button in Different Styles of Valo Theme
-image::img/button-example1.png[width=70%, scaledwidth=100%]
-
-If you handle several buttons in the same listener, you can differentiate between
-them by comparing the [classname]#Button# object reference returned by the [methodname]#getButton()#
-method of [classname]#Button.ClickEvent# to a kept reference. For a detailed description 
-of these patterns together with some examples, please see 
+////
+If you handle several buttons in the same listener, you can differentiate
+between them either by comparing the [classname]#Button# object reference
+returned by the [methodname]#getButton()# method of
+[classname]#Button.ClickEvent# to a kept reference. For a detailed description
+of these patterns together with some examples, please see
 <<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">>.
+////
 
 == CSS Style Rules
 
@@ -58,6 +58,9 @@ A button has an overall [literal]#++v-button++# style. The caption has
 [literal]#++v-button-caption++# style. There is also an intermediate wrap
 element, which may help in styling in some cases.
 
-Some built-in themes contain a small style, which you can enable by adding
-[parameter]#Reindeer.BUTTON_SMALL#, etc. The [classname]#BaseTheme# also has a
-[parameter]#BUTTON_LINK# style, which makes the button look like a hyperlink.
+The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.basic>>.
+The styles are defined in the [classname]#ValoTheme# class.
+
+[[figure.component.button.basic]]
+.Button in different styles of the Valo theme
+image::img/button-valo-styles.png[width=70%, scaledwidth=100%]