Skip to content

refactor(*): bundle styles with components#15125

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

refactor(*): bundle styles with components#15125
simeonoff wants to merge 387 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 simeonoff added ❌ status: awaiting-test PRs awaiting manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Feb 18, 2025
SisIvanova and others added 27 commits November 7, 2025 13:44
- Standardize `--component-size` for icons in navbar themes.
- Remove redundant `--ig-size` definitions from shared themes.
- Add padding and auto sizing for indigo theme icons.
- Update icon button styles for consistent behavior across themes.
… instead of 'shadow' - scoped (#16461)

* fix(themes): update properties to use 'elevation' variables instead of 'shadow' variables

* deps(theming): bump to the latest version

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
* fix(switch): style component using sass theme

* fix(switch): indigo border-radius

* fix(switch): hover shadow
refactor(list): styling discrepancies
* fix(*): styling discrepancies

* fix(slider): remove flex-grow

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
* style(textarea): add padding bottom to textarea in all themes

* fix(textare): align material textarea styles with master
* fix(input-group): fix cursor behaviour in input groups

* fix(input-group): fix cursor behaviour in simple-combo

* fix(combo): fix disabled toggle/clear button cursor

* chore(combo): remove additional indigo cursor styles on disabled
@adrianptrv

Copy link
Copy Markdown
Contributor

Angular Samples Issues

Button Group

The buttons are placed vertically when the sample has display: block or display: inline-block set on the Button Group component.

This can be seen in the following samples:

  • Button Group Overview
  • Horizontal Button Group
  • Display Density
  • Grid GroupBy Summary (button-group)
  • Grid GroupBy Summary Styling (button-group)
  • Grid Display Density (button-group)
  • Grid Excel Style Filtering
  • Hierarchical Grid Excel Style Filtering
  • Hierarchical Grid Display Density
  • Layout Direction Row
  • Layout Direction Column
  • Layout Content Space
  • Layout Align Items
  • Layout Justify Content
  • Display Density Sample
  • TreeGrid Excel Style Filtering
  • TreeGrid Display Density
  • TreeGrid Child Summary
Screenshot 2026-07-17 at 13 54 54

Dropdown

In some samples, the Dropdown width does not match the trigger button width and instead expands to the end of the window.

This can be seen in the following samples:

  • Multi-Level Dropdown Menu
  • Simple Dropdown
  • Dropdown Selection
  • Dropdown Styling
  • Input Dropdown Selection
Screenshot 2026-07-17 at 13 54 14

Month Picker

In the "Tailwind Styled Month Picker" sample, the picker header background appears above the component background.

Screenshot 2026-07-17 at 13 48 45

Tabs

In the "Tabs Prefix/Suffix" sample, the step elements do not have an margin-inline-start applied.

Screenshot 2026-07-17 at 13 52 37

Add ig.#{$theme} to the top-level `@layer` priority declaration so
theme-variant-specific styles (material/indigo/fluent/bootstrap) get an
explicit, fixed position between ig.typography and ig.derived, instead
of having their cascade priority depend on whichever stylesheet happens
to reference that layer name first.
simeonoff and others added 9 commits July 17, 2026 17:17
- the fox prevents curent display overrides on the group to break the layout
- ensures proper DOM structure by placing the button group iteration within a container
- adding an example of using `values` input for programmatically generated button groups in angular
when tabs header are templated igxSuffix/prefix go outside of the inner container, having no gap will make the user templated ites stack togather
Copilot AI review requested due to automatic review settings July 22, 2026 12:02

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
<igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData'" [autoGenerate]="true"
<igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData'" [autoGenerate]="true"
[rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
[allowFiltering]="true">
<igx-row-island [rowEditable]="true" [primaryKey]="'ID'" [key]="'childData'" [autoGenerate]="true"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Themes: Scope component styles to component

7 participants