Pack fixes: Rocket 2.0 Button and Button Group, Material UI Button and Text Input

Contents

1. Rocket 2.0 Button: long label spills and the loader goes out of view
2. Rocket 2.0 Button and Button Group: radius field looks empty
3. Rocket 2.0 Button: hover left at Brand darkens the button (no change)
4. Pack widgets: "Dynamic height" shown but has no effect
5. Pack widgets: "Collapse when hidden" missing
6. Button Group: default name contains "legacy"
7. Button Group: three inputs set the selection, and switching mode loses the default
8. Button Group: Variant options overflow the inspector panel
9. Button Group: buttons stay clickable while loading
10. Button Group: "Value type" dropdown is a native select
11. Button Group: Large size spills outside its box
12. Material UI Button: overflows its widget, and Large spills
13. Material UI Text Input and Number Field: error and helper text cut off
14. Material UI Text Input: Max length appears twice
15. Styles tab: long labels push their control out of the panel

---

1. Rocket 2.0 Button: long label spills and the loader goes out of view

Issue Description

A long Label stays on one line and spills out of the button. While loading, the spinner is pushed out of view.

Root Cause

.ui-btn is nowrap with a fixed height and the label was a bare text node, so the content overflowed and the centred flex row clipped the spinner. Fix: the label is now in a shrinking, wrapping .n2-btn-label span; the button keeps its box height and clips at the bottom. Known gap: a very long label is cut with no ellipsis.

Areas to Test

• Long label, normal and loading, in a narrow and a wide box: spinner visible, button height unchanged.
• Sm, Default, Lg and Link variant; a short label looks unchanged.

---

2. Rocket 2.0 Button and Button Group: radius field looks empty

Issue Description

The Button radius and Group radius fields are blank by default, so nothing says they follow the theme.

Root Cause

useThemeRadius stores no default on purpose (a stored '' was saved as {{""}}). Fix: new useAutoRadius (styleDefaults.ts) defaults the field to auto, which follows the theme radius; a typed number overrides it. Used by Button and Button Group only; other Rocket widgets keep the blank number field.

Areas to Test

• New Button and Button Group show auto and draw the theme radius; a typed number is drawn.
• Existing apps with a numeric radius still draw it.

---

3. Rocket 2.0 Button: hover left at Brand darkens the button (no change)

Issue Description

With Hover background at its default (Brand), hovering darkens the button.

Root Cause

The default variant darkens on hover by design (.ui-btn--default:hover in ui.css), so this stays. An earlier change that made hover stay Brand was reverted. The hover field still shows a Brand swatch while the button darkens.

Areas to Test

• Default variant, hover untouched: darkens as before; a picked hover colour applies.

---

4. Pack widgets: "Dynamic height" shown but has no effect

Issue Description

Additional Actions shows "Dynamic height" for Button, but toggling it changes nothing.

Root Cause

SdkComponentHost only honours dynamicHeight when the manifest has fit: true, and Button is fit: false. Fix: additionalActionProps takes a fit argument and the inspector hides the toggle unless it is true. This applies to every non-fit pack widget; saved values still render.

Areas to Test

• Button shows no Dynamic height toggle; Button Group and Accordion (fit: true) still do and it works.

---

5. Pack widgets: "Collapse when hidden" missing

Issue Description

Pack widgets did not offer "Collapse when hidden", so a hidden one left a gap.

Root Cause

collapseWhenHidden was missing from the PackComponent config (frontend and server packComponent.js) and from HOST_PROPERTY_KEYS; the layout code already supports it. Fix: added the toggle (default off) to both copies and the keys. It covers every pack (Rocket, Ant, MUI). The reflow was not re-tested in a browser.

Areas to Test

• Hide a Button, Button Group and one Ant and one MUI widget with the toggle on: widgets below move up; off: the gap stays.
• Bound via fx and driven by Set visibility; existing apps unaffected.

---

6. Button Group: default name contains "legacy"

Issue Description

A new Button Group is named buttongrouplegacy2 instead of buttongroup1.

Root Cause

computeComponentName looked the pack component's name up in the native widget registry and found ButtonGroupLegacy. The same clash hit Ant Modal, TextArea and Divider. Fix: pack components are named after themselves (drop, paste, duplicate and the collision fallback).

Areas to Test

• Drop Button Group, Modal, TextArea and Divider: buttongroup1, modal1, textarea1, divider1; numbering increments.
• Copy, paste and duplicate; native widgets and saved apps keep their names.

---

7. Button Group: three inputs set the selection, and switching mode loses the default

Issue Description

"Default selected", "Selected value" and "Selected values" were all editable, though the last two are outputs and override the default. Switching Single and Multiple cleared the default selection.

Root Cause

value and selected were read back as the selection, and the default effect re-ran on a mode change with an empty Default selected, writing []. Fix: each button gets a Default switch (Rocket Button Group only, hasOptionDefault), as MultiSelect has. Multiple selects every marked button, Single the first, re-applied on every mode change. value, selected and the old Default selected are hidden but still exposed; an app that saved Default selected keeps it. The sample Week button is marked default.

