misc(ui): updates to components and widgets

testgen/ui/assets/style.css

@@ -3,6 +3,15 @@ body {
     --link-color: #1976d2;
     --error-color: #EF5350;
 
+    --red: #EF5350;
+    --orange: #FF9800;
+    --yellow: #FDD835;
+    --green: #9CCC65;
+    --purple: #AB47BC;
+    --blue: #42A5F5;
+    --brown: #8D6E63;
+    --grey: #BDBDBD;
+
     --primary-text-color: #000000de;
     --secondary-text-color: #0000008a;
     --disabled-text-color: #00000042;
@@ -129,10 +138,6 @@ button[title="Show password text"] {
 }
 
 /* Cards Component */
-[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card) {
-    background-color: var(--dk-card-background);
-}
-
 [data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card) .testgen_card-header > .testgen_card-title {
     margin: unset;
     padding: unset;
@@ -149,6 +154,10 @@ button[title="Show password text"] {
 }
 /* ... */
 
+[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.bg-white) {
+    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"] {
     width: 100%;
     flex-direction: row;
@@ -173,19 +182,20 @@ button[title="Show password text"] {
 }
 
 /* Stylistic equivalent of st.caption("text") for customization
-Use as st.html('<p class="caption" style="...">text</p>') */
+Use as testgen.caption("text", "extra_styles") */
 .caption {
     color: var(--caption-text-color);
     font-size: 14px;
     margin-bottom: 0;
 }
 
-/* Stylistic equivalent of testgen.link() to match font style of links
-Use as st.html('<p class="line" style="...">text</p>') */
-.line {
+/* Stylistic equivalent of testgen.link() to match font size/style of links
+Use as testgen.text("text", "extra_styles") */
+.text {
     font-size: 14px;
     font-family: 'Roboto', 'Helvetica Neue', sans-serif;
     line-height: 16.5px;
+    margin-bottom: 0;
 }
 
 /* Tooltips */

testgen/ui/components/frontend/css/shared.css

@@ -9,11 +9,22 @@ body {
 
 body {
     --primary-color: #06a04a;
+    --link-color: #1976d2;
+    --error-color: #EF5350;
+
+    --red: #EF5350;
+    --orange: #FF9800;
+    --yellow: #FDD835;
+    --green: #9CCC65;
+    --purple: #AB47BC;
+    --blue: #42A5F5;
+    --brown: #8D6E63;
+    --grey: #BDBDBD;
+
     --primary-text-color: #000000de;
     --secondary-text-color: #0000008a;
     --disabled-text-color: #00000042;
     --caption-text-color: rgba(49, 51, 63, 0.6); /* Match Streamlit's caption color */
-    --link-color: #1976d2;
 
     --sidebar-background-color: white;
     --sidebar-item-hover-color: #f5f5f5;

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 {string?} style
  */
 import { enforceElementWidth } from '../utils.js';
 import van from '../van.min.js';
@@ -42,6 +43,7 @@ const Button = (/** @type Properties */ props) => {
     return button(
         {
             class: `tg-button tg-${props.type.val}-button ${props.type.val !== 'icon' && isIconOnly ? 'tg-icon-button' : ''}`,
+            style: props.style?.val,
             onclick: onClickHandler,
         },
         span({class: 'tg-button-focus-state-indicator'}, ''),

testgen/ui/components/widgets/__init__.py

@@ -6,13 +6,18 @@
 from testgen.ui.components.widgets.expander_toggle import expander_toggle
 from testgen.ui.components.widgets.link import link
 from testgen.ui.components.widgets.page import (
+    caption,
+    css_class,
+    divider,
     flex_row_end,
     flex_row_start,
     no_flex_gap,
     page_header,
+    text,
     toolbar_select,
     whitespace,
 )
+from testgen.ui.components.widgets.paginator import paginator
 from testgen.ui.components.widgets.sidebar import sidebar
 from testgen.ui.components.widgets.sorting_selector import sorting_selector
 from testgen.ui.components.widgets.summary_bar import summary_bar

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,
+    style: str | None = None,
     key: str | None = None,
 ) -> None:
     """
@@ -36,4 +37,7 @@ def button(
     if tooltip:
         props.update({"tooltip": tooltip, "tooltipPosition": tooltip_position})
 
+    if style:
+        props.update({"style": style})
+
     component(id_="button", key=key, props=props, on_change=on_click)

testgen/ui/components/widgets/card.py

@@ -20,7 +20,7 @@ def card(
     extra_css_class: str = "",
 ) -> typing.Generator["CardContext", None, None]:
     with st.container(border=border):
-        st.html(f'<i class="{CARD_CLASS} {extra_css_class}"></i>')
+        st.html(f'<i class="bg-white {CARD_CLASS} {extra_css_class}"></i>')
 
         title_column, actions_column = st.columns([.5, .5], vertical_alignment="center")
         if title or subtitle:

testgen/ui/components/widgets/page.py

@@ -21,7 +21,7 @@ def page_header(
             st.page_link(help_link, label=" ", icon=":material/help:")
 
     if breadcrumbs:
-        tg_breadcrumbs(breadcrumbs=breadcrumbs)  
+        tg_breadcrumbs(breadcrumbs=breadcrumbs)
 
     st.write(
         '<hr style="background-color: #21c354; margin-top: -8px;'
@@ -31,12 +31,12 @@ def page_header(
     if "last_page" in st.session_state:
         if title != st.session_state["last_page"]:
             st.cache_data.clear()
-    st.session_state["last_page"] = title 
+    st.session_state["last_page"] = title
 
 
 def toolbar_select(
     options: pd.DataFrame | list[str],
-    value_column: str | None = None, 
+    value_column: str | None = None,
     display_column: str | None = None,
     default_value = None,
     required: bool = False,
@@ -75,14 +75,30 @@ def update_query_params():
 
     if selected and isinstance(options, pd.DataFrame):
         return options.loc[options[display_column] == selected, value_column].iloc[0]
-    
+
     return selected
 
 
 def whitespace(size: float, container: DeltaGenerator | None = None):
     _apply_html(f'<div style="height: {size}rem"></div>', container)
 
 
+def divider(margin_top: int = 0, margin_bottom: int = 0, container: DeltaGenerator | None = None):
+    _apply_html(f'<hr style="margin: {margin_top}px 0 {margin_bottom}px;">', container)
+
+
+def text(text: str, styles: str = "", container: DeltaGenerator | None = None):
+    _apply_html(f'<p class="text" style="{styles}">{text}</p>', container)
+
+
+def caption(text: str, styles: str = "", container: DeltaGenerator | None = None):
+    _apply_html(f'<p class="caption" style="{styles}">{text}</p>', container)
+
+
+def css_class(css_classes: str, container: DeltaGenerator | None = None):
+    _apply_html(f'<i class="{css_classes}"></i>', container)
+
+
 def flex_row_start(container: DeltaGenerator | None = None):
     _apply_html('<i class="flex-row flex-start"></i>', container)
 
@@ -93,7 +109,7 @@ def flex_row_end(container: DeltaGenerator | None = None):
 
 def no_flex_gap(container: DeltaGenerator | None = None):
     _apply_html('<i class="no-flex-gap"></i>', container)
-    
+
 
 def _apply_html(html: str, container: DeltaGenerator | None = None):
     if container: