mod-arch-kubeflow 1.5.0 → 1.8.0

package/dist/style/MUI-theme.scss

@@ -140,6 +140,9 @@
   --pf-t--global--border--color--status--success--default: var(--mui-palette-success-main);
   --pf-t--global--border--color--status--info--default: var(--mui-palette-info-main);
 
+  // MUI's warning background is darker than PF's default yellow, requiring white text for contrast
+  --pf-t--global--text--color--status--on-warning--default: var(--mui-palette-warning-contrastText);
+
   // ═══════════════════════════════════════════════════════════════════════════
   // MUI CUSTOM VARIABLES
   // Custom variables for MUI-specific values used in component overrides below.
@@ -166,6 +169,10 @@
   // Backdrop
   --mui-backdrop-BackgroundColor: rgba(0, 0, 0, 0.5);
 
+  // Switch - MUI/iOS-style switches use a pill shape (fully rounded ends)
+  // This preserves the capsule appearance while other components use the MUI border radius
+  --mui-switch--BorderRadius: 9999px;
+
   // Button
   --mui-button-FontWeight: 500;
   --mui-button--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -194,6 +201,10 @@
   --mui-form-fieldset--LegendPadding: var(--mui-spacing-4px); // 4px horizontal padding
   --mui-form-fieldset--LegendFontSize: var(--pf-t--global--font--size--body--sm); // 0.75rem
 
+  // Form control border styling (MUI input defaults)
+  --mui-form-control--BorderWidth: 1px;
+  --mui-form-control--BorderColor: rgba(0, 0, 0, 0.23); // MUI standard input border
+
   // Helper text
   --mui-helper-text__item--FontWeight: 400;
 
@@ -286,6 +297,9 @@
   --mui-spacing-16px: calc(2 * var(--mui-spacing));
   --mui-spacing-32px: calc(4 * var(--mui-spacing));
 
+  // Input group control buttons (e.g. password toggle, mount path edit): compact circular button
+  --mui-input-group-control-button--size: 28px;
+  --mui-input-group-control-button--container-padding-inline-end: 6px;
 
 }
 
@@ -304,6 +318,12 @@
 ╚════════════════════════════════════════════════════════════════════════════════╝
 */
 
+// PF table: opt-in vertical-align middle for tables with mixed content (text + controls).
+// Add class mui-table-cells-middle to the Table when rows have inputs/buttons; keeps text-only tables on PF default.
+.mui-theme .pf-v6-c-table.mui-table-cells-middle .pf-v6-c-table__td {
+  vertical-align: middle;
+}
+
 .mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
   --pf-v6-c-button--PaddingInlineStart: 0;
   --pf-v6-c-button--PaddingInlineEnd: 0;
@@ -351,6 +371,8 @@
 
 .mui-theme .pf-v6-c-backdrop {
   --pf-v6-c-backdrop--BackgroundColor: var(--mui-backdrop-BackgroundColor);
+  // Sidebar uses MUI drawer z-index (1200); modal must render above it
+  --pf-v6-c-backdrop--ZIndex: var(--mui-zIndex-modal);
 }
 
 .mui-theme .pf-v6-c-brand.kubeflow_brand {
@@ -546,6 +568,44 @@
   border-radius: var(--pf-v6-c-form-control--BorderRadius, var(--mui-shape-borderRadius));
 }
 
