docs: rename css classes to not cause confusion with bootstrap

siemens · Feb 26, 2025 · 362f0d9 · 362f0d9
1 parent aab923b
commit 362f0d9
Show file tree

Hide file tree

Showing 22 changed files with 43 additions and 40 deletions.
diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss
@@ -148,6 +148,6 @@ $CardList__Title__Height: 1.5rem;
   }
 }
 
-::slotted(.d-none) {
+::slotted(.display-none) {
   display: none !important;
 }
diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx
@@ -166,10 +166,10 @@ export class CardList {
     childElements.forEach((element, index) => {
       if (element instanceof HTMLElement) {
         if (index > this.maxVisibleCards - 1) {
-          element.classList.add('d-none');
+          element.classList.add('display-none');
           return;
         }
-        element.classList.remove('d-none');
+        element.classList.remove('display-none');
       }
     });
     this.hasOverflowingElements = childElements.length > this.maxVisibleCards;

diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss
@@ -180,7 +180,7 @@
     }
   }
 
-  .d-none {
+  .display-none {
     display: none;
   }
 }
diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx
@@ -829,7 +829,7 @@ export class CategoryFilter {
           >
             <ix-icon
               color={this.getIconColor()}
-              class={{ 'd-none': this.hideIcon }}
+              class={{ 'display-none': this.hideIcon }}
               name={this.icon ?? iconSearch}
               size="16"
             ></ix-icon>
@@ -859,7 +859,7 @@ export class CategoryFilter {
                   <span
                     class={{
                       'category-preview': true,
-                      'd-none': this.category === '',
+                      'display-none': this.category === '',
                     }}
                   >
                     {this.categories[this.category]?.label}

diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
@@ -64,11 +64,11 @@
     margin-inline-end: $default-space;
   }
 
-  .d-none {
+  .display-none {
     display: none;
   }
 }
 
-:host(.d-none) {
+:host(.display-none) {
   display: none;
 }
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
@@ -66,7 +66,7 @@ export class MapNavigationOverlay {
       opacity: [0, 1],
       easing: 'easeOutSine',
       begin: () => {
-        this.hostElement.classList.remove('d-none');
+        this.hostElement.classList.remove('display-none');
       },
     });
   }
@@ -81,7 +81,7 @@ export class MapNavigationOverlay {
       easing: 'easeInSine',
       complete: () => {
         this.closeClick.emit();
-        this.hostElement.classList.add('d-none');
+        this.hostElement.classList.add('display-none');
       },
     });
   }
@@ -93,7 +93,7 @@ export class MapNavigationOverlay {
           <div
             class={{
               'color-indicator': true,
-              'd-none': (this.iconColor ?? this.color) === undefined,
+              'display-none': (this.iconColor ?? this.color) === undefined,
             }}
             style={{
               'background-color':

diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -48,7 +48,7 @@
       var(--theme-map-navigation-separator--background);
     z-index: 99;
 
-    &.d-none {
+    &.display-none {
       display: none;
     }
   }

diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -137,7 +137,7 @@ export class MapNavigation {
       opacity: [1, 0],
       easing: 'easeInSine',
       complete: () => {
-        this.sidebar.classList.add('d-none');
+        this.sidebar.classList.add('display-none');
       },
     });
   }
@@ -150,7 +150,7 @@ export class MapNavigation {
       opacity: [0, 1],
       easing: 'easeOutSine',
       begin: () => {
-        this.sidebar.classList.remove('d-none');
+        this.sidebar.classList.remove('display-none');
       },
     });
   }
@@ -179,7 +179,7 @@ export class MapNavigation {
       opacity: [0, 1],
       easing: 'easeOutSine',
       begin: () => {
-        this.overlay.classList.remove('d-none');
+        this.overlay.classList.remove('display-none');
       },
     });
 
@@ -211,7 +211,7 @@ export class MapNavigation {
           return;
         }
         this.overlay.firstChild?.remove();
-        this.overlay.classList.add('d-none');
+        this.overlay.classList.add('display-none');
       },
     });
   }

diff --git a/packages/core/src/components/select-item/select-item.scss b/packages/core/src/components/select-item/select-item.scss
@@ -25,6 +25,6 @@
   }
 }
 
-:host(.d-none) {
+:host(.display-none) {
   display: none;
 }
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -255,7 +255,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
   get visibleNonShadowItems() {
     return this.nonShadowItems.filter(
-      (item) => !item.classList.contains('d-none')
+      (item) => !item.classList.contains('display-none')
     );
   }
 
@@ -267,7 +267,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
   get visibleShadowItems() {
     return this.shadowItems.filter(
-      (item) => !item.classList.contains('d-none')
+      (item) => !item.classList.contains('display-none')
     );
   }
 
@@ -276,7 +276,9 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   }
 
   get visibleItems() {
-    return this.items.filter((item) => !item.classList.contains('d-none'));
+    return this.items.filter(
+      (item) => !item.classList.contains('display-none')
+    );
   }
 
   get selectedItems() {
@@ -296,7 +298,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   }
 
   get isEveryDropdownItemHidden() {
-    return this.items.every((item) => item.classList.contains('d-none'));
+    return this.items.every((item) => item.classList.contains('display-none'));
   }
 
   @Watch('value')
