Support horizontal orientation of radio buttons (#3620)

jupyter-widgets · Aug 22, 2024 · b05c848 · b05c848
1 parent 3171b1c
commit b05c848
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/packages/controls/css/widgets-base.css b/packages/controls/css/widgets-base.css
@@ -975,6 +975,19 @@
   margin-bottom: var(--jp-widgets-radio-item-height-adjustment);
 }
 
+/* <DEPRECATED> */
+.widget-radio-box-vertical, /* </DEPRECATED> */
+.jupyter-widget-radio-box-vertical {
+  flex-direction: column;
+}
+
+
+/* <DEPRECATED> */
+.widget-radio-box-horizontal, /* </DEPRECATED> */
+.jupyter-widget-radio-box-horizontal {
+  flex-direction: row;
+}
+
 /* <DEPRECATED> */
 .widget-radio-box label, /* </DEPRECATED> */
 .jupyter-widget-radio-box label {
@@ -983,6 +996,11 @@
   font-size: var(--jp-widgets-font-size);
 }
 
+.widget-radio-box-horizontal label,
+.jupyter-widget-radio-box-horizontal label {
+	margin: 0 calc(var(--jp-widgets-input-padding) * 2) 0 0;
+}
+
 /* <DEPRECATED> */
 .widget-radio-box input, /* </DEPRECATED> */
 .jupyter-widget-radio-box input {

diff --git a/packages/controls/src/widget_selection.ts b/packages/controls/src/widget_selection.ts
@@ -288,6 +288,7 @@ export class RadioButtonsModel extends SelectionModel {
       tooltips: [],
       icons: [],
       button_style: '',
+			orientation:'vertical',
     };
   }
 }
@@ -305,17 +306,24 @@ export class RadioButtonsView extends DescriptionView {
     this.el.appendChild(this.container);
     this.container.classList.add('widget-radio-box');
 
-    this.update();
+		this.update();
   }
 
   /**
    * Update the contents of this view
    *
-   * Called when the model is changed.  The model may have been
-   * changed by another view or by a state update from the back-end.
+	 * Called when the model is changed.  The model may have been
+	 * changed by another view or by a state update from the back-end.
    */
-  update(options?: any): void {
-    const items: string[] = this.model.get('_options_labels');
+	update(options?: any): void {
+		if (this.model.get('orientation') === 'vertical') {
+			this.container.classList.remove('widget-radio-box-horizontal');
+			this.container.classList.add('widget-radio-box-vertical');
+		} else {
+			this.container.classList.remove('widget-radio-box-vertical');
+			this.container.classList.add('widget-radio-box-horizontal');
+		}
+		const items: string[] = this.model.get('_options_labels');
     const radios = Array.from(
       this.container.querySelectorAll<HTMLInputElement>('input[type="radio"]')
     ).map((x) => x.value);

diff --git a/python/ipywidgets/ipywidgets/widgets/widget_selection.py b/python/ipywidgets/ipywidgets/widgets/widget_selection.py
@@ -478,6 +478,10 @@ class RadioButtons(_Selection):
     _view_name = Unicode('RadioButtonsView').tag(sync=True)
     _model_name = Unicode('RadioButtonsModel').tag(sync=True)
 
+    orientation = CaselessStrEnum(
+        values=['horizontal', 'vertical'], default_value='vertical',
+        help="Vertical or horizontal.").tag(sync=True)
+
 
 @register
 @doc_subst(_doc_snippets)