From 0f30c11a590247c0fbb99eb48879c8f0789fb021 Mon Sep 17 00:00:00 2001
From: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
Date: Mon, 29 Apr 2024 16:35:22 +0200
Subject: [PATCH 1/3] feat: new toolbar component and button property
---
.../en/reference/dev-toolbar-app-reference.mdx | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index b533d5a0c675b..2efa92c60621d 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -434,6 +434,12 @@ The style of the button (`ghost`, `outline`, `purple`, `gray`, `red`, `green`, `
In JavaScript, set this property using the `buttonStyle` property to avoid conflict with the native `style` property.
+#### `button-border-radius`
+
+The border radius of the button (`normal`, `rounded`). When using `rounded`, the button will have rounded corners and homogenous padding on all sides.
+
+In JavaScript, set this property using the `buttonBorderRadius` property.
+
### `astro-dev-toolbar-badge`
Shows a badge.
@@ -485,6 +491,18 @@ toggle.input.addEventListener('change', (evt) => {
});
```
+### `astro-dev-toolbar-radio-checkbox`
+
+Shows a radio checkbox. Similar to the `astro-dev-toolbar-toggle` component, this element is a simple wrapper around a native `` element. The radio element can be accessed using the `input` property.
+
+```ts
+const radio = document.createElement('astro-dev-toolbar-radio-checkbox');
+
+radio.input.addEventListener('change', (evt) => {
+ console.log(`The radio is now ${evt.currentTarget.checked ? 'enabled' : 'disabled'}!`);
+});
+```
+
#### `toggle-style`
The style of the toggle (`purple`, `gray`, `red`, `green`, `yellow`, `blue`).
From 2fb6c6718db9f0299b326229bfad3716d73c02ee Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Thu, 2 May 2024 11:24:14 +0200
Subject: [PATCH 2/3] Update
src/content/docs/en/reference/dev-toolbar-app-reference.mdx
Co-authored-by: Sarah Rainsberger
---
src/content/docs/en/reference/dev-toolbar-app-reference.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index 2efa92c60621d..e1f81d4b5173e 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -436,7 +436,7 @@ In JavaScript, set this property using the `buttonStyle` property to avoid confl
#### `button-border-radius`
-The border radius of the button (`normal`, `rounded`). When using `rounded`, the button will have rounded corners and homogenous padding on all sides.
+The border radius of the button (`normal`, `rounded`). When using `rounded`, the button will have rounded corners and uniform padding on all sides.
In JavaScript, set this property using the `buttonBorderRadius` property.
From 89fc4d0e2e24513d7bca497b1cf6ea8b800232c0 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Thu, 2 May 2024 11:24:30 +0200
Subject: [PATCH 3/3] Apply suggestions from code review
Co-authored-by: Sarah Rainsberger
---
src/content/docs/en/reference/dev-toolbar-app-reference.mdx | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index e1f81d4b5173e..2457cd9e3139f 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -436,6 +436,8 @@ In JavaScript, set this property using the `buttonStyle` property to avoid confl
#### `button-border-radius`
+
+
The border radius of the button (`normal`, `rounded`). When using `rounded`, the button will have rounded corners and uniform padding on all sides.
In JavaScript, set this property using the `buttonBorderRadius` property.
@@ -493,6 +495,8 @@ toggle.input.addEventListener('change', (evt) => {
### `astro-dev-toolbar-radio-checkbox`
+
+
Shows a radio checkbox. Similar to the `astro-dev-toolbar-toggle` component, this element is a simple wrapper around a native `` element. The radio element can be accessed using the `input` property.
```ts