From 4718597b6cc429f03d33a7338b2f4f234656aefb Mon Sep 17 00:00:00 2001
From: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:41:33 +0200
Subject: [PATCH 1/2] feat: progress
---
packages/astro/src/@types/astro.ts | 2 +
.../runtime/client/dev-toolbar/entrypoint.ts | 2 +
.../client/dev-toolbar/ui-library/button.ts | 35 ++++-
.../client/dev-toolbar/ui-library/index.ts | 1 +
.../dev-toolbar/ui-library/radio-checkbox.ts | 121 ++++++++++++++++++
5 files changed, 158 insertions(+), 3 deletions(-)
create mode 100644 packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index d9c8a9489c25..b4df6c9638af 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -33,6 +33,7 @@ import type {
DevToolbarCard,
DevToolbarHighlight,
DevToolbarIcon,
+ DevToolbarRadioCheckbox,
DevToolbarSelect,
DevToolbarToggle,
DevToolbarTooltip,
@@ -3087,6 +3088,7 @@ declare global {
'astro-dev-toolbar-icon': DevToolbarIcon;
'astro-dev-toolbar-card': DevToolbarCard;
'astro-dev-toolbar-select': DevToolbarSelect;
+ 'astro-dev-toolbar-radio-checkbox': DevToolbarRadioCheckbox;
// Deprecated names
// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
index dc8d043a252b..2558a4db2339 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', async () => {
DevToolbarBadge,
DevToolbarIcon,
DevToolbarSelect,
+ DevToolbarRadioCheckbox,
},
] = await Promise.all([
loadDevToolbarApps() as DevToolbarAppDefinition[],
@@ -48,6 +49,7 @@ document.addEventListener('DOMContentLoaded', async () => {
customElements.define('astro-dev-toolbar-badge', DevToolbarBadge);
customElements.define('astro-dev-toolbar-icon', DevToolbarIcon);
customElements.define('astro-dev-toolbar-select', DevToolbarSelect);
+ customElements.define('astro-dev-toolbar-radio-checkbox', DevToolbarRadioCheckbox);
// Add deprecated names
// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
index 9a370581773d..067a1cf2ac90 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
@@ -2,13 +2,16 @@ import { settings } from '../settings.js';
const sizes = ['small', 'medium', 'large'] as const;
const styles = ['ghost', 'outline', 'purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+const borderRadii = ['normal', 'rounded'] as const;
type ButtonSize = (typeof sizes)[number];
type ButtonStyle = (typeof styles)[number];
+type ButtonBorderRadius = (typeof borderRadii)[number];
export class DevToolbarButton extends HTMLElement {
_size: ButtonSize = 'small';
_buttonStyle: ButtonStyle = 'purple';
+ _buttonBorderRadius: ButtonBorderRadius = 'normal';
get size() {
return this._size;
@@ -40,7 +43,22 @@ export class DevToolbarButton extends HTMLElement {
this.updateStyle();
}
- static observedAttributes = ['button-style', 'size'];
+ get buttonBorderRadius() {
+ return this._buttonBorderRadius;
+ }
+
+ set buttonBorderRadius(value) {
+ if (!borderRadii.includes(value)) {
+ settings.logger.error(
+ `Invalid border-radius: ${value}, expected one of ${borderRadii.join(', ')}, got ${value}.`
+ );
+ return;
+ }
+ this._buttonBorderRadius = value;
+ this.updateStyle();
+ }
+
+ static observedAttributes = ['button-style', 'size', 'button-border-radius'];
shadowRoot: ShadowRoot;
@@ -88,8 +106,14 @@ export class DevToolbarButton extends HTMLElement {
--small-font-size: 12px;
--large-padding: 12px 16px;
+ --large-rounded-padding: 12px 12px;
--medium-padding: 8px 12px;
+ --medium-rounded-padding: 8px 8px;
--small-padding: 4px 8px;
+ --small-rounded-padding: 4px 4px;
+
+ --normal-border-radius: 4px;
+ --rounded-border-radius: 9999px;
border: 1px solid var(--border);
padding: var(--padding);
@@ -97,7 +121,7 @@ export class DevToolbarButton extends HTMLElement {
background: var(--background);
color: var(--text-color);
- border-radius: 4px;
+ border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
@@ -137,8 +161,13 @@ export class DevToolbarButton extends HTMLElement {
--background: var(--${this.buttonStyle}-background);
--border: var(--${this.buttonStyle}-border);
--font-size: var(--${this.size}-font-size);
- --padding: var(--${this.size}-padding);
--text-color: var(--${this.buttonStyle}-text);
+ ${
+ this.buttonBorderRadius === 'normal'
+ ? '--padding: var(--' + this.size + '-padding);'
+ : '--padding: var(--' + this.size + '-rounded-padding);'
+ }
+ --border-radius: var(--${this.buttonBorderRadius}-border-radius);
}`;
}
}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
index 7b1197ab70c2..56765c4ca3ed 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
@@ -7,3 +7,4 @@ export { DevToolbarSelect } from './select.js';
export { DevToolbarToggle } from './toggle.js';
export { DevToolbarTooltip } from './tooltip.js';
export { DevToolbarWindow } from './window.js';
+export { DevToolbarRadioCheckbox } from './radio-checkbox.js';
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts
new file mode 100644
index 000000000000..a223bf1a848b
--- /dev/null
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts
@@ -0,0 +1,121 @@
+const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+
+type RadioStyle = (typeof styles)[number];
+
+export class DevToolbarRadioCheckbox extends HTMLElement {
+ private _radioStyle: RadioStyle = 'purple';
+ input: HTMLInputElement;
+
+ shadowRoot: ShadowRoot;
+
+ get radioStyle() {
+ return this._radioStyle;
+ }
+
+ set radioStyle(value) {
+ if (!styles.includes(value)) {
+ console.error(`Invalid style: ${value}, expected one of ${styles.join(', ')}.`);
+ return;
+ }
+ this._radioStyle = value;
+ this.updateStyle();
+ }
+
+ static observedAttributes = ['radio-style', 'checked', 'disabled', 'name', 'value'];
+
+ constructor() {
+ super();
+ this.shadowRoot = this.attachShadow({ mode: 'open' });
+
+ this.shadowRoot.innerHTML = `
+
+
+ `;
+ this.input = document.createElement('input');
+ this.input.type = 'radio';
+ this.shadowRoot.append(this.input);
+ }
+
+ connectedCallback() {
+ this.updateInputState();
+ this.updateStyle();
+ }
+
+ updateStyle() {
+ const styleElement = this.shadowRoot.querySelector('#selected-style');
+
+ if (styleElement) {
+ styleElement.innerHTML = `
+ :host {
+ --unchecked-color: var(--${this._radioStyle}-unchecked);
+ --checked-color: var(--${this._radioStyle}-checked);
+ }
+ `;
+ }
+ }
+
+ updateInputState() {
+ this.input.checked = this.hasAttribute('checked');
+ this.input.disabled = this.hasAttribute('disabled');
+ this.input.name = this.getAttribute('name') || '';
+ this.input.value = this.getAttribute('value') || '';
+ }
+
+ attributeChangedCallback() {
+ if (this.hasAttribute('radio-style')) {
+ this.radioStyle = this.getAttribute('radio-style') as RadioStyle;
+ }
+
+ this.updateInputState();
+ }
+}
From de86dc36ed64da143f9dfc45a41ae5c5cc169a17 Mon Sep 17 00:00:00 2001
From: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:21:41 +0200
Subject: [PATCH 2/2] chore: changeset
---
.changeset/metal-crabs-applaud.md | 5 +++++
.changeset/twelve-dolphins-roll.md | 5 +++++
2 files changed, 10 insertions(+)
create mode 100644 .changeset/metal-crabs-applaud.md
create mode 100644 .changeset/twelve-dolphins-roll.md
diff --git a/.changeset/metal-crabs-applaud.md b/.changeset/metal-crabs-applaud.md
new file mode 100644
index 000000000000..c7cb3a26a7f6
--- /dev/null
+++ b/.changeset/metal-crabs-applaud.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Adds a new radio checkbox component to the dev toolbar UI library (`astro-dev-toolbar-radio-checkbox`)
diff --git a/.changeset/twelve-dolphins-roll.md b/.changeset/twelve-dolphins-roll.md
new file mode 100644
index 000000000000..baf944281d70
--- /dev/null
+++ b/.changeset/twelve-dolphins-roll.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Adds a new `buttonBorderRadius` property to the `astro-dev-toolbar-button` component for the dev toolbar component library. This property can be useful to make a fully rounded button with an icon in the center.