Skip to content

Commit

Permalink
fix(styling): empty warning should separate icon & text (#1491)
Browse files Browse the repository at this point in the history 
- the previous code was using the `:before` pseudo and we were able to add text to the same div but that is no longer feasible with the new pure CSS icons since the div is the icon and nothing else, so the text has to be in a separate div
- also use flex to align the text and icon in the middle
  • Loading branch information
@ghiscoding
ghiscoding committed Apr 29, 2024
1 parent 69f7bfc commit 240cbd3
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 25 deletions.
8 changes: 8 additions & 0 deletions packages/common/src/styles/slick-component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
// ----------------------------------------------

.slick-empty-data-warning {
display: flex;
align-items: center;
gap: 5px;
position: relative;
color: var(--slick-empty-data-warning-color, $slick-empty-data-warning-color);
font-family: var(--slick-empty-data-warning-font-family, $slick-empty-data-warning-font-family);
Expand All @@ -54,6 +57,11 @@
margin: var(--slick-empty-data-warning-margin, $slick-empty-data-warning-margin);
padding: var(--slick-empty-data-warning-padding, $slick-empty-data-warning-padding);
z-index: var(--slick-empty-data-warning-z-index, $slick-empty-data-warning-z-index);
div {
display: flex;
align-items: center;
gap: 5px;
}
}


Expand Down
8 changes: 4 additions & 4 deletions packages/empty-warning-component/src/slick-empty-warning.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@ export class SlickEmptyWarningComponent implements ExternalResource {
// when using a frozen/pinned grid, we also have extra options to hide left/right message
if (this._warningLeftElement) {
// display/hide right/left messages
let leftDisplay = isShowing ? 'block' : 'none';
let leftDisplay = isShowing ? 'flex' : 'none';
if (isFrozenGrid && isShowing) {
leftDisplay = (mergedOptions.hideFrozenLeftWarning) ? 'none' : 'block';
leftDisplay = (mergedOptions.hideFrozenLeftWarning) ? 'none' : 'flex';
}
this._warningLeftElement.style.display = leftDisplay;

Expand All @@ -123,9 +123,9 @@ export class SlickEmptyWarningComponent implements ExternalResource {

if (this._warningRightElement) {
// use correct left margin (defaults to 40% on regular grid or 10px on frozen grid)
let rightDisplay = isShowing ? 'block' : 'none';
let rightDisplay = isShowing ? 'flex' : 'none';
if (isFrozenGrid && isShowing) {
rightDisplay = (mergedOptions.hideFrozenRightWarning) ? 'none' : 'block';
rightDisplay = (mergedOptions.hideFrozenRightWarning) ? 'none' : 'flex';
}
this._warningRightElement.style.display = rightDisplay;

Expand Down
40 changes: 20 additions & 20 deletions packages/empty-warning-component/src/slick-empty-warning.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.textContent).toBe('No data to display.');
expect(componentRightElm.textContent).toBe('No data to display.');
});
Expand Down Expand Up @@ -139,7 +139,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('none');
expect(componentRightElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -159,8 +159,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -183,8 +183,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand Down Expand Up @@ -215,8 +215,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand Down Expand Up @@ -269,8 +269,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('40%');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -291,8 +291,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('15px');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -313,8 +313,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('22px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -335,7 +335,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('none');
expect(componentLeftElm.textContent).toBe('No data to display.');
expect(componentRightElm.textContent).toBe('No data to display.');
Expand All @@ -352,7 +352,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<span class="mdi mdi-alert text-color-warning"></span> No Record found.');
});
Expand All @@ -372,7 +372,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<span class="mdi mdi-alert text-color-warning"></span> No Record found.');
});
Expand All @@ -392,7 +392,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<div class="container"><span class="mdi mdi-alert text-color-warning"></span> No Record found.</div>');
});
Expand All @@ -410,7 +410,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.textContent).toBe('Aucune donnée à afficher.');
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { EventNamingStyle } from '@slickgrid-universal/event-pub-sub';
// create empty warning message as Document Fragment to be CSP safe
const emptyWarningElm = document.createElement('div');
emptyWarningElm.appendChild(createDomElement('span', { className: 'mdi mdi-alert text-color-warning' }));
emptyWarningElm.appendChild(document.createTextNode(' No data to display.'));
emptyWarningElm.appendChild(createDomElement('span', { textContent: 'No data to display.' }));

/** Global Grid Options Defaults for Salesforce */
export const SalesforceGlobalGridOptions = {
Expand Down

0 comments on commit 240cbd3

Please sign in to comment.