Doc: Update states view documentation

There is a new states view, documentation need to be updated.

Task-number: QDS-7892
Change-Id: I17ac7c192d4a8ddf0a10da6c8e399b126dabfebe
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

10 files changed, 42 insertions, 59 deletions

diff --git a/doc/qtdesignstudio/images/extended-state.webp b/doc/qtdesignstudio/images/extended-state.webp
new file mode 100644
index 0000000000..58eae1febf
--- /dev/null
+++ b/doc/qtdesignstudio/images/extended-state.webp
diff --git a/doc/qtdesignstudio/images/no-extended-state.webp b/doc/qtdesignstudio/images/no-extended-state.webp
new file mode 100644
index 0000000000..41fe322f0d
--- /dev/null
+++ b/doc/qtdesignstudio/images/no-extended-state.webp
diff --git a/doc/qtdesignstudio/images/qmldesigner-screen-design.png b/doc/qtdesignstudio/images/qmldesigner-screen-design.png
index 4ef84082d5..08192e0b4f 100644
--- a/doc/qtdesignstudio/images/qmldesigner-screen-design.png
+++ b/doc/qtdesignstudio/images/qmldesigner-screen-design.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-states.png b/doc/qtdesignstudio/images/qmldesigner-states.png
index 2b6e2794e1..552c644e64 100644
--- a/doc/qtdesignstudio/images/qmldesigner-states.png
+++ b/doc/qtdesignstudio/images/qmldesigner-states.png
diff --git a/doc/qtdesignstudio/images/qmldesigner-transitions.png b/doc/qtdesignstudio/images/qmldesigner-transitions.png
index 9c91383878..4142cacee6 100644
--- a/doc/qtdesignstudio/images/qmldesigner-transitions.png
+++ b/doc/qtdesignstudio/images/qmldesigner-transitions.png
diff --git a/doc/qtdesignstudio/images/states-view-menu.png b/doc/qtdesignstudio/images/states-view-menu.png
new file mode 100644
index 0000000000..6f93774904
--- /dev/null
+++ b/doc/qtdesignstudio/images/states-view-menu.png
diff --git a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
index 2579687674..3b2b8b173a 100644
--- a/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
+++ b/doc/qtdesignstudio/images/studio-design-mode-states-timeline.png
diff --git a/doc/qtdesignstudio/images/timeline-states.png b/doc/qtdesignstudio/images/timeline-states.png
index a1dc73e51e..0ef1f7da95 100644
--- a/doc/qtdesignstudio/images/timeline-states.png
+++ b/doc/qtdesignstudio/images/timeline-states.png
diff --git a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
index fe83102f99..9ccd8d576c 100644
--- a/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-states-view.qdoc
@@ -27,6 +27,7 @@
     \page qtquick-states-view.html
     \previouspage qtquick-connection-view.html
     \nextpage studio-translations.html
+    \sa {Working with States}
 
     \title States
 
@@ -47,48 +48,4 @@
 
     \youtube FzmLuRHQXaw
 
-    \section1 Summary of States View Actions
-
-    To open the \uicontrol Actions menu, select
-    \inlineimage icons/action-icon.png
-    . The actions available in the menu depend on the current context. For
-    example, the option for editing an annotation becomes available after
-    you add an annotation.
-
-    \table
-    \header
-        \li Action
-        \li Purpose
-        \li Read More
-    \row
-        \li \uicontrol {Set when Condition}
-        \li Determines when a state should be applied.
-        \li \l{Applying States}
-    \row
-        \li \uicontrol {Reset when Condition}
-        \li Removes \c when condition for the state.
-        \li \l{Applying States}
-    \row
-        \li \uicontrol {Set as Default}
-        \li Sets the current state as the startup state of the application.
-        \li \l{Setting the Default State}
-    \row
-        \li\uicontrol {Reset Default}
-        \li Resets the current state as the default state.
-        \li \l{Setting the Default State}
-    \row
-        \li \uicontrol {Add Annotation}
-        \li Opens the \uicontrol {Annotation Editor} when you can add an
-            annotation for the states that you create.
-        \li \l{Annotating Designs}
-    \row
-        \li \uicontrol {Edit Annotation}
-        \li Opens the \uicontrol {Annotation Editor} where you can edit the
-            annotation for the state.
-        \li \l{Annotating Designs}
-    \row
-        \li \uicontrol {Add Annotation}
-        \li Removes the annotation for the state.
-        \li \l{Annotating Designs}
-    \endtable
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-states.qdoc b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
index b92146a792..6fce596599 100644
--- a/doc/qtdesignstudio/src/views/qtquick-states.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
@@ -41,9 +41,9 @@
 
     \image qmldesigner-transitions.png "States view"
 
-    Click the new state to switch to it in the \l {2D} view, and then modify the
-    values of the properties of components or component instances in
-    \l Properties.
+    Click the new state to switch to it in the \l {2D} and \l{3D} views, and
+    then modify the values of the properties of components or component
+    instances in \l Properties.
 
     For example, to change the appearance of a button, you can define states in
     the button component to hide the button image and show another image in its
@@ -82,21 +82,17 @@
 
     \section1 Setting the Default State
 
-    To determine the startup state of the application,
-    select \inlineimage icons/action-icon.png
-    to open the \uicontrol Actions menu, and then select
-    \uicontrol {Set as Default}.
+    The default state determines the startup state of the application.
 
-    To reset the state later, select \uicontrol Actions >
-    \uicontrol {Reset Default}.
+    To set a state to the default state, select \uicontrol Default.
 
     \section1 Applying States
 
-    To determine when a state should be applied, select \uicontrol Actions >
-    \uicontrol {Set when Condition}. In \uicontrol {Binding Editor}, specify
-    a \l [QtQuick]{State::when}{when} property for the state. Set the value of
-    the property to a boolean expression that evaluates to \c true when you want
-    the state to be applied.
+    To determine when a state is applied, select \inlineimage icons/edit.png
+    in the \uicontrol {When Condition} field. In \uicontrol {Binding Editor},
+    specify a \l [QtQuick]{State::when}{when} property for the state. Set the
+    value of the property to a boolean expression that evaluates to \c true when
+    you want the state to be applied.
 
     This enables you to evaluate the truthfulness of several components'
     properties and move the UI to the state in which these conditions apply.
@@ -192,10 +188,40 @@
         \li Create additional states for each view and set the visibility
             or opacity of the components in the view.
         \li To determine which state is applied when the application starts,
-            select \uicontrol Actions > \uicontrol {Set as Default}.
+            select \uicontrol Default.
     \endlist
 
     \if defined(qtcreator)
     \include qtquick-states-scxml.qdocinc scxml state machines
     \endif
+
+    \section1 State Groups
+
+    With state groups, you can change the state of certain components
+    independently of other components and their states in the same view.
+
+    Each state group has its own property changes and transitions.
+
+    By default, there is one root state group.
+
+    \section1 Extending States
+
+    When a state extends another state, it inherits all the changes of that
+    state. The state being extended is treated as the base state in regards to
+    the changes specified by the extending state.
+
+    Using extended states can make the user interface and your QML code
+    cleaner.
+
+    Below is an example where the only change between \e State1 and \e State2
+    is the brightness of \e directionalLight.
+
+    Here, extended states are not used:
+
+    \image no-extended-state.webp
+
+    Here, \e State2 is extended from \e State1:
+
+    \image extended-state.webp
+
 */