misc(ui): enhancements to button, link and flex widgets

DataKitchen · Sep 30, 2024 · 764bd12 · 764bd12
1 parent c48607d
commit 764bd12
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/testgen/ui/assets/style.css b/testgen/ui/assets/style.css
@@ -74,7 +74,7 @@ div[data-testid="stVerticalBlock"] {
     gap: 0.5rem;
 }
 
-div[data-testid="collapsedControl"] {
+div[data-testid="stSidebarCollapsedControl"] {
     top: 0.5rem;
 }
 /*  */
@@ -166,22 +166,22 @@ button[title="Show password text"] {
     background-color: var(--dk-card-background);
 }
 
-[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] {
+div[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] {
     width: 100%;
     flex-direction: row;
 }
 
-[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"],
-[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"] > div[data-testid] {
+div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"],
+div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-row) [data-testid="stVerticalBlock"] > div[data-testid="element-container"] > div[data-testid] {
     width: auto !important;
     max-height: 40px;
 }
 
-[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-start) [data-testid="stVerticalBlock"] {
+div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-start) [data-testid="stVerticalBlock"] {
     justify-content: flex-start;
 }
 
-[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-end) [data-testid="stVerticalBlock"] {
+div[data-testid="stVerticalBlockBorderWrapper"]:has( > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.flex-end) [data-testid="stVerticalBlock"] {
     justify-content: flex-end;
 }
 

diff --git a/testgen/ui/components/frontend/js/components/button.js b/testgen/ui/components/frontend/js/components/button.js
@@ -7,6 +7,7 @@
  * @property {(string|null)} tooltip
  * @property {(string|null)} tooltipPosition
  * @property {(Function|null)} onclick
+ * @property {(bool)} disabled
  * @property {string?} style
  */
 import { enforceElementWidth } from '../utils.js';
@@ -45,6 +46,7 @@ const Button = (/** @type Properties */ props) => {
             class: `tg-button tg-${props.type.val}-button ${props.type.val !== 'icon' && isIconOnly ? 'tg-icon-button' : ''}`,
             style: props.style?.val,
             onclick: onClickHandler,
+            disabled: !!props.disabled?.val,
         },
         span({class: 'tg-button-focus-state-indicator'}, ''),
         props.icon ? i({class: 'material-symbols-rounded'}, props.icon) : undefined,
@@ -118,6 +120,15 @@ button.tg-button:has(span) {
     padding: 8px 16px;
 }
 
+button.tg-button:not(.tg-icon-button):has(span):has(i) {
+    padding-left: 8px;
+}
+
+button.tg-button[disabled] {
+    color: var(--disabled-text-color);
+    cursor: not-allowed;
+}
+
 button.tg-button.tg-icon-button > i {
     font-size: 18px;
 }
@@ -126,7 +137,7 @@ button.tg-button > i:has(+ span) {
     margin-right: 8px;
 }
 
-button.tg-button:hover .tg-button-focus-state-indicator::before {
+button.tg-button:hover:not([disabled]) .tg-button-focus-state-indicator::before {
     opacity: var(--button-hover-state-opacity);
 }
 `);

diff --git a/testgen/ui/components/frontend/js/components/link.js b/testgen/ui/components/frontend/js/components/link.js
@@ -10,15 +10,20 @@
  * @property {string?} right_icon
  * @property {number?} right_icon_size
  * @property {number?} height
+ * @property {number?} width
  * @property {string?} style
  */
+import { enforceElementWidth } from '../utils.js';
 import van from '../van.min.js';
 import { Streamlit } from '../streamlit.js';
 
 const { a, div, i, span } = van.tags;
 
 const Link = (/** @type Properties */ props) => {
     Streamlit.setFrameHeight(props.height?.val || 24);
+    if (props.width?.val) {
+        enforceElementWidth(window.frameElement, props.width.val);
+    }
 
     if (!window.testgen.loadedStylesheets.link) {
         document.adoptedStyleSheets.push(stylesheet);

diff --git a/testgen/ui/components/widgets/button.py b/testgen/ui/components/widgets/button.py
@@ -13,6 +13,7 @@ def button(
     tooltip: str | None = None,
     tooltip_position: TooltipPosition = "left",
     on_click: typing.Callable[..., None] | None = None,
+    disabled: bool = False,
     style: str | None = None,
     key: str | None = None,
 ) -> typing.Any:
@@ -25,7 +26,7 @@ def button(
     :param on_click: click handler for this button
     """
 
-    props = {"type": type_}
+    props = {"type": type_, "disabled": disabled}
     if type_ != "icon":
         if not label:
             raise ValueError(f"A label is required for {type_} buttons")

diff --git a/testgen/ui/components/widgets/link.py b/testgen/ui/components/widgets/link.py
@@ -13,6 +13,7 @@ def link(
     right_icon: str | None = None,
     right_icon_size: float = 20.0,
     height: float | None = 21.0,
+    width: float | None = None,
     style: str | None = None,
     key: str = "testgen:link",
 ) -> None:
@@ -32,6 +33,9 @@ def link(
     if style:
         props.update({"style": style})
 
+    if width:
+        props.update({"width": width})
+
     clicked = component(id_="link", key=key, props=props)
     if clicked:
         Router().navigate(to=href, with_args=params)