+// NumberInput uses a span.pf-v6-c-form-control, so it gets excluded by the :not(span) rule above.
+// This adds the border specifically to NumberInput's form-control span.
+// Uses PF component variables which inherit from global tokens set at :root
+.mui-theme .pf-v6-c-number-input span.pf-v6-c-form-control {
+  border: var(--pf-v6-c-form-control--before--BorderWidth) solid var(--pf-v6-c-form-control--before--BorderColor);
+  box-sizing: border-box;
+
+  // Hover state - uses PF component hover variable
+  &:hover {
+    border-color: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  }
+
+  // Focus state - use box-shadow to simulate thicker border without affecting layout
+  // Uses PF expanded (clicked) color which maps to primary/focus color
+  &:focus-within {
+    border-color: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
+    // Simulate 2px border with 1px border + 1px inset box-shadow
+    box-shadow: inset 0 0 0 1px var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
+  }
+}
+
+// NumberInput layout fixes - ensure buttons fill full height and connect seamlessly
+.mui-theme .pf-v6-c-number-input {
+  // Ensure consistent height
+  align-items: stretch;
+
+  .pf-v6-c-input-group__item {
+    display: flex;
+    align-items: stretch;
+  }
+
+  // Make buttons take full height of their container
+  .pf-v6-c-button {
+    height: 100%;
+    align-self: stretch;
+  }
+}
+
 // Remove pseudo-element borders everywhere since we're using real borders now
 .mui-theme .pf-v6-c-form-control::after,
 .mui-theme .pf-v6-c-form-control::before {
@@ -668,6 +728,12 @@
   border-color: var(--mui-palette-action-disabled);
 }
 
+// Hide menu-toggle's ::before pseudo-element border inside fieldset wrapper
+// The fieldset wrapper provides the border, so we don't need the ::before border
+.mui-theme .form-fieldset-wrapper .pf-v6-c-menu-toggle::before {
+  border: none;
+}
+
 .mui-theme .form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
   border-color: var(--mui-palette-error-main);
 }
@@ -676,20 +742,71 @@
   border-color: var(--mui-palette-error-main);
 }
 
