Fixes#1437
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for custom background colors to select field options in both table display and record view components. The implementation allows select options to display with colored backgrounds for better visual distinction.
- Adds
backgroundColorproperty to select display components - Binds background color from option configuration to the display element
- Adds padding and border-radius styling for colored field values
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
frontend/src/app/components/ui-components/table-display-fields/select/select.component.ts |
Adds backgroundColor property and logic to extract background color from option configuration |
frontend/src/app/components/ui-components/table-display-fields/select/select.component.html |
Binds backgroundColor to the field value span element |
frontend/src/app/components/ui-components/table-display-fields/select/select.component.css |
Adds padding and border-radius styling to field value elements |
frontend/src/app/components/ui-components/record-view-fields/select/select.component.ts |
Adds backgroundColor property and logic to extract background color from option configuration |
frontend/src/app/components/ui-components/record-view-fields/select/select.component.html |
Binds backgroundColor to the field view value span element |
frontend/src/app/components/ui-components/record-view-fields/select/select.component.css |
Adds padding and border-radius styling to field view value elements |
frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts |
Adds example background_color values to demo select options |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| (opt: { value: any, label: string }) => opt.value === this.value | ||
| ); | ||
| this.displayValue = option ? option.label : this.value; | ||
| this.backgroundColor = option && option.background_color ? option.background_color : 'transparent'; |
There was a problem hiding this comment.
Accessibility concern: Setting a background color without ensuring sufficient text contrast can create readability issues for users with visual impairments. Consider either: 1) validating that the provided color has sufficient contrast with the text color, 2) automatically adjusting the text color based on the background, or 3) documenting that developers must provide WCAG-compliant color combinations.
| (opt: { value: any, label: string }) => opt.value === this.value | ||
| ); | ||
| this.displayValue = option ? option.label : this.value; | ||
| this.backgroundColor = option && option.background_color ? option.background_color : 'transparent'; |
There was a problem hiding this comment.
Accessibility concern: Setting a background color without ensuring sufficient text contrast can create readability issues for users with visual impairments. Consider either: 1) validating that the provided color has sufficient contrast with the text color, 2) automatically adjusting the text color based on the background, or 3) documenting that developers must provide WCAG-compliant color combinations.
| }) | ||
| export class SelectDisplayComponent extends BaseTableDisplayFieldComponent implements OnInit { | ||
| public displayValue: string; | ||
| public backgroundColor: string; |
There was a problem hiding this comment.
Missing initialization of backgroundColor property. If setDisplayValue() is not called or the else branch (line 37-39) is taken, the backgroundColor will be undefined, which could cause issues with the template binding. Initialize it to 'transparent' at declaration: public backgroundColor: string = 'transparent';
| public backgroundColor: string; | |
| public backgroundColor: string = 'transparent'; |
| }) | ||
| export class SelectRecordViewComponent extends BaseRecordViewFieldComponent implements OnInit { | ||
| public displayValue: string; | ||
| public backgroundColor: string; |
There was a problem hiding this comment.
Missing initialization of backgroundColor property. If setDisplayValue() is not called or the else branch (line 33-35) is taken, the backgroundColor will be undefined, which could cause issues with the template binding. Initialize it to 'transparent' at declaration: public backgroundColor: string = 'transparent';
| public backgroundColor: string; | |
| public backgroundColor: string = 'transparent'; |
| @@ -1,5 +1,5 @@ | |||
| <div class="field-display"> | |||
| <span class="field-value">{{displayValue}}</span> | |||
| <span class="field-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span> | |||
There was a problem hiding this comment.
Potential security vulnerability: Using user-provided color values directly in inline styles without validation could allow CSS injection attacks. Consider validating the background_color value against a whitelist of safe color formats (hex, rgb, rgba, named colors) or sanitizing the input before applying it to the DOM.
| <span class="field-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span> | |
| <span class="field-value" [style.backgroundColor]="safeBackgroundColor">{{displayValue}}</span> |
| @@ -1 +1 @@ | |||
| <span class="field-view-value">{{displayValue}}</span> | |||
| <span class="field-view-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span> | |||
There was a problem hiding this comment.
Potential security vulnerability: Using user-provided color values directly in inline styles without validation could allow CSS injection attacks. Consider validating the background_color value against a whitelist of safe color formats (hex, rgb, rgba, named colors) or sanitizing the input before applying it to the DOM.
| <span class="field-view-value" [style.backgroundColor]="backgroundColor">{{displayValue}}</span> | |
| <span class="field-view-value" [style.backgroundColor]="backgroundColor | safeColor">{{displayValue}}</span> |
No description provided.