Add Web and Textual screenshot tabs, plus removed need for availabili…

…ty table.
beeware · Oct 20, 2023 · bbc16ee · bbc16ee
1 parent 1fe66ce
commit bbc16ee
Show file tree

Hide file tree

Showing 23 changed files with 234 additions and 143 deletions.
diff --git a/docs/_static/custom.css b/docs/_static/custom.css
@@ -23,3 +23,21 @@ span.beta, span.stable {
     font-size: x-large;
     line-height: 1;
 }
+
+.sphinx-tabs-tab span.beta {
+    color: lightslategray;
+    font-variant: italic;
+    font-size: smaller;
+    vertical-align: super;
+}
+
+.sphinx-tabs-tab span.no {
+    color: lightcoral;
+    font-variant: italic;
+    font-size: smaller;
+    vertical-align: super;
+}
+
+.sphinx-tabs-panel p {
+    text-align: center;
+}
diff --git a/docs/conf.py b/docs/conf.py
@@ -111,8 +111,11 @@
 rst_prolog = """
 .. role:: stable
 .. role:: beta
+.. role:: no
 .. |y| replace:: :stable:`●`
 .. |b| replace:: :beta:`○`
+.. |beta| replace:: :beta:`β`
+.. |no| replace:: :no:`✖︎`
 """
 
 intersphinx_mapping = {"python": ("https://docs.python.org/3", None)}

diff --git a/docs/reference/api/widgets/activityindicator.rst b/docs/reference/api/widgets/activityindicator.rst
@@ -18,30 +18,27 @@ usually rendered as a "spinner" animation.
        :align: center
        :width: 100px
 
-  .. group-tab:: Windows
+  .. group-tab:: Windows |no|
 
-    .. figure:: /reference/images/activityindicator-winforms.png
-       :align: center
-       :width: 100px
+    Not supported
 
-  .. group-tab:: Android
+  .. group-tab:: Android |no|
 
-    .. figure:: /reference/images/activityindicator-android.png
-       :align: center
-       :width: 100px
+    Not supported
 
-  .. group-tab:: iOS
+  .. group-tab:: iOS |no|
 
-    .. figure:: /reference/images/activityindicator-ios.png
+    Not supported
+
+  .. group-tab:: Web |beta|
+
+    .. figure:: /reference/images/activityindicator-web.png
        :align: center
        :width: 100px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(ActivityIndicator|Component)$)'}
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/button.rst b/docs/reference/api/widgets/button.rst
@@ -35,12 +35,17 @@ A button that can be pressed or clicked.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!(Button|Component))'}
+  .. group-tab:: Web |beta|
+
+    .. figure:: /reference/images/button-web.png
+       :align: center
+       :width: 300px
+
+  .. group-tab:: Textual |beta|
+
+    .. figure:: /reference/images/button-textual.png
+       :align: center
+       :width: 300px
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/canvas.rst b/docs/reference/api/widgets/canvas.rst
@@ -35,12 +35,13 @@ A drawing area for 2D vector graphics.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!(Canvas|Component))'}
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/dateinput.rst b/docs/reference/api/widgets/dateinput.rst
@@ -25,16 +25,17 @@ A widget to select a calendar date.
        :align: center
        :width: 300px
 
-  .. group-tab:: iOS
+  .. group-tab:: iOS |no|
 
     Not supported
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!(DateInput|Component))'}
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/detailedlist.rst b/docs/reference/api/widgets/detailedlist.rst
@@ -16,7 +16,7 @@ DetailedList
        :align: center
        :width: 450px
 
-  .. group-tab:: Windows
+  .. group-tab:: Windows |beta|
 
     .. figure:: /reference/images/detailedlist-winforms.png
        :align: center
@@ -34,12 +34,13 @@ DetailedList
        :align: center
        :width: 450px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!(DetailedList|Component))'}
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/divider.rst b/docs/reference/api/widgets/divider.rst
@@ -23,20 +23,23 @@ A separator used to visually distinguish two sections of content in a layout.
        :align: center
        :width: 300px
 
-  .. group-tab:: Android
+  .. group-tab:: Android |no|
 
     Not supported
 