-.mui-theme .form-fieldset-wrapper .pf-v6-c-input-group__item button {
-  // Aligns EyeIcon in password input
-  --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
-  --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
-  --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
-  --pf-v6-c-button--BorderRadius: 50%;
+// Input group control buttons: use PF structure only (Button variant="control" in InputGroup).
+// No app class names required; any consumer using variant="control" gets this styling.
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item:has(.pf-v6-c-button.pf-m-control) {
+  display: flex;
+  align-items: center;
 }
 
-.mui-theme .form-fieldset-wrapper:focus-within .form-fieldset {
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item:has(.pf-v6-c-button.pf-m-control):last-child {
+  padding-inline-end: var(--mui-input-group-control-button--container-padding-inline-end);
+}
+
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item .pf-v6-c-button.pf-m-control {
+  --pf-v6-c-button--BorderColor: transparent;
+  --pf-v6-c-button--hover--BorderColor: transparent;
+  --pf-v6-c-button--m-control--BorderColor: transparent;
+  --pf-v6-c-button--m-control--hover--BorderColor: transparent;
+  --pf-v6-c-button--m-control--m-clicked--BorderColor: transparent;
+  --pf-v6-c-button--PaddingBlockStart: 0;
+  --pf-v6-c-button--PaddingBlockEnd: 0;
+  --pf-v6-c-button--PaddingInlineStart: 0;
+  --pf-v6-c-button--PaddingInlineEnd: 0;
+  --pf-v6-c-button--m-control--BorderRadius: 50%;
+
+  width: var(--mui-input-group-control-button--size);
+  height: var(--mui-input-group-control-button--size);
+  min-width: var(--mui-input-group-control-button--size);
+  min-height: var(--mui-input-group-control-button--size);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  align-self: center;
+}
+
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item .pf-v6-c-button.pf-m-control .pf-v6-c-button__icon,
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item .pf-v6-c-button.pf-m-control svg {
+  display: block;
+  margin: 0;
+}
+
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item .pf-v6-c-button.pf-m-control:hover {
+  border-radius: 50%;
+  outline: none;
+  background-color: var(--pf-t--global--background--color--action--plain--hover, rgba(0, 0, 0, 0.04));
+}
+
+.mui-theme .pf-v6-c-input-group .pf-v6-c-input-group__item .pf-v6-c-button.pf-m-control:focus-visible {
+  border-radius: 50%;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
+}
+
+.mui-theme .form-fieldset-wrapper:focus-within:not(:has(.pf-m-error)) .form-fieldset {
   border-color: var(--mui-palette-primary-main);
   border-width: var(--mui-form--focus--BorderWidth);
   padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
+.mui-theme .form-fieldset-wrapper:focus-within:has(.pf-m-error) .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
+}
+
 // Apply form-fieldset-wrapper styling to ANY descendant of .pf-v6-c-form (Form component)
 // This ensures styling works regardless of nesting depth or wrapper divs
 .mui-theme .pf-v6-c-form .form-fieldset {
@@ -751,16 +868,14 @@
   border-color: var(--mui-palette-error-main);
 }
 
-.mui-theme .pf-v6-c-form .form-fieldset-wrapper .pf-v6-c-input-group__item button {
-  // Aligns EyeIcon in password input
-  --pf-v6-c-button--PaddingBlockStart: var(--mui-spacing-16px);
-  --pf-v6-c-button--PaddingBlockEnd: var(--mui-spacing-16px);
-  --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
-  --pf-v6-c-button--BorderRadius: 50%;
+.mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within:not(:has(.pf-m-error)) .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
-.mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within .form-fieldset {
-  border-color: var(--mui-palette-primary-main);
+.mui-theme .pf-v6-c-form .form-fieldset-wrapper:focus-within:has(.pf-m-error) .form-fieldset {
+  border-color: var(--mui-palette-error-main);
   border-width: var(--mui-form--focus--BorderWidth);
   padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
@@ -838,20 +953,19 @@
   border-color: var(--mui-palette-error-main);
 }
 
-.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper .pf-v6-c-input-group__item button {
-  // Aligns EyeIcon in password input
-  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--BorderColor: var(--mui-palette-common-white);
-  --pf-v6-c-button--BorderRadius: 50%;
-}
 
-.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within .form-fieldset {
+.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within:not(:has(.pf-m-error)) .form-fieldset {
   border-color: var(--mui-palette-primary-main);
   border-width: var(--mui-form--focus--BorderWidth);
   padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
+.mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within:has(.pf-m-error) .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
+}
+
 .mui-theme [class*="pf-v6-l-"] .form-fieldset-wrapper:focus-within {
   color: var(--mui-palette-primary-main);
 }
@@ -954,12 +1068,18 @@
   border-color: var(--mui-palette-common-black);
 }
 
-.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within .form-fieldset {
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within:not(:has(.pf-m-error)) .form-fieldset {
   border-color: var(--mui-palette-primary-main);
   border-width: var(--mui-form--focus--BorderWidth);
   padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
 }
 
+.mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within:has(.pf-m-error) .form-fieldset {
+  border-color: var(--mui-palette-error-main);
+  border-width: var(--mui-form--focus--BorderWidth);
+  padding: var(--mui-form--focus--Padding) var(--mui-form--focus--Padding);
+}
+
 .mui-theme .pf-v6-c-expandable-section .form-fieldset-wrapper:focus-within {
   color: var(--mui-palette-primary-main);
 }
@@ -996,7 +1116,8 @@
   border-color: var(--mui-palette-primary-main);
 }
 
-.mui-theme .pf-v6-c-form-control.pf-m-error:not(span) {
+.mui-theme .pf-v6-c-form-control.pf-m-error:not(span),
+.mui-theme .pf-v6-c-number-input span.pf-v6-c-form-control.pf-m-error {
   border-color: var(--mui-palette-error-main);
 }
 
@@ -1050,6 +1171,12 @@
   --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
 }
 
+// Remove negative margins on scrollable menu content that clip the scrollbar
+.mui-theme .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
 
 .mui-theme .pf-v6-c-menu__item {
   &.pf-m-selected {
@@ -1078,6 +1205,7 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
+
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
     --pf-t--global--background--color--action--plain--hover
   );
@@ -1136,12 +1264,15 @@
   --pf-v6-c-menu-toggle--m-secondary--Color: var(--mui-palette-primary-main);
   --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--mui-palette-primary-main);
   --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
+  // Explicit border for secondary variant
+  border-color: var(--mui-palette-primary-main);
 
   &:hover {
     --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--mui-palette-primary-dark);
     --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--mui-palette-primary-dark);
     // No PF variable for secondary hover background; using direct CSS
     background-color: var(--mui-palette-action-hover);
+    border-color: var(--mui-palette-primary-dark);
   }
 
   // Disabled state for secondary variant (higher specificity than base disabled)
@@ -1464,13 +1595,18 @@ left: 0;
 /* CSS workaround for spacing in labels in Workspace Kind */
 /* Special handling for form fields in table cells - remove extra top spacing */
 /* Layout properties (vertical-align, display, overflow) - no PF variables exist */
-.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+.mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-inline-edit) > :where(th, td) {
   /* Layout property - no PF variable exists */
   vertical-align: middle;
   /* Balance padding - use PF component variable for consistency */
   --pf-v6-c-table--cell--PaddingBlockStart: 0px;
 }
 
+/* Vertically center action cells (e.g. delete button) in inline edit rows to align with taller MUI form fields */
+.mui-theme .form-label-field-group .pf-v6-c-table tr.pf-v6-c-inline-edit.pf-m-inline-editable > td:last-child {
+  vertical-align: middle;
+}
+
 /* Remove spacing to align form elements at top of table cells */
 /* Margin/padding: No PF variables exist for zero values - using direct CSS */
 .mui-theme .form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) .pf-v6-c-form__group {
@@ -1710,6 +1846,12 @@ left: 0;
   min-height: var(--kf-central-app-bar-height);
 }
 
