Skip to content

Update Components List Styles (#8254) #8317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arman-boyakhchyan merged 1 commit into from
Jan 7, 2026
Merged

Update Components List Styles (#8254) #8317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions applications/ComponentList/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,24 @@
body {
background-color: light-dark(#ffffff, #2a2a2a) !important;
font-family: 'Roboto', sans-serif;
}

body.jQuery a {
color: #0E8BC1;
}

body.Angular a {
color: light-dark(#2190F7, #158BFF);
}

body.Vue a {
color: #42B883;
}

body.React a {
color: #09B5E1;
}

.components .components-title,
.components .components-subtitle {
margin: 0;
Expand Down
1 change: 1 addition & 0 deletions applications/ComponentList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
Copy link

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

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

The code directly adds the value from localStorage to classList without any validation or null checking. If the localStorage key does not exist, getItem returns null, which could cause classList.add to add the string "null" as a class name. Consider adding a guard to check if the value exists before adding it to the classList.

Suggested change
document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
const frameworkClass = localStorage.getItem('dx-devextreme-site-framework');
if (frameworkClass) {
document.body.classList.add(frameworkClass);
}

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

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

The code adds an untrusted value from localStorage directly to the classList without sanitization. While the CSS only defines specific framework classes (jQuery, Angular, Vue, React), a malicious value could inject arbitrary class names. Consider validating the value against an allowlist of expected framework names before adding it to classList.

Suggested change
document.body.classList.add(localStorage.getItem('dx-devextreme-site-framework'));
var framework = localStorage.getItem('dx-devextreme-site-framework');
var allowedFrameworks = ['jquery', 'angular', 'vue', 'react'];
if (framework && allowedFrameworks.indexOf(framework) !== -1) {
document.body.classList.add(framework);
}

Copilot uses AI. Check for mistakes.
2 changes: 1 addition & 1 deletion concepts/40 Angular Components/00 DevExtreme Angular Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The DevExtreme Angular UI Component Suite offers 80+ responsive, touch-enabled U

## Explore All 80+ Angular Components

<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>

## Try DevExtreme Components in Your Project

Expand Down
2 changes: 1 addition & 1 deletion concepts/50 React Components/00 DevExtreme React Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The DevExtreme React UI Component Suite offers 80+ responsive, touch-enabled UI

## Explore All 80+ React Components

<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>

## Try DevExtreme Components in Your Project

Expand Down
2 changes: 1 addition & 1 deletion concepts/55 Vue Components/00 DevExtreme Vue Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The DevExtreme Vue UI Component Suite offers 80+ responsive, touch-enabled UI co

## Explore All 80+ Vue Components

<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>

## Try DevExtreme Components in Your Project

Expand Down
2 changes: 1 addition & 1 deletion concepts/58 jQuery Components/00 DevExtreme jQuery Components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The DevExtreme jQuery UI Component Suite offers 80+ responsive, touch-enabled UI

## Explore All 80+ jQuery Components

<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css" style="border-radius: 16px"></div>
<div class="simulator-desktop-container" data-view="/Content/Applications/26_1/ComponentList/index.html, /Content/Applications/26_1/ComponentList/index.css, /Content/Applications/26_1/ComponentList/index.js" style="border-radius: 16px; border: none !important;"></div>

## Try DevExtreme Components in Your Project

Expand Down
Loading