-  .. group-tab:: iOS
+  .. group-tab:: iOS |no|
 
     Not supported
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!(Divider|Component))'}
+  .. group-tab:: Web |beta|
+
+    .. figure:: /reference/images/divider-web.png
+       :align: center
+       :width: 300px
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/imageview.rst b/docs/reference/api/widgets/imageview.rst
@@ -1,15 +1,48 @@
 ImageView
 =========
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(ImageView|Component)$)'}
-
 A widget that displays an image.
 
+.. tabs::
+
+  .. group-tab:: macOS
+
+    .. figure:: /reference/images/imageview.png
+       :align: center
+       :width: 150px
+
+  .. group-tab:: Linux
+
+    .. figure:: /reference/images/imageview.png
+       :align: center
+       :width: 150px
+
+  .. group-tab:: Windows
+
+    .. figure:: /reference/images/imageview.png
+       :align: center
+       :width: 150px
+
+  .. group-tab:: Android
+
+    .. figure:: /reference/images/imageview.png
+       :align: center
+       :width: 150px
+
+  .. group-tab:: iOS
+
+    .. figure:: /reference/images/imageview.png
+       :align: center
+       :width: 150px
+
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
+
 Usage
 -----
 

diff --git a/docs/reference/api/widgets/label.rst b/docs/reference/api/widgets/label.rst
@@ -35,12 +35,17 @@ A text label for annotating forms or interfaces.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(Label|Component)$)'}
+  .. group-tab:: Web |beta|
+
+    .. figure:: /reference/images/label-macOS.png
+       :align: center
+       :width: 300px
+
+  .. group-tab:: Textual |beta|
+
+    .. figure:: /reference/images/label-textual.png
+       :align: center
+       :width: 300px
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/multilinetextinput.rst b/docs/reference/api/widgets/multilinetextinput.rst
@@ -35,6 +35,14 @@ A scrollable panel that allows for the display and editing of multiple lines of
        :align: center
        :width: 300px
 
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
+
 .. rst-class:: widget-support
 .. csv-filter:: Availability (:ref:`Key <api-status-key>`)
    :header-rows: 1

diff --git a/docs/reference/api/widgets/numberinput.rst b/docs/reference/api/widgets/numberinput.rst
@@ -35,12 +35,13 @@ A text input that is limited to numeric input.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(NumberInput|Component)$)'}
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/passwordinput.rst b/docs/reference/api/widgets/passwordinput.rst
@@ -37,13 +37,13 @@ not the actual characters.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(PasswordInput|Component)$)'}
+  .. group-tab:: Web |no|
 
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/progressbar.rst b/docs/reference/api/widgets/progressbar.rst
@@ -36,12 +36,15 @@ known or indeterminate length.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(ProgressBar|Component)$)'}
+  .. group-tab:: Web |beta|
+
+    .. figure:: /reference/images/progressbar-web.png
+       :align: center
+       :width: 300px
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 Usage
 -----

diff --git a/docs/reference/api/widgets/selection.rst b/docs/reference/api/widgets/selection.rst
@@ -35,6 +35,14 @@ A widget to select a single option from a list of alternatives.
        :align: center:
        :width: 300px
 
+  .. group-tab:: Web
+
+    Not supported
+
+  .. group-tab:: Textual
+
+    Not supported
+
 .. rst-class:: widget-support
 .. csv-filter:: Availability (:ref:`Key <api-status-key>`)
    :header-rows: 1

diff --git a/docs/reference/api/widgets/slider.rst b/docs/reference/api/widgets/slider.rst
@@ -36,12 +36,13 @@ and the selected value is shown as a draggable marker.
        :align: center
        :width: 300px
 
-.. rst-class:: widget-support
-.. csv-filter:: Availability (:ref:`Key <api-status-key>`)
-   :header-rows: 1
-   :file: ../../data/widgets_by_platform.csv
-   :included_cols: 4,5,6,7,8,9,10
-   :exclude: {0: '(?!^(Slider|Component)$)'}
+  .. group-tab:: Web |no|
+
+    Not supported
+
+  .. group-tab:: Textual |no|
+
+    Not supported
 
 
 Usage