style: adding dark theme styles in smart table (#1180)

* style: adding dark theme styles in smart table * style: making changes requested in review * test: correcting sort button tests
Brisanet · Nov 12, 2024 · 655dbee · 655dbee
1 parent 6fe9336
commit 655dbee
Show file tree

Hide file tree

Showing 8 changed files with 279 additions and 102 deletions.
diff --git a/projects/ion/src/lib/pagination/_pagination.theme.scss b/projects/ion/src/lib/pagination/_pagination.theme.scss
@@ -43,9 +43,53 @@ $default: (
   ),
 );
 
+$dark: (
+  text: (
+    font-family: ion-theme(font-family-main),
+    font-weight: 600,
+    font-size: 14px,
+  ),
+  size: (
+    sm: (
+      size: 24px,
+      border-radius: 6px,
+    ),
+    md: (
+      size: 32px,
+      border-radius: 8px,
+    ),
+  ),
+  page: (
+    border-color: ion-theme(neutral-1),
+    background-color: ion-theme(neutral-4),
+    text-color: ion-theme(neutral-1),
+    hover: (
+      border-color: ion-theme(primary-6),
+      background-color: ion-theme(primary-3),
+      text-color: ion-theme(primary-6),
+    ),
+    active: (
+      border-color: ion-theme(primary-5),
+      background-color: ion-theme(neutral-4),
+      text-color: ion-theme(primary-5),
+    ),
+    selected: (
+      border-color: ion-theme(primary-3),
+      background-color: ion-theme(neutral-4),
+      text-color: ion-theme(primary-3),
+    ),
+    disabled: (
+      border-color: ion-theme(neutral-3),
+      background-color: ion-theme(neutral-6),
+      text-color: ion-theme(neutral-3),
+    ),
+  ),
+);
+
 @include register-component(
   pagination,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/smart-table/smart-table.component.html b/projects/ion/src/lib/smart-table/smart-table.component.html
@@ -90,7 +90,7 @@
           [attr.data-testid]="'row-' + index"
           [class.last-row]="last && !config.pagination"
           [ngClass]="{
-            old: index % 2 === 0,
+            odd: index % 2 === 0,
             even: index % 2 !== 0,
             checked: row.selected
           }"

diff --git a/projects/ion/src/lib/smart-table/smart-table.component.spec.ts b/projects/ion/src/lib/smart-table/smart-table.component.spec.ts
@@ -21,19 +21,23 @@ import {
   EventTable,
 } from '../table/utilsTable';
 import { IonTagModule } from '../tag/tag.module';
+import { IonFormattedThemes, IonThemeService } from '../theme';
 import { IonTooltipModule } from '../tooltip/tooltip.module';
 import { PipesModule } from '../utils/pipes/pipes.module';
 import { SafeAny } from '../utils/safe-any';
 import { IonSmartTableProps } from './../core/types/smart-table';
 import { StatusType } from './../core/types/status';
 import { IonLinkModule } from './../link/link.module';
 import { IonSmartTableComponent } from './smart-table.component';
+import {
+  DARK_DISABLED_COLOR,
+  DARK_ENABLED_COLOR,
+  DISABLED_COLOR,
+  ENABLED_COLOR,
+} from '../utils/baseTable';
 
 registerLocaleData(localePT, 'pt-BR');
 
-const disabledArrowColor = 'var(--ion-neutral-4)';
-const enabledArrowColor = 'var(--ion-primary-6)';
-
 const columnTrigger = 'click';
 
 const columns: Column[] = [
@@ -148,6 +152,18 @@ const propsWithPopover: IonSmartTableProps<Character> = {
   } as SafeAny,
 };
 