@@ -700,13 +702,13 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
     if (this.inputFilterText) {
       this.items.forEach((item) => {
-        item.classList.remove('d-none');
+        item.classList.remove('display-none');
         if (
           !item.label
             ?.toLowerCase()
             .includes(this.inputFilterText.toLowerCase())
         ) {
-          item.classList.add('d-none');
+          item.classList.add('display-none');
         }
       });
     } else {
@@ -722,7 +724,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
   private removeHiddenFromItems() {
     this.items.forEach((item) => {
-      item.classList.remove('d-none');
+      item.classList.remove('display-none');
     });
   }
 
@@ -950,7 +952,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
           show={this.dropdownShow}
           closeBehavior={this.isMultipleMode ? 'outside' : 'both'}
           class={{
-            'd-none': this.disabled || this.readonly,
+            'display-none': this.disabled || this.readonly,
           }}
           anchor={this.dropdownAnchorRef.waitForCurrent()}
           trigger={this.dropdownWrapperRef.waitForCurrent()}
@@ -993,10 +995,7 @@ export class Select implements IxInputFieldComponent<string | string[]> {
               this.updateSelection();
             }}
           ></slot>
-          <div
-            ref={(ref) => (this.customItemsContainerElement = ref!)}
-            class="d-contents"
-          ></div>
+          <div ref={(ref) => (this.customItemsContainerElement = ref!)}></div>
           {this.isAddItemVisible() ? (
             <ix-dropdown-item
               data-testid="add-item"

diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts b/packages/core/src/tests/card-list/card-list.e2e.ts
@@ -47,7 +47,7 @@ regressionTest.describe('card-list: basic', () => {
   regressionTest('layout scrolling end', async ({ page }) => {
     await page.goto('card-list/layout-scroll');
 
-    const cards = await page.locator('ix-push-card:not(.d-none)');
+    const cards = await page.locator('ix-push-card:not(.display-none)');
     await cards.last().scrollIntoViewIfNeeded();
     await page.waitForTimeout(1000);
     expect(

diff --git a/packages/documentation/docs/controls/application-frame/application.mdx b/packages/documentation/docs/controls/application-frame/application.mdx
@@ -12,7 +12,7 @@ import Tags from './../../auto-generated/ix-application/tags.md';
 
 # Application
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <LatestTags
     url={'/docs/legacy/basic-navigation'}

diff --git a/packages/documentation/docs/controls/checkbox.mdx b/packages/documentation/docs/controls/checkbox.mdx
@@ -7,7 +7,7 @@ import DocsCode from './_forms-checkbox_code.mdx';
 
 # Checkbox
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags
     url="/docs/legacy/checkbox"

diff --git a/packages/documentation/docs/controls/forms/forms-validation.mdx b/packages/documentation/docs/controls/forms/forms-validation.mdx
@@ -11,7 +11,7 @@ import DeprecatedTags from '@site/src/components/Tags';
 
 # Validation
 
-<div className="d-flex">
+<div className="display-flex">
   <DeprecatedTags
     url="/docs/legacy/validation"
     hasDeprecatedAncestor={true}

diff --git a/packages/documentation/docs/controls/input-date.mdx b/packages/documentation/docs/controls/input-date.mdx
@@ -8,7 +8,7 @@ import Tags from '@site/docs/auto-generated/ix-date-input/tags.md';
 
 # Input (date)
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>

diff --git a/packages/documentation/docs/controls/input-number.mdx b/packages/documentation/docs/controls/input-number.mdx
@@ -7,7 +7,7 @@ import Tags from '@site/docs/auto-generated/ix-number-input/tags.md';
 
 # Input (number)
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>

diff --git a/packages/documentation/docs/controls/input.mdx b/packages/documentation/docs/controls/input.mdx
@@ -10,7 +10,7 @@ import DocsCode from './\_input_code.md';
 
 import Tags from './../auto-generated/ix-input/tags.md';
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags url='/docs/legacy/input' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>

diff --git a/packages/documentation/docs/controls/radio.mdx b/packages/documentation/docs/controls/radio.mdx
@@ -8,7 +8,7 @@ import DocsCode from './_radio_code.mdx';
 
 # Radio
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags url='/docs/legacy/radiobutton' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>

diff --git a/packages/documentation/docs/controls/textarea.mdx b/packages/documentation/docs/controls/textarea.mdx
@@ -7,7 +7,7 @@ import Tags from '@site/docs/auto-generated/ix-textarea/tags.md';
 
 # Textarea
 
-<div className="d-flex">
+<div className="display-flex">
   <Tags />
   <DeprecatedTags url='/docs/legacy/textarea' hasDeprecatedAncestor={true}></DeprecatedTags>
 </div>

diff --git a/packages/documentation/src/components/Tags/LegacyTag.css b/packages/documentation/src/components/Tags/LegacyTag.css
@@ -7,6 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.TagContainers {
+  display: flex;
+}
+
 .TagContainer {
   display: flex;
   align-items: center;

diff --git a/packages/documentation/src/components/Tags/index.tsx b/packages/documentation/src/components/Tags/index.tsx
@@ -10,7 +10,7 @@ export default function LegacyTag(
   }>
 ) {
   return (
-    <div className="TagsContainer d-flex">
+    <div className="TagsContainer">
       {!props.hasDeprecatedAncestor && (
         <span className="Api__Table Docs__Tag Docs__Tag__Deprecated">
           Deprecated since {props.deprecationVersion}

diff --git a/packages/documentation/src/css/custom.scss b/packages/documentation/src/css/custom.scss
@@ -266,7 +266,7 @@ a.menu__link {
   background-color: var(--theme-color-2);
 }
 
-.d-flex {
+.display-flex {
   display: flex;
 }