Enterprise: Uplift: Architecture for component CSS changes for themes

Created on 17 Apr 2019  路  2Comments  路  Source: infor-design/enterprise

Is your feature request related to a problem? Please describe.
With more changes coming with uplifted component styles, we need to think through the architecture of having separate CSS files for uplifted theme styles. It's currently possible to have styles written directly in uplift-theme.scss but it could get out of hand with extensive overrides and have the file get unorganized.

Describe the solution you'd like
TBD

Describe alternatives you've considered
TBD

[3] high type

Most helpful comment

Here is how we are planning to handle theme uplift-specific component styles.

  1. Using the Icons component as an example...

    src/components/icons/
      - accordion.scss         # <- Mostly all styles here
      - accordion-uplift.scss  # <- Fine tuning for uplift only (only created if needed)
    
  2. The src/theme/controls-uplift.scss will include those uplift files as overrides as follows:

    @import '../components/icons/icons';  /* normal icons styles */
    @import '../components/icons/icons-uplift';  /* again only exists if its needed */
    
  3. The src/theme/uplift-theme.scss will include those uplift files as overrides as follows:

    @import '../core/controls-uplift';
    

All 2 comments

Here is how we are planning to handle theme uplift-specific component styles.

  1. Using the Icons component as an example...

    src/components/icons/
      - accordion.scss         # <- Mostly all styles here
      - accordion-uplift.scss  # <- Fine tuning for uplift only (only created if needed)
    
  2. The src/theme/controls-uplift.scss will include those uplift files as overrides as follows:

    @import '../components/icons/icons';  /* normal icons styles */
    @import '../components/icons/icons-uplift';  /* again only exists if its needed */
    
  3. The src/theme/uplift-theme.scss will include those uplift files as overrides as follows:

    @import '../core/controls-uplift';
    

Documenting the part needed to make this work with the IDS Builder:

  • [x] A stripped down version of src/themes/controls_uplift.scss will need to be "generated" to the temp folder if a custom list of components is requested. This would be handled the same way that src/core/_controls.scss is currently built. In scripts/build.js, there's a code path for rendering this file with a subset of the components, sorting them in a specific order based on complexity (simpler components first, then the heavier stuff). We would need a similar codepath for dealing with the contents of the Uplift theme.

  • [x] Just below that, there's a code path that deals with generating the CSS index file to the temp folder, doing several find/replace operations on the import paths. When doing custom builds, this is necessary because all the generated index files run out of the /temp folder as not to conflict with the standard index files. We'd need to account for the new Uplift component index here, and do a find/replace on its path to make sure it's correct. My guess is we'd optionally detect the uplift theme here and only do this if necessary?

  • [x] We'd also need to add an entry for the new uplift component file under this line

Doing those three things should make the IDS builder compatible with Uplift.

Was this page helpful?
0 / 5 - 0 ratings