From 75b187fb7f025d707e8e178275ab6858a6fbac6a Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Wed, 30 Aug 2023 13:21:23 +0300 Subject: [PATCH 1/6] clarify Buttons section --- docs/badges_buttons.md | 17 ++++++++++++++--- docs/snippets/myst/button-link.txt | 10 ++++++++++ docs/snippets/rst/button-link.txt | 8 ++++++++ 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/badges_buttons.md b/docs/badges_buttons.md index 9eeaace..2236a8c 100644 --- a/docs/badges_buttons.md +++ b/docs/badges_buttons.md @@ -60,7 +60,20 @@ See [Bootstrap badges](https://getbootstrap.com/docs/5.0/components/badge/) for ## Buttons -Buttons allow users to navigate to external (`button-link`) / internal (`button-ref`) links with a single tap. +Buttons in Sphinx Design are actually links, which: + +- Can be styled to look like + [Bootstrap buttons](https://getbootstrap.com/docs/5.0/components/buttons/). +- Can be external (`button-link`) or internal (`button-ref`) + +Most of the time, you should create links using the standard syntax for the +language you've chosen: + +- [MyST links and cross-references](https://myst-parser.readthedocs.io/en/latest/syntax/cross-referencing.html#examples) +- [rST links and cross-references](https://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html#hyperlinks) + +Sometimes, though, you may want to call attention to a particular link or set of +links, or set them apart visually from other links on the site. ```{button-link} https://example.com ``` @@ -139,8 +152,6 @@ Use the `click-parent` option to make the button's parent container also clickab ::: -See the [Material Design](https://material.io/components/buttons) and [Bootstrap](https://getbootstrap.com/docs/5.0/components/buttons/) descriptions for further details. - ### `button-link` and `button-ref` options ref-type (`button-ref` only) diff --git a/docs/snippets/myst/button-link.txt b/docs/snippets/myst/button-link.txt index ed372cf..65feec2 100644 --- a/docs/snippets/myst/button-link.txt +++ b/docs/snippets/myst/button-link.txt @@ -19,3 +19,13 @@ Button text :color: secondary :expand: ``` + +```{button-ref} buttons +:color: info +``` + +```{button-ref} buttons +:color: info + +Reference Button text +``` \ No newline at end of file diff --git a/docs/snippets/rst/button-link.txt b/docs/snippets/rst/button-link.txt index d6817f3..5408d51 100644 --- a/docs/snippets/rst/button-link.txt +++ b/docs/snippets/rst/button-link.txt @@ -15,3 +15,11 @@ .. button-link:: https://example.com :color: secondary :expand: + +.. button-ref:: buttons + :color: info + +.. button-ref:: buttons + :color: info + + Reference Button Text \ No newline at end of file From 1afe3feb9e7381998122c367491fab8c8e27fb88 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Wed, 30 Aug 2023 13:29:50 +0300 Subject: [PATCH 2/6] note on accessibility --- docs/badges_buttons.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/badges_buttons.md b/docs/badges_buttons.md index 2236a8c..8065740 100644 --- a/docs/badges_buttons.md +++ b/docs/badges_buttons.md @@ -75,6 +75,15 @@ language you've chosen: Sometimes, though, you may want to call attention to a particular link or set of links, or set them apart visually from other links on the site. +:::{admonition} Note on accessibility + +Despite the name, `button-link` and `button-ref` do **not** convert to +`