Areas to Test

• Mark two buttons: Single selects the first, Multiple both; switch modes back and forth. Mark none, and Actions mode: nothing selected.
• {{buttongroup1.value}} and .selected still update on click; Ant Button Group shows no Default switch.

---

8. Button Group: Variant options overflow the inspector panel

Issue Description

The Variant switch (Outline, Secondary, Default, Ghost) is wider than the panel.

Root Cause

Variant used inspector: 'switch' with four labelled segments. Fix: removed the hint, so it is a dropdown like Button's. The saved value is unchanged.

Areas to Test

• Variant fits the panel in a narrow and a wide inspector and all four options select.

---

9. Button Group: buttons stay clickable while loading

Issue Description

When loading, a spinner shows but the buttons still look enabled and react to clicks.

Root Cause

loading: "own" skips the host's inert wrapper, and disabled in ButtonGroup.tsx ignored control.loading. Fix: disabled now includes loading; the setSelected and clear actions still work.

Areas to Test

• Loading on (toggle and Set loading): buttons look disabled, no selection change, no onClick/onChange; off again: works. Disabled and loading together.

---

10. Button Group: "Value type" dropdown is a native select

Issue Description

Each button's option popup has a Value type dropdown that is a native browser menu, not the inspector's dropdown.

Root Cause

OptionsEditor.tsx and the shared SelectField used a native <select>. Fix: new Dropdown in fields.tsx wraps the inspector's own Select; its menu gets zIndex: 2000 to open above the popover, and a click in it no longer closes the popup. SelectField is also used by the Table columns editor and the per-button Variant, so those change too.

Areas to Test

• Open an option on Button Group, Select and RadioGroup: the dropdown looks like the others and its menu opens above the popup; changing the value type coerces the value.
• Table column Type and Alignment, per-button Variant, dark mode.

---

11. Button Group: Large size spills outside its box

Issue Description

With Size set to Large, the buttons stick out past the widget's box.

Root Cause

A Large button is a fixed 40px (.ui-btn--lg) and the group did not shrink with a shorter box. Fix: the group's row shrinks to the space left in the box and the buttons follow it (max-height: 100%), with a 24px minimum. Checked in Chrome: a Large group in a 38px box is now 38px; other sizes are unchanged. With a label, the box needs to be taller than label plus group.

Areas to Test

• Large in a 40px box, no label: stays inside. Small, Default and Large with a label in a tall box: unchanged.
• Vertical orientation, Full width and Loading: unchanged.

---

12. Material UI Button: overflows its widget, and Large spills

Issue Description

With a long label the button is wider than its widget and is cut off mid-word with no ellipsis. At Large the button is taller than the default box and spills.

Root Cause

With a Tooltip set, the Tooltip's wrapper span sized to the full label (478px in a 150px box), so the button could not shrink. A Large button is 42.25px and the default box is 40px. Fix: the wrapper takes at most the box's width (.tj-mui-fit), the button is capped at the box height (max-height: 100%), and new MUI Buttons default to a 50px box. MUI's size heights are unchanged. Checked in Chrome; CSS only, so no unit test.

Areas to Test

• Long label with a Tooltip, Full width off, in a narrow box: stays inside with an ellipsis; Full width on fills the box.
• Large, Medium and Small in a 40px and a 50px box: nothing spills; a short label stays centred.

---

13. Material UI Text Input and Number Field: error and helper text cut off

Issue Description

At the default height (70px) the error and helper text under the field are cut off, so users can't see why an input is invalid.

Root Cause

The default box (defaultHeight 7) is shorter than the label gap, the field and the helper row (about 88px). Fix: new Text Fields and Number Fields default to defaultHeight 9 (90px); existing widgets keep their size.

Areas to Test

• New Text Field and Number Field with helper text and with an error: the line is visible in each Size and Variant.

---

14. Material UI Text Input: Max length appears twice

Issue Description

Max length was under Properties (blocks typing) and under Validation (shows an error).

Root Cause

The component declared its own maxLength and the host's Validation section also offers one. Fix: removed the Properties one. No migration (still in testing), so a saved value is ignored.

Areas to Test

• Properties has no Max length; Validation Max length shows its error.

---

15. Styles tab: long labels push their control out of the panel

Issue Description

On the Styles tab (clearest on Material UI, e.g. "Primary (palette.primary.main)") the label wraps and the colour or number control beside it is pushed past the panel edge and cut off.

Root Cause

Every pack style is drawn beside its label, and a long label leaves too little width. Fix: styleFieldMeta marks a label longer than 18 characters as newLine, so its control is drawn on the line below. The labels are unchanged; this applies to every pack's Styles tab and was not checked in the editor.

Areas to Test

• Material UI Styles tab: labels and controls line up and fit the panel, in light and dark mode.
• A Rocket 2.0 Styles tab: short labels stay beside their control.