+// Switch component - use pill-shaped border radius for the capsule appearance
+.mui-theme .pf-v6-c-switch {
+  --pf-v6-c-switch__toggle--BorderRadius: var(--mui-switch--BorderRadius);
+  --pf-v6-c-switch__toggle--before--BorderRadius: var(--mui-switch--BorderRadius);
+}
+
 .mui-theme .pf-v6-c-modal-box {
   // BorderRadius inherited from --pf-t--global--border--radius--large (set to MUI shape-borderRadius)
   --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
@@ -1907,14 +2049,6 @@ left: 0;
   }
 }
 
-.mui-theme .workspacekind-file-upload {
-  height: 100%;
-
-  .pf-v6-c-file-upload__file-details {
-    flex-grow: 1;
-  }
-}
-
 .mui-theme .pf-v6-c-toolbar__item.toolbar-fieldset-wrapper,
 .mui-theme .toolbar-fieldset-wrapper {
   position: relative;
@@ -1951,6 +2085,21 @@ left: 0;
   --pf-v6-c-menu-toggle--PaddingInlineEnd: 12px;
 }
 
+// Filter group menu-toggles - add border styling
+.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-menu-toggle {
+  // Use inset box-shadow for border effect to avoid layout shift
+  box-shadow: inset 0 0 0 1px var(--mui-palette-grey-400);
+  border-radius: var(--mui-shape-borderRadius);
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--mui-palette-common-black);
+  }
+
+  &.pf-m-expanded {
+    box-shadow: none;
+  }
+}
+
 /* Only apply fixed width to filter dropdown in toolbar filter group */
 .mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-menu-toggle:not(.pf-m-split-button):not(.pf-m-plain) {
   --pf-v6-c-menu-toggle--MinWidth: 140px;
@@ -1969,20 +2118,16 @@ left: 0;
   --pf-v6-c-content--list--PaddingInlineStart: 0;
 }
 
-.mui-theme .workspacekind-file-upload {
-  height: 100%;
+// File upload textarea border styling (MUI-specific)
+.mui-theme .pf-v6-c-file-upload__file-details .pf-v6-c-form-control.pf-m-textarea {
+  border: var(--mui-form-control--BorderWidth) solid var(--mui-form-control--BorderColor);
+  border-radius: var(--mui-shape-borderRadius);
 
-  .pf-v6-c-file-upload__file-details {
-    flex-grow: 1;
+  &:hover {
+    border-color: var(--mui-palette-common-black);
   }
 }
 
-.mui-theme .pf-v6-c-file-upload {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 
 /* Workaround for Toggle group header in Workspace Kind Form */
 .mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-arch-kubeflow",
-  "version": "1.5.0",
+  "version": "1.8.0",
   "description": "Kubeflow-specific theme and UI components for modular architecture micro-frontend projects",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
     "*.scss"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "files": [
     "dist",