feat: Add useCanvasProvider hook and customTheme prop

Workday · Oct 25, 2024 · 77bc04e · 77bc04e
1 parent d5be4cb
commit 77bc04e
Show file tree

Hide file tree

Showing 6 changed files with 509 additions and 430 deletions.
diff --git a/cypress/component/Breadcrumbs.spec.tsx b/cypress/component/Breadcrumbs.spec.tsx
@@ -22,10 +22,6 @@ function getDropdownMenu() {
   return cy.findByRole('menu');
 }
 
-function getDropdownMenuItem(number?: number) {
-  return number ? cy.findAllByRole('menuitem').eq(number) : cy.findAllByRole('menuitem');
-}
-
 function openDropdownMenu() {
   const dropdownButton = getDropdownButton();
   dropdownButton.focus();
@@ -113,7 +109,6 @@ describe('Breadcrumbs', () => {
     () => {
       beforeEach(() => {
         cy.mount(<OverflowBreadcrumbs />);
-        cy.wait(150);
       });
 
       it('should not have any axe errors', () => {
@@ -139,9 +134,11 @@ describe('Breadcrumbs', () => {
       context('when action list container is only 480px wide', () => {
         beforeEach(() => {
           cy.findByRole('button', {name: '480px'}).click();
+          cy.findByText('Current Container Width: 480px');
         });
 
         it('should have 4 items inside the "list"', () => {
+          // cy.findByText('Current Container Width: 480px');
           cy.findByRole('list').findAllByRole('listitem').should('have.length', 4);
         });
 
@@ -155,18 +152,19 @@ describe('Breadcrumbs', () => {
           });
 
           it('should contain second link as the first menu item', () => {
-            cy.findAllByRole('menuitem').eq(0).should('contain', 'Second Link');
+            cy.get('[role="menuitem"]').first().should('contain', 'Second Link');
           });
 
           it('should contain fifth link as the last menu item', () => {
-            cy.findAllByRole('menuitem').eq(-1).should('contain', 'Fifth Link');
+            cy.get('[role="menuitem"]').last().should('contain', 'Fifth Link');
           });
         });
       });
 
       context('when action list container is only 250px wide', () => {
         beforeEach(() => {
           cy.findByRole('button', {name: '250px'}).click();
+          cy.findByText('Current Container Width: 250px');
         });
 
         it('should have 3 list items inside the "list"', () => {
@@ -183,18 +181,19 @@ describe('Breadcrumbs', () => {
           });
 
           it('should contain second link as the first menu item', () => {
-            cy.findAllByRole('menuitem').eq(0).should('contain', 'Second Link');
+            cy.get('[role="menuitem"]').first().should('contain', 'Second Link');
           });
 
           it('should contain fifth link as the last menu item', () => {
-            cy.findAllByRole('menuitem').eq(-1).should('contain', 'Sixth Link');
+            cy.get('[role="menuitem"]').last().should('contain', 'Sixth Link');
           });
         });
       });
 
       context('when action list container is only 150px wide', () => {
         beforeEach(() => {
           cy.findByRole('button', {name: '150px'}).click();
+          cy.findByText('Current Container Width: 150px');
         });
 
         it('should have 2 list items inside the "list"', () => {
@@ -227,9 +226,10 @@ describe('Breadcrumbs', () => {
     () => {
       beforeEach(() => {
         cy.mount(<OverflowBreadcrumbs />);
-        cy.wait(150);
         cy.findByRole('button', {name: '480px'}).click();
+        cy.findByText('Current Container Width: 480px');
         openDropdownMenu();
+        cy.findByText('Overflow visibility: visible');
       });
 
       it('should not have any axe errors', () => {
@@ -254,14 +254,13 @@ describe('Breadcrumbs', () => {
 
       context('when the dropdown menu is toggled with a keypress', () => {
         it('should set focus to the first menu item', () => {
-          getDropdownMenuItem(0).should('have.focus');
+          cy.get('[role="menuitem"]').first().focused().should('contain', 'Second Link');
         });
       });
 
       context('when the first menu item is focused', () => {
         beforeEach(() => {
           cy.focused().realType('{downarrow}');
-          cy.wait(0);
         });
 
         it('should toggle focus to the second menu item on down keypress', () => {
@@ -279,14 +278,13 @@ describe('Breadcrumbs', () => {
           cy.focused().realType('{downarrow}');
           cy.focused().realType('{downarrow}');
           cy.focused().realType('{downarrow}');
-          getDropdownMenuItem(0).should('have.focus');
+          cy.get('[role="menuitem"]').first().should('contain', 'Second Link');
         });
       });
 
       context('when the down arrow key is pressed on the dropdown menu', () => {
         beforeEach(() => {
           cy.focused().realType('{downarrow}');
-          cy.wait(0);
         });
 
         it('should toggle focus to the next menu item on down keypress', () => {
@@ -303,7 +301,8 @@ describe('Breadcrumbs', () => {
 
         it('should toggle focus to the previous list item', () => {
           cy.focused().realType('{uparrow}');
-          getDropdownMenuItem(0).should('have.focus');
+          cy.focused().contains('Second Link').should('exist');
+          cy.focused().first().should('contain', 'Second Link');
         });
 
         it('should return focus from the first menu item to the last', () => {

diff --git a/modules/react/_examples/stories/mdx/Density.mdx b/modules/react/_examples/stories/mdx/Density.mdx
@@ -1,5 +1,6 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import {Density} from './examples/Density';
+import {DensityComponents} from './examples/DensityComponents';
 
 <Meta title="Examples/Forms/Density and Alignment" />
 
@@ -10,3 +11,7 @@ options to users, especially in the context of forms. Below is an example of how
 from elements to achieve the desired density.
 
 <ExampleCodeBlock code={Density} />
+
+To view how density is being applied to components, view below.
+
+<ExampleCodeBlock code={DensityComponents} />