@olenbetong/appframe-ds 1.13.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.13.1
+
+### Patch Changes
+
+- 6235575: Selects in a grid cell being edited no longer draw a field border and background; they fill the cell like the text editor.
+
 ## 1.13.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",

package/src/grid/slots/slots.css

@@ -12,6 +12,31 @@
 	width: 100%;
 }
 
+/* In a cell being edited the select fills the cell like the grid's own text editor: the cell's
+   outline already marks the edit, so a field border inside it only looks cramped. */
+.MuiDataGrid-cell--editing .AfGrid-select {
+	--dsc-input-background: transparent;
+	--dsc-input-border-color: transparent;
+	--dsc-input-border-radius: 0;
+	--dsc-input-outline-color--hover: transparent;
+
+	block-size: 100%;
+}
+
+/* The open list takes its colours from the select, which is transparent here; without its own
+   background it falls back to white under the theme's text colour. */
+.MuiDataGrid-cell--editing .AfGrid-select option {
+	background-color: var(--ds-color-neutral-surface-default);
+	color: var(--ds-color-neutral-text-default);
+}
+
+/* The grid outlines the focused cell, as it does for the text editor; Designsystemet's focus
+   ring on top of it would read as a second, mismatched border. */
+.MuiDataGrid-cell--editing .AfGrid-select:focus-visible {
+	outline: none;
+	box-shadow: none;
+}
+
 /* Sort-order and filter-count badges on header icon buttons: a compact number
    pinned to the button corner instead of Designsystemet's default 1.5rem badge. */
 .AfGrid-badge .ds-badge {