add correct button styling

massalabs · Oct 23, 2023 · ba9472d · ba9472d
1 parent a82e63c
commit ba9472d
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 50 deletions.
diff --git a/...ots/baseline/Button.cy.tsx-primary-button-with-both-icons-and-with-children.png b/...ots/baseline/Button.cy.tsx-primary-button-with-both-icons-and-with-children.png
diff --git a/...creenshots/baseline/Button.cy.tsx-primary-button-with-posIcon-with-children.png b/...creenshots/baseline/Button.cy.tsx-primary-button-with-posIcon-with-children.png
diff --git a/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-with-posIcon.png b/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-with-posIcon.png
diff --git a/...creenshots/baseline/Button.cy.tsx-primary-button-with-preIcon-with-children.png b/...creenshots/baseline/Button.cy.tsx-primary-button-with-preIcon-with-children.png
diff --git a/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-with-preIcon.png b/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-with-preIcon.png
diff --git a/...shots/baseline/Button.cy.tsx-primary-button-without-icons-and-with-children.png b/...shots/baseline/Button.cy.tsx-primary-button-without-icons-and-with-children.png
diff --git a/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-without-icons.png b/cypress-visual-screenshots/baseline/Button.cy.tsx-primary-button-without-icons.png
diff --git a/...s/baseline/Button.cy.tsx-secondary-button-with-both-icons-and-with-children.png b/...s/baseline/Button.cy.tsx-secondary-button-with-both-icons-and-with-children.png
diff --git a/...eenshots/baseline/Button.cy.tsx-secondary-button-with-posIcon-with-children.png b/...eenshots/baseline/Button.cy.tsx-secondary-button-with-posIcon-with-children.png
diff --git a/...ess-visual-screenshots/baseline/Button.cy.tsx-secondary-button-with-posIcon.png b/...ess-visual-screenshots/baseline/Button.cy.tsx-secondary-button-with-posIcon.png
diff --git a/...eenshots/baseline/Button.cy.tsx-secondary-button-with-preIcon-with-children.png b/...eenshots/baseline/Button.cy.tsx-secondary-button-with-preIcon-with-children.png
diff --git a/...ess-visual-screenshots/baseline/Button.cy.tsx-secondary-button-with-preIcon.png b/...ess-visual-screenshots/baseline/Button.cy.tsx-secondary-button-with-preIcon.png
diff --git a/...ots/baseline/Button.cy.tsx-secondary-button-without-icons-and-with-children.png b/...ots/baseline/Button.cy.tsx-secondary-button-without-icons-and-with-children.png
diff --git a/...ss-visual-screenshots/baseline/Button.cy.tsx-secondary-button-without-icons.png b/...ss-visual-screenshots/baseline/Button.cy.tsx-secondary-button-without-icons.png
diff --git a/cypress/component/integration/Button.cy.tsx b/cypress/component/integration/Button.cy.tsx
@@ -9,7 +9,11 @@ describe('Component | Integration | Button', function () {
 
     describe('primary button without icons', () => {
       beforeEach(() => {
-        cy.mount(<Button />);
+        cy.mount(
+          <div className="theme-dark">
+            <Button />
+          </div>,
+        );
       });
       it('should render primary button without icons', () => {
         cy.get('[data-testid="button"]').should('exist');
@@ -24,7 +28,11 @@ describe('Component | Integration | Button', function () {
 
     describe('primary button with preIcon', () => {
       beforeEach(() => {
-        cy.mount(<Button preIcon={<FiArrowUpRight data-testid="preIcon" />} />);
+        cy.mount(
+          <div className="theme-dark">
+            <Button preIcon={<FiArrowUpRight data-testid="preIcon" />} />;
+          </div>,
+        );
       });
 
       it('should render primary button with preIcon', () => {
@@ -40,7 +48,11 @@ describe('Component | Integration | Button', function () {
 
     describe('primary button with posIcon', () => {
       beforeEach(() => {
-        cy.mount(<Button posIcon={<FiArrowUpRight data-testid="posIcon" />} />);
+        cy.mount(
+          <div className="theme-dark">
+            <Button posIcon={<FiArrowUpRight data-testid="posIcon" />} />
+          </div>,
+        );
       });
       it('should render primary button with posIcon', () => {
         cy.get('[data-testid="button"]').should('exist');
@@ -56,12 +68,15 @@ describe('Component | Integration | Button', function () {
     describe('primary button with both icons and with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            preIcon={<FiArrowUpRight data-testid="preIcon" />}
-            posIcon={<FiArrowUpRight data-testid="posIcon" />}
-          >
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button
+              preIcon={<FiArrowUpRight data-testid="preIcon" />}
+              posIcon={<FiArrowUpRight data-testid="posIcon" />}
+            >
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render primary button with both icons and children', () => {
@@ -80,9 +95,12 @@ describe('Component | Integration | Button', function () {
     describe('primary button with preIcon with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button preIcon={<FiArrowUpRight data-testid="preIcon" />}>
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button preIcon={<FiArrowUpRight data-testid="preIcon" />}>
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render primary button with preIcon and with children', () => {
@@ -101,9 +119,12 @@ describe('Component | Integration | Button', function () {
     describe('primary button with posIcon with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button posIcon={<FiArrowUpRight data-testid="posIcon" />}>
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button posIcon={<FiArrowUpRight data-testid="posIcon" />}>
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render primary button with posIcon and children', () => {
@@ -122,9 +143,12 @@ describe('Component | Integration | Button', function () {
     describe('primary button without icons and with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button>
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button>
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render primary button without icons and children', () => {
@@ -144,7 +168,11 @@ describe('Component | Integration | Button', function () {
 
     describe('secondary button without icons', () => {
       beforeEach(() => {
-        cy.mount(<Button variant="secondary" />);
+        cy.mount(
+          <div className="theme-dark">
+            <Button variant="secondary" />
+          </div>,
+        );
       });
       it('should render secondary button without icons', () => {
         cy.get('[data-testid="button"]').should('exist');
@@ -160,10 +188,13 @@ describe('Component | Integration | Button', function () {
     describe('secondary button with preIcon', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            variant="secondary"
-            preIcon={<FiArrowUpRight data-testid="preIcon" />}
-          />,
+          <div className="theme-dark">
+            <Button
+              variant="secondary"
+              preIcon={<FiArrowUpRight data-testid="preIcon" />}
+            />
+            ,
+          </div>,
         );
       });
       it('should render secondary button with preIcon', () => {
@@ -180,10 +211,13 @@ describe('Component | Integration | Button', function () {
     describe('secondary button with posIcon', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            variant="secondary"
-            posIcon={<FiArrowUpRight data-testid="posIcon" />}
-          />,
+          <div className="theme-dark">
+            <Button
+              variant="secondary"
+              posIcon={<FiArrowUpRight data-testid="posIcon" />}
+            />
+            ,
+          </div>,
         );
       });
       it('should render secondary button with posIcon', () => {
@@ -200,13 +234,16 @@ describe('Component | Integration | Button', function () {
     describe('secondary button with both icons and with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            variant="secondary"
-            preIcon={<FiArrowUpRight data-testid="preIcon" />}
-            posIcon={<FiArrowUpRight data-testid="posIcon" />}
-          >
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button
+              variant="secondary"
+              preIcon={<FiArrowUpRight data-testid="preIcon" />}
+              posIcon={<FiArrowUpRight data-testid="posIcon" />}
+            >
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render secondary button with both icons and children', () => {
@@ -228,12 +265,14 @@ describe('Component | Integration | Button', function () {
     describe('secondary button with preIcon with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            variant="secondary"
-            preIcon={<FiArrowUpRight data-testid="preIcon" />}
-          >
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button
+              variant="secondary"
+              preIcon={<FiArrowUpRight data-testid="preIcon" />}
+            >
+              <div data-testid="children">Children</div>
+            </Button>
+          </div>,
         );
       });
       it('should render secondary button with preIcon and with children', () => {
@@ -245,19 +284,22 @@ describe('Component | Integration | Button', function () {
       });
 
       it('should match snapshot', () => {
-        compareSnapshot(cy, 'primary-button-with-preIcon-with-children');
+        compareSnapshot(cy, 'secondary-button-with-preIcon-with-children');
       });
     });
 
     describe('secondary button with posIcon with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button
-            variant="secondary"
-            posIcon={<FiArrowUpRight data-testid="posIcon" />}
-          >
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button
+              variant="secondary"
+              posIcon={<FiArrowUpRight data-testid="posIcon" />}
+            >
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render secondary button with posIcon and children', () => {
@@ -276,9 +318,12 @@ describe('Component | Integration | Button', function () {
     describe('secondary button without icons and with children', () => {
       beforeEach(() => {
         cy.mount(
-          <Button variant="secondary">
-            <div data-testid="children">Children</div>
-          </Button>,
+          <div className="theme-dark">
+            <Button variant="secondary">
+              <div data-testid="children">Children</div>
+            </Button>
+            ,
+          </div>,
         );
       });
       it('should render secondary button without icons and children', () => {