+const DEFAULT_THEME_CONFIG = {
+  key: 'light',
+} as IonFormattedThemes;
+
+const DARK_THEME_CONFIG = {
+  key: 'dark',
+} as IonFormattedThemes;
+
+const ionThemeServiceMock: Partial<IonThemeService> = {
+  theme: DEFAULT_THEME_CONFIG,
+};
+
 const sut = async (
   customProps: IonSmartTableProps<Character | Book | Disco> = defaultProps
 ): Promise<SafeAny> => {
@@ -166,14 +182,14 @@ const sut = async (
       IonSpinnerModule,
       IonLinkModule,
     ],
+    providers: [{ provide: IonThemeService, useValue: ionThemeServiceMock }],
   });
 };
 
 describe('IonSmartTableComponent', () => {
   beforeEach(async () => {
     await sut();
   });
-
   it('should render table', async () => {
     expect(screen.getByTestId('ion-table'));
   });
@@ -966,47 +982,57 @@ describe('Table > Differents columns data type', () => {
       expect(screen.queryAllByTestId('sort-by-year')).toHaveLength(0);
     });
 
-    it('should render arrow down blue when sort desc', async () => {
-      const orderBy = columns[0].key;
-      await sut(tableDifferentColumns);
-      fireEvent.click(screen.getByTestId('sort-by-' + orderBy));
-      const arrowUp = screen.getByTestId('sort-by-' + orderBy).children[0];
-      const arrowDown = screen.getByTestId('sort-by-' + orderBy).children[1];
-      expect(arrowUp).toHaveAttribute('fill', disabledArrowColor);
-      expect(arrowDown).toHaveAttribute('fill', enabledArrowColor);
-    });
-
-    it('should render arrow up blue when sort asc', async () => {
-      tableDifferentColumns.config.columns = [
-        {
-          label: 'Albuns',
-          sort: true,
-          key: 'albuns',
-        },
-      ];
-      await sut(tableDifferentColumns);
-      fireEvent.click(screen.getByTestId('sort-by-albuns'));
-      fireEvent.click(screen.getByTestId('sort-by-albuns'));
-      const arrowUp = screen.getByTestId('sort-by-albuns').children[0];
-      const arrowDown = screen.getByTestId('sort-by-albuns').children[1];
-      expect(arrowUp).toHaveAttribute('fill', enabledArrowColor);
-      expect(arrowDown).toHaveAttribute('fill', disabledArrowColor);
-    });
-
-    it('should render arrow up and arrow down gray when not sorted', async () => {
-      tableDifferentColumns.config.columns = [
-        {
-          label: 'Albuns',
-          sort: true,
-          key: 'albuns',
-        },
-      ];
-      await sut(tableDifferentColumns);
-      const arrowUp = screen.getByTestId('sort-by-albuns').children[0];
-      const arrowDown = screen.getByTestId('sort-by-albuns').children[1];
-      expect(arrowUp).toHaveAttribute('fill', disabledArrowColor);
-      expect(arrowDown).toHaveAttribute('fill', disabledArrowColor);
-    });
+    describe.each([
+      {
+        label: 'default',
+        themeConfig: DEFAULT_THEME_CONFIG,
+        enabledArrowColor: ENABLED_COLOR,
+        disabledArrowColor: DISABLED_COLOR,
+      },
+      {
+        label: 'dark',
+        themeConfig: DARK_THEME_CONFIG,
+        enabledArrowColor: DARK_ENABLED_COLOR,
+        disabledArrowColor: DARK_DISABLED_COLOR,
+      },
+    ])(
+      '$label theme',
+      ({ themeConfig, enabledArrowColor, disabledArrowColor }) => {
+        beforeEach(async () => {
+          ionThemeServiceMock.theme = cloneDeep(themeConfig);
+          tableDifferentColumns.config.columns = [
+            { label: 'Albuns', sort: true, key: 'albuns' },
+          ];
+          await sut(tableDifferentColumns);
+        });
+
+        it('should render arrow down in primary color when sort desc', () => {
+          const orderBy = tableDifferentColumns.config.columns[0].key;
+          fireEvent.click(screen.getByTestId('sort-by-' + orderBy));
+          const arrowUp = screen.getByTestId('sort-by-' + orderBy).children[0];
+          const arrowDown = screen.getByTestId('sort-by-' + orderBy)
+            .children[1];
+          expect(arrowUp).toHaveAttribute('fill', disabledArrowColor);
+          expect(arrowDown).toHaveAttribute('fill', enabledArrowColor);
+        });
+
+        it('should render arrow up in primary color when sort asc', () => {
+          fireEvent.click(screen.getByTestId('sort-by-albuns'));
+          fireEvent.click(screen.getByTestId('sort-by-albuns'));
+          const arrowUp = screen.getByTestId('sort-by-albuns').children[0];
+          const arrowDown = screen.getByTestId('sort-by-albuns').children[1];
+          expect(arrowUp).toHaveAttribute('fill', enabledArrowColor);
+          expect(arrowDown).toHaveAttribute('fill', disabledArrowColor);
+        });
+
+        it('should render arrow up and arrow down in neutral color when not sorted', () => {
+          const arrowUp = screen.getByTestId('sort-by-albuns').children[0];
+          const arrowDown = screen.getByTestId('sort-by-albuns').children[1];
+          expect(arrowUp).toHaveAttribute('fill', disabledArrowColor);
+          expect(arrowDown).toHaveAttribute('fill', disabledArrowColor);
+        });
+      }
+    );
 
     it('should only emit sort action after a given debounce time', async () => {
       const debounceTime = 2000;

diff --git a/projects/ion/src/lib/smart-table/smart-table.component.ts b/projects/ion/src/lib/smart-table/smart-table.component.ts
@@ -1,3 +1,4 @@
+import { IonThemeService } from './../theme/theme.service';
 import {
   AfterViewChecked,
   ChangeDetectorRef,
@@ -38,7 +39,10 @@ export class IonSmartTableComponent<RowType>
   public sortWithDebounce: (column: Column) => void;
   private firstLoad = true;
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(
+    private cdr: ChangeDetectorRef,
+    protected ionThemeService: IonThemeService
+  ) {
     super();
   }
 

diff --git a/projects/ion/src/lib/table/_table.theme.scss b/projects/ion/src/lib/table/_table.theme.scss
@@ -52,9 +52,62 @@ $default: (
   ),
 );
 
+$dark: (
+  border-radius: 8px,
+  header-divider-color: ion-theme(neutral-1),
+  sort-button: (
+    hover-background-color: ion-theme(neutral-7),
+    focus-background-color: ion-theme(primary-1),
+    active-background-color: ion-theme(primary-4),
+    disabled-hover-background-color: ion-theme(neutral-6),
+  ),
+  row: (
+    th: (
+      background-color: ion-theme(neutral-5),
+      text: (
+        font-size: 16px,
+        font-weight: 600,
+        line-height: 22px,
+        color: ion-theme(neutral-1),
+      ),
+    ),
+    td: (
+      icon-color: ion-theme(primary-3),
+      text: (
+        font-size: 14px,
+        font-weight: 400,
+        line-height: 20px,
+        color: ion-theme(neutral-1),
+      ),
+    ),
+    hover-background-color: ion-theme(primary-8),
+    odd-background-color: ion-theme(neutral-6),
+    even-background-color: ion-theme(neutral-5),
+    checkbox-shadow: -2px 0 0 0 ion-theme(primary-8),
+  ),
+  no-data: (
+    text-color: ion-theme(neutral-1),
+    background-color: ion-theme(neutral-5),
+    icon-color: ion-theme(neutral-1),
+  ),
+  footer: (
+    divider-color: ion-theme(neutral-3),
+    background-color: ion-theme(neutral-5),
+    text: (
+      font-family: ion-theme(font-family-main),
+      font-style: normal,
+      font-weight: 400,
+      font-size: 14px,
+      line-height: 20px,
+      color: ion-theme(neutral-1),
+    ),
+  ),
+);
+
 @include register-component(
   table,
   (
     default: $default,
+    dark: $dark,
   )
 );