Skip to content

refactor(*): bundle styles with components - #15125

Merged
simeonoff merged 440 commits into
masterfrom
simeonoff/scoped-styles
Aug 14, 2026
Merged

refactor(*): bundle styles with components#15125
simeonoff merged 440 commits into
masterfrom
simeonoff/scoped-styles

Conversation

@simeonoff

@simeonoff simeonoff commented Dec 2, 2024

Copy link
Copy Markdown
Member

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
desig9stein and others added 26 commits March 19, 2026 15:04
…onality

- Refactored styling in Indigo, DropDown, Chips, and Grids samples
- Removed unused and duplicate properties in date-range-picker sample, simplifying configuration.
- Updated date-range-picker sample layout for a cleaner and more streamlined structure.
- Removed `aspect-ratio: 1` from FAB button styles since it courses a visual bug in the samples repo where the buttons that have text + icon become to tall.
- Added `width: 100%` to button-group items for better container alignment if the buttongroup itself has display of inline block adn a hardcoded width.
- Updated `themed-block` calls in date-range-picker themes to use correct theme references (Material and Fluent).
- Set `--aside-padding` for Fluent theme in demos settings.
- Refined styles in `pageHeading` component and updated `igx-input-group` to use `display: block grid`.
- Replaced `--_range-border-style` with `--_preview-border-style` in calendar days view styles.
…ge-picker

- Adjusted row and column templates for date-range-picker across themes for consistent alignment.
- Updated sample structure and styles to enhance readability and showcase use cases.
- Simplified SCSS variables and removed redundant styles in input-group and date-picker themes.
- Refined HTML and SCSS in samples for improved layout structure and maintainability.
…yles

# Conflicts:
#	package.json
#	projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss
#	projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
#	projects/igniteui-angular/core/src/core/styles/components/grid/_header-row-component.scss
…mponent for updated imports and module configuration
- Removed redundant SCSS properties related to grid cell editing and header styles.
- Ensured consistent styling for filtered icons across themes.
- Added `background` property to filtering row for improved theme support.
- Consolidated and adjusted icon size definitions for Fluent, Material, Indigo, and Bootstrap themes.
- Restored misplaced grid row and cell styling blocks for improved structure.
- Corrected comment formatting and removed commented-out code for clarity
…date dependencies

- Removed unused `IgxIconComponent` imports and redundant SCSS styles for better maintainability.
- Updated sample layout in `grid-multi-row-layout` for improved readability and consistent structure.
- Adjusted `grid` and `properties-panel`
…ta.2` and switch to Material theme variables

- Updated `igniteui-theming` dependency to `v25.1.0-beta.2` in `package.json` and `package-lock.json`.
- Revert Indigo theme with Material theme
…yles

# Conflicts:
#	package-lock.json
#	package.json
#	projects/igniteui-angular/combo/src/combo/combo.component.html
#	projects/igniteui-angular/simple-combo/src/simple-combo/simple-combo.component.html
- Replaced `.icon--filtered` with `.igx-excel-filter__icon--filtered` in all themes.
- Added `display: inline-flex` style for filtered icon in base theme.
- Removed unnecessary `@extend` statement in `_base.scss`
… externally

  When wrapper components (e.g. combo) project hints into the input-group,
  Angular's @ContentChildren re-evaluation during change detection would
  overwrite the hints set via the setter, causing the @if (hasHints)
  condition to momentarily evaluate to false and destroy the hint DOM.
  Separate @ContentChildren hints (_ownHints) from externally set hints
  (_externalHints) so they no longer conflict during change detection.
…ceholder

- Removed unused SCSS styling for `igx-input-group` in `drop-down.sample.scss`.
- Added `placeholder` attribute to input in `drop-down.sample.html`.
- Updated grid styles in `_base.scss` for consistency and simplified border styling.
…styling

- Replaced old SCSS structure with CSS Grid for modernized layout and consistency.
- Introduced property panel for dynamic PDF export configuration.
- Simplified and consolidated export functionality with `PropertyChangeService` integration.
- Enhanced toolbar structure for better usability across all grid types.
- Merged and streamlined SCSS structure for grid toolbar themes.
- Removed redundant dark and light list/toolbar styling files.
- Adjusted `_base.scss` to use unified theme tokens for consistency.
- Cleaned up unused variables and improved maintainability.
…yles

# Conflicts:
#	projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
#	projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.spec.ts
- added `--_bundle-row` and `--_hint-row` variables for `.igx-input-group:has(:not(.igx-input-group__label))`.
- Ensured consistency across base and material theme SCSS files.
…ayout

- Switched from custom flexbox layouts to responsive CSS Grid for cleaner structure and better alignment.
- Replaced old `items-wrapper` and related styles with streamlined `:host`-based grid layout.
- Unified button and form sample styles using updated variables and semantic class names.
- Integrated Ignite UI Material theme tokens for consistency.
- Adjusted SCSS imports for modularity and removed redundant encapsulation.
simeonoff and others added 5 commits August 11, 2026 14:47
Replace the %input-textarea-common placeholder selector with an
input-display() mixin in input-group to fix specificity issues, reused
by both @include e(input) and @include e(textarea).

Add text-box: trim-both cap alphabetic to badge value for tighter
vertical text metrics.
@mddragnev

Copy link
Copy Markdown
Member

I`ve found two issues in the pivot data selector:

  1. If you start the pivot grid dev sample (name is Pivot Grid) and add height:100% to the host styles and height:100% to the .pivot-container in the pivot-grid.sample.scss so you have the following:
:host {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pivot-container {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    order: 0;
    align-items: stretch;
    height: 100%;
}

Then you can observe the scrollbar of the first list with the dimensions. It looks like this in master:
Screenshot 2026-08-12 at 15 27 23
And it looks like this in the current branch:
Screenshot 2026-08-12 at 15 27 34

You can see that the scrollbar size is not correct. Additonally, if you scroll the list to the bottom it looks like the scrollbar magically becomes smaller.

  1. On the same sample with the same configuration you can see the labels of each section is missaligned because of some margin of the h6 element
Screenshot 2026-08-12 at 15 27 34

simeonoff and others added 13 commits August 12, 2026 17:03
Add `$not: bool` modifier exclusion to the fixed-width, non-resizable td
selector so boolean column cells no longer pick up the `fw` modifier
styles meant only for other fixed-width columns.
Prefix the and/or expression-group flat button color custom properties
with ig-flat-button- so they target the scoped button theme variables
instead of the previous unscoped names that no longer applied after the
button theme's variable scoping change.
  The scope redeclared the full calendar token set on the picker element
  inside igx-month-picker, shadowing any override set on the host.
- adds `hasBadInput` check to ensure proper handling of invalid user input in `type="number"` and similar inputs.
…updates

- Adds a new sample demonstrating cascading combo functionality within a grid.
- Includes dynamic data updates for regions and cities based on country selection.
- Provides a visual progress indicator for async data loading.
@viktorkombov

Copy link
Copy Markdown
Contributor

When hovering over the Excel-style filtering icon, the cursor does not change to a pointer:

betaa

@simeonoff

Copy link
Copy Markdown
Member Author

When hovering over the Excel-style filtering icon, the cursor does not change to a pointer:

betaa

Should be fixed with the last commit.

@viktorkombov

Copy link
Copy Markdown
Contributor

The select dropdown does not expand to the full width of the select.

image

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

9 participants