Openbravo Issue Tracking System - POS2 |
| View Issue Details |
|
| ID | Project | Category | View Status | Date Submitted | Last Update |
| 0057163 | POS2 | Core | public | 2024-11-18 17:54 | 2024-11-21 13:45 |
|
| Reporter | dbaz | |
| Assigned To | dbaz | |
| Priority | high | Severity | minor | Reproducibility | always |
| Status | closed | Resolution | fixed | |
| Platform | | OS | 5 | OS Version | |
| Product Version | | |
| Target Version | | Fixed in Version | 25Q1 | |
| Merge Request Status | |
| Review Assigned To | |
| OBNetwork customer | |
| Support ticket | |
| Regression level | |
| Regression date | |
| Regression introduced in release | |
| Regression introduced by commit | |
| Triggers an Emergency Pack | No |
|
| Summary | 0057163: Add Component-Level Variables for Text Inputs, Comboboxes, and Selectors |
| Description | Summary:
Currently, Openbravo's variable system supports two levels of variables: primitive and semantic, both in design (Figma) and code (CSS). However, component-level variables are not available. This limitation increases complexity in adopting the new design system and creating custom skins. We propose adding component-level variables for text inputs, comboboxes, and selectors as a first step to simplify these processes.
Background:
In modern design systems, there are typically three levels of variables:
Primitive variables: Define base values such as colors, typography, and spacing (e.g., --obc2-green100, …).
Semantic variables: Add meaning to primitives by linking them to a specific context (e.g., --obc2-color-primary, --obc2-shape-border-width).
Component variables: Tailored to specific UI components, allowing granular customization at the component level (e.g., --obc2-textfield-border-width).
While Openbravo has semantic variables in place, the absence of component-level variables creates challenges in:
Streamlining Design System Adoption: Component-specific variables reduce the dependency on hardcoded styles, making it easier for developers to align with the design system.
Skin Creation: Custom skins often require component-specific overrides, which are currently cumbersome without dedicated component variables.
Proposal:
Introduce component-level variables to Openbravo's variable system, starting with the following components:
Text Inputs
Comboboxes
Selectors
Each component will have its own set of configurable variables for aspects such as borders, backgrounds, sizes, and more. For example:
--obc2-textfield-background-color
--obc2-textfield-icon-color
--obc2-textfield-trailingicon-width
Benefits:
Simplified Adoption of the New Design System (Orisha): Developers and designers will have a consistent way to define styles specific to each component.
Improved Skin Customization: Component variables make it easier to create and manage custom themes without affecting other components or relying heavily on semantic/primitive variables.
Future Scalability: Introducing component-level variables now establishes a strong foundation for expanding to other UI components in the future.
Conclusion:
Adding component-level variables is a critical step towards enhancing the flexibility and scalability of Openbravo’s / Orisha’s design system. It will simplify both the design and implementation processes, making the platform more robust and user-friendly for developers, designers, and end-users. |
| Steps To Reproduce | . |
| Proposed Solution | |
| Additional Information | |
| Tags | No tags attached. |
| Relationships | |
| Attached Files | |
|
| Issue History |
| Date Modified | Username | Field | Change |
| 2024-11-18 17:54 | dbaz | New Issue | |
| 2024-11-18 17:54 | dbaz | Assigned To | => Triage Platform Base |
| 2024-11-18 17:54 | dbaz | Triggers an Emergency Pack | => No |
| 2024-11-18 17:54 | dbaz | Assigned To | Triage Platform Base => dbaz |
| 2024-11-18 17:55 | dbaz | Note Added: 0172191 | |
| 2024-11-18 18:52 | hgbot | Note Added: 0172194 | |
| 2024-11-18 18:55 | hgbot | Note Added: 0172195 | |
| 2024-11-18 18:58 | hgbot | Note Added: 0172196 | |
| 2024-11-18 19:01 | hgbot | Note Added: 0172197 | |
| 2024-11-18 19:04 | hgbot | Note Added: 0172198 | |
| 2024-11-18 19:06 | hgbot | Note Added: 0172199 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172402 | |
| 2024-11-21 13:45 | hgbot | Resolution | open => fixed |
| 2024-11-21 13:45 | hgbot | Status | new => closed |
| 2024-11-21 13:45 | hgbot | Fixed in Version | => 25Q1 |
| 2024-11-21 13:45 | hgbot | Note Added: 0172403 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172404 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172405 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172406 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172407 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172408 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172409 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172410 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172411 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172412 | |
| 2024-11-21 13:45 | hgbot | Note Added: 0172413 | |
|
Notes |
|
|
(0172191)
|
|
dbaz
|
|
2024-11-18 17:55
|
|
|
|
|
(0172194)
|
|
hgbot
|
|
2024-11-18 18:52
|
|
|
|
|
(0172195)
|
|
hgbot
|
|
2024-11-18 18:55
|
|
|
|
|
(0172196)
|
|
hgbot
|
|
2024-11-18 18:58
|
|
|
|
|
(0172197)
|
|
hgbot
|
|
2024-11-18 19:01
|
|
|
|
|
(0172198)
|
|
hgbot
|
|
2024-11-18 19:04
|
|
|
|
|
(0172199)
|
|
hgbot
|
|
2024-11-18 19:06
|
|
|
|
|
(0172402)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172403)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
Directly closing issue as related merge request is already approved.
Repository: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2 [^]
Changeset: 43ab9f23b1e237d47d42c95ea15d30033e72ab57
Author: David Baz <d.baz@orisha.com>
Date: 21-11-2024 12:45:06
URL: https://gitlab.com/openbravo/product/pmods/org.openbravo.core2/-/commit/43ab9f23b1e237d47d42c95ea15d30033e72ab57 [^]
Fixed ISSUE-57163: Added text field component CSS variables
---
A web-jspack/org.openbravo.core2/src/assets/style/component.scss
M web-jspack/org.openbravo.core2/src/assets/style/color.scss
M web-jspack/org.openbravo.core2/src/assets/style/main.scss
M web-jspack/org.openbravo.core2/src/components/AutocompleteFormInput/AutocompleteFormInput.scss
M web-jspack/org.openbravo.core2/src/components/BaseChip/BaseChip.scss
M web-jspack/org.openbravo.core2/src/components/BaseFormDatePicker/BaseFormDatePicker.jsx
M web-jspack/org.openbravo.core2/src/components/BaseFormDatePicker/BaseFormDatePicker.scss
M web-jspack/org.openbravo.core2/src/components/BaseFormInput/BaseFormInput.scss
M web-jspack/org.openbravo.core2/src/components/BaseFormMultiSelector/BaseFormMultiSelector.scss
M web-jspack/org.openbravo.core2/src/components/BaseFormSelector/BaseFormSelector.scss
M web-jspack/org.openbravo.core2/src/components/BaseFormTimePicker/BaseFormTimePicker.jsx
M web-jspack/org.openbravo.core2/src/components/BaseFormTimePicker/BaseFormTimePicker.scss
M web-jspack/org.openbravo.core2/src/components/ComboBox/ComboBox.scss
M web-jspack/org.openbravo.core2/src/components/InputPassword/InputPassword.scss
M web-jspack/org.openbravo.core2/src/components/Search/AvailableFilterPopover/AvailableFilterPopover.scss
M web-jspack/org.openbravo.core2/src/components/Search/SearchInput/SearchInput.scss
---
|
|
|
|
(0172404)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
Directly closing issue as related merge request is already approved.
Repository: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2 [^]
Changeset: c0f3754e9da8162d80335153d3001fdd9d71933d
Author: David Baz <d.baz@orisha.com>
Date: 21-11-2024 12:45:27
URL: https://gitlab.com/openbravo/product/pmods/org.openbravo.pos2/-/commit/c0f3754e9da8162d80335153d3001fdd9d71933d [^]
Fixed ISSUE-57163: Added text field component CSS variables
---
M web-jspack/org.openbravo.pos2/src/components/Cashup/CountingToolDialog/CountingToolDialog.scss
M web-jspack/org.openbravo.pos2/src/components/KeyMapEditor/steps/KeyMapEditorKeymapsGrid/KeyMapEditorKeymapsGrid.scss
M web-jspack/org.openbravo.pos2/src/components/ProductScan/ProductScanButtonBar/ProductScanButtonBar.scss
M web-jspack/org.openbravo.pos2/src/components/ReceiptDeliveryOptions/BookedReceiptDeliveryOptions/BookedReceiptDeliveryGiftReceiptLineSelector/BookedReceiptDeliveryGiftReceiptLineSelectorGrid/BookedReceiptDeliveryGiftReceiptLineSelectorGrid.scss
M web-jspack/org.openbravo.pos2/src/components/Ticket/TicketPropertiesPopover/TicketPropertiesPopover.scss
M web-jspack/org.openbravo.pos2/src/components/VerifiedReturns/VerifiedReturnsGrid/VerifiedReturnsGrid.scss
---
|
|
|
|
(0172405)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172406)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172407)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172408)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172409)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172410)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172411)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172412)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|
|
|
(0172413)
|
|
hgbot
|
|
2024-11-21 13:45
|
|
|