Skip to content

refactor(*): bundle styles with components#15125

Draft
simeonoff wants to merge 269 commits into
masterfrom
simeonoff/scoped-styles
Draft

refactor(*): bundle styles with components#15125
simeonoff wants to merge 269 commits into
masterfrom
simeonoff/scoped-styles

Conversation

@simeonoff

@simeonoff simeonoff commented Dec 2, 2024

Copy link
Copy Markdown
Collaborator

Closes #13770, #16794

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

simeonoff and others added 30 commits January 31, 2025 15:55
@adrianptrv

adrianptrv commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Date Range Picker component:

There are grid-template-columns styles intended specifically for the two-input configuration, but currently are also applying to the single-input picker. This breaks the single-input layout.

We should scope these styles to a two-input-specific selector like &:has(igx-date-range-start, igx-date-range-end){}:

Sample
Code

@adrianptrv

adrianptrv commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Simple Combo component

The Combo styling CSS variables are currently declared only for igx-combo and not for igx-simple-combo. As a result, the styles are not applied to igx-simple-combo.

Scoped Sample
Master samples

@adrianptrv

Copy link
Copy Markdown
Contributor

Chat component

The igx-avatar styles are missing in the Chat component, causing the avatar not to be displayed.

Scoped sample
Master sample

@adrianptrv

Copy link
Copy Markdown
Contributor

Dropdown component

However, the component also uses encapsulation: ViewEncapsulation.None, which prevents style from being applied to the igx-drop-down.

The position: absolute style is required for the component to function correctly. Without it, the dropdown items auto width does not always match the width of the trigger element and can sometimes expand to the full page width, as it currently does in the scoped-styles samples. I would suggest that we move this style to the scss files and apply it directly to igx-drop-down.

Scoped sample
Component

@adrianptrv

This comment was marked as resolved.

@adrianptrv

This comment was marked as resolved.

@adrianptrv

Copy link
Copy Markdown
Contributor

Grid Multi Row Layout

The last-child cells in the Multi Row Layout header have different border styles than the other cells. In the master version, the entire header row uses the same border style.

Scoped sample
Master sample


The cells in the Multi Row Layout block use the default header cell alignment (align-items: flex-end). As a result, when a cell spans multiple rows, its content is aligned to the bottom of the cell.

In the master version, the align-items property is set to 'center' for header cells within a Multi-Row Layout.

Scoped sample
Master sample

@adrianptrv

Copy link
Copy Markdown
Contributor

Grid Lite

Same as with the Chat component, all Angular components used inside the Grid Lite are missing their styling variable declarations.

Scoped sample
Master sample

@adrianptrv

Copy link
Copy Markdown
Contributor

Icon Button

The Icon button doesn't have the cursor:pointer set to it.

Master sample
Scoped sample

@adrianptrv

Copy link
Copy Markdown
Contributor

Grid Row Dragging

When dragging multiple rows at once, the drag ghost still displays the full row, just as it does when dragging a single row, with only an icon shown inside it.

Single drag
Multiple drag

@adrianptrv

Copy link
Copy Markdown
Contributor

Grid filtering chip

When there is a single filtering chip with long text, it goes outside the column instead of ending with an ellipsis.

Sample

@adrianptrv

adrianptrv commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

List

The --_padding-inline variable of the list item currently uses the 'pad-block' function instead of 'pad-inline'.

Code
Sample

@adrianptrv

Copy link
Copy Markdown
Contributor

Month picker

The Calendar Picker schemas do not have a _meta entry with a component name, and all variables are declared as `--ig-unknown-component.

Sample

simeonoff and others added 9 commits June 22, 2026 13:24
…s) (#17313)

* feat(grid): update grid styles and theme builder sample

* feat(grid): add updates for the grid and theme-builder sample

* chore(grid-sample): remove summaries patch background from controls

* feat(grid-sample): add hierarchical grid

* fix(grid): fix banner in grid styles

* feat(grid): add latest updates

* chore: merge upstream

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
- Remove require('@angular-devkit/build-angular/plugins/karma') from
  karma.non-grid, karma.hierarchical-grid, karma.pivot-grid,
  karma.test-perf and karma.tree-grid configs; the package is no longer
  installed and the framework string identifier is sufficient.
- Remove test-utils/assets from angular.json test assets; all references
  are string-only src attributes that never require the files to be
  served, eliminating intermittent EBADF errors on macOS 26 / Node 24.
- Fix month-picker spec: update 4 navigation tests still using old
  igx-calendar-view__item* selectors to igx-calendar-view-item*.
- Fix drop-down spec: CSS_CLASS_TABS updated to igx-tab-header; the
  aria-activedescendant test now queries the host element by tag instead
  of the inner list div whose class was moved by the style refactor.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Themes: Scope component styles to component

6 participants