From 0b006d64b5a602a7ec88adb244de461421e2e3b2 Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Tue, 14 Nov 2023 13:30:50 -0300 Subject: [PATCH 1/6] Add Keyboard Nav AVT test for `FluidTextArea` (#15161) * test: changed text * test: added avt keyboard test * test: fixed test --- .../FluidTextArea-test.avt.e2e.js | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js b/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js index 7c736b571abd..7b6d11c06314 100644 --- a/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js +++ b/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js @@ -21,4 +21,91 @@ test.describe('FluidTextArea @avt', () => { }); await expect(page).toHaveNoACViolations('FluidTextArea @avt-default-state'); }); + + test('@avt-advanced-states default-with-layers', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextArea', + id: 'experimental-unstable-fluidtextarea--default-with-layers', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidTextArea-default-with-layers' + ); + }); + + test('@avt-advanced-states default-with-tooltip', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextArea', + id: 'experimental-unstable-fluidtextarea--default-with-tooltip', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidTextArea-default-with-tooltip' + ); + }); + + test('@avt-advanced-states skeleton', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextArea', + id: 'experimental-unstable-fluidtextarea--skeleton', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidTextArea-skeleton'); + }); + + test('@avt-keyboard-nav FluidTextArea default', async ({ page }) => { + await visitStory(page, { + component: 'TextArea', + id: 'experimental-unstable-fluidtextarea--default', + globals: { + theme: 'white', + }, + }); + const textArea = page.getByRole('textbox'); + await expect(page.getByText('Text Area label')).toBeVisible(); + + // Checking focus on textarea + await page.keyboard.press('Tab'); + await expect(textArea).toBeFocused(); + + // Writting a word to check functionality + await textArea.fill('test'); + await expect(textArea).toHaveValue('test'); + await expect(page).toHaveNoACViolations('FluidTextArea default'); + }); + + test('@avt-keyboard-nav FluidTextArea with tooltip', async ({ page }) => { + await visitStory(page, { + component: 'TextArea', + id: 'experimental-unstable-fluidtextarea--default-with-tooltip', + globals: { + theme: 'white', + }, + }); + await expect(page.getByText('Text Area label')).toBeVisible(); + + // Checking tooltip + await page.keyboard.press('Tab'); + await expect(page.getByLabel('Show information')).toBeFocused(); + await page.keyboard.press('Enter'); + await expect( + page.getByText('Additional field information here.') + ).toBeVisible(); + + // Checking focus on textarea + const textArea = page.getByRole('textbox'); + await page.keyboard.press('Tab'); + await expect(textArea).toBeFocused(); + + // Writting a word to check functionality + await textArea.fill('test'); + await expect(textArea).toHaveValue('test'); + await expect(page).toHaveNoACViolations('FluidTextArea with tooltip'); + }); }); From 64c31b72b2019e65ce76f596df8e9da81a70ab2b Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 14 Nov 2023 14:38:09 -0600 Subject: [PATCH 2/6] fix(sidenavitems): remove conditional so children are always cloned (#15205) * fix(sidenavitems): remove conditional so children are always cloned * chore: remove test code --- .../src/components/UIShell/SideNavItems.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/UIShell/SideNavItems.tsx b/packages/react/src/components/UIShell/SideNavItems.tsx index f16a95c97fdf..044ae4f57265 100644 --- a/packages/react/src/components/UIShell/SideNavItems.tsx +++ b/packages/react/src/components/UIShell/SideNavItems.tsx @@ -40,16 +40,14 @@ const SideNavItems: React.FC = ({ const childrenWithExpandedState = React.Children.map(children, (child) => { if (React.isValidElement(child)) { // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children - const childType = child.type as React.ComponentType; - if (childType && childType.displayName) { - return React.cloneElement(child, { - ...(CARBON_SIDENAV_ITEMS.includes(childType.displayName) - ? { - isSideNavExpanded, - } - : {}), - }); - } + const childDisplayName = (child.type as any)?.displayName; + return React.cloneElement(child, { + ...(CARBON_SIDENAV_ITEMS.includes(childDisplayName) + ? { + isSideNavExpanded, + } + : {}), + }); } }); return
    {childrenWithExpandedState}
; From de238ea486ae5b50ad2084538375efef44d008e2 Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Tue, 14 Nov 2023 14:09:41 -0300 Subject: [PATCH 3/6] test: added avt keyboard test (#15151) --- .../FluidSearch/FluidSearch-test.avt.e2e.js | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js b/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js index 4f89ed23fd6c..2b5cd0ce2eba 100644 --- a/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js +++ b/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js @@ -21,4 +21,49 @@ test.describe('FluidSearch @avt', () => { }); await expect(page).toHaveNoACViolations('FluidSearch @avt-default-state'); }); + + test('@avt-advanced-states skeleton', async ({ page }) => { + await visitStory(page, { + component: 'FluidSearch', + id: 'experimental-unstable-fluidsearch--skeleton', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidSearch-skeleton'); + }); + + test('@avt-keyboard-nav', async ({ page }) => { + await visitStory(page, { + component: 'Search', + id: 'experimental-unstable-fluidsearch--default', + globals: { + theme: 'white', + }, + }); + const search = page.getByRole('searchbox'); + const clearButton = page.getByRole('button'); + await expect(search).toBeVisible(); + await expect(clearButton).not.toBeVisible(); + + // Tab to the Search + await page.keyboard.press('Tab'); + await expect(search).toBeFocused(); + // Enter search value + await search.fill('test'); + await expect(search).toHaveValue('test'); + await expect(clearButton).toBeVisible(); + // Clear the search value with Clear button + await page.keyboard.press('Tab'); + await expect(clearButton).toBeFocused(); + await page.keyboard.press('Enter'); + await expect(search).toHaveValue(''); + await expect(search).toBeFocused(); + // Clear the search value with ESC key + await search.fill('test'); + await expect(search).toHaveValue('test'); + await page.keyboard.press('Escape'); + await expect(search).toHaveValue(''); + await expect(search).toBeFocused(); + }); }); From bb47c76e12bf48ea314060ae3ee9b9e81897abf8 Mon Sep 17 00:00:00 2001 From: MIchael Dudley Date: Tue, 14 Nov 2023 15:32:18 -0500 Subject: [PATCH 4/6] feat(Pictograms): new pictograms and categories v21 (#15135) * feat(Pictograms): new pictograms and categories v21 * chore(snapshots): update snapshots * fix(Pictograms): rename cloud--pal to carbon--for-cloud * docs(Pictograms): update alias --------- Co-authored-by: TJ Egan --- .../__snapshots__/PublicAPI-test.js.snap | 20 ++ .../__snapshots__/PublicAPI-test.js.snap | 20 ++ packages/pictograms/categories.yml | 24 +++ packages/pictograms/pictograms.yml | 172 +++++++++++++++++- .../ai-governance--lifecycle-factsheet.svg | 24 +++ .../src/svg/ai-governance--model-tuned.svg | 28 +++ .../src/svg/ai-governance--model.svg | 28 +++ .../src/svg/ai-governance--prompt.svg | 22 +++ .../pictograms/src/svg/carbon--for-cloud.svg | 13 ++ packages/pictograms/src/svg/carbon.svg | 12 ++ packages/pictograms/src/svg/cardboard.svg | 14 ++ packages/pictograms/src/svg/flexible.svg | 11 ++ .../pictograms/src/svg/fountain--drinking.svg | 25 +++ packages/pictograms/src/svg/library.svg | 14 ++ packages/pictograms/src/svg/literature.svg | 14 ++ packages/pictograms/src/svg/loop--hearing.svg | 14 ++ packages/pictograms/src/svg/scalable.svg | 10 + packages/pictograms/src/svg/silence.svg | 18 ++ .../pictograms/src/svg/station--hydration.svg | 16 ++ .../src/svg/storage--for-data-and-ai.svg | 36 ++++ .../src/svg/storage--for-resiliency.svg | 13 ++ .../pictograms/src/svg/trash--burnable.svg | 15 ++ .../src/svg/trash--non-burnable.svg | 17 ++ .../pictograms/src/svg/waste--electronic.svg | 13 ++ 24 files changed, 592 insertions(+), 1 deletion(-) create mode 100644 packages/pictograms/src/svg/ai-governance--lifecycle-factsheet.svg create mode 100644 packages/pictograms/src/svg/ai-governance--model-tuned.svg create mode 100644 packages/pictograms/src/svg/ai-governance--model.svg create mode 100644 packages/pictograms/src/svg/ai-governance--prompt.svg create mode 100644 packages/pictograms/src/svg/carbon--for-cloud.svg create mode 100644 packages/pictograms/src/svg/carbon.svg create mode 100644 packages/pictograms/src/svg/cardboard.svg create mode 100644 packages/pictograms/src/svg/flexible.svg create mode 100644 packages/pictograms/src/svg/fountain--drinking.svg create mode 100644 packages/pictograms/src/svg/library.svg create mode 100644 packages/pictograms/src/svg/literature.svg create mode 100644 packages/pictograms/src/svg/loop--hearing.svg create mode 100644 packages/pictograms/src/svg/scalable.svg create mode 100644 packages/pictograms/src/svg/silence.svg create mode 100644 packages/pictograms/src/svg/station--hydration.svg create mode 100644 packages/pictograms/src/svg/storage--for-data-and-ai.svg create mode 100644 packages/pictograms/src/svg/storage--for-resiliency.svg create mode 100644 packages/pictograms/src/svg/trash--burnable.svg create mode 100644 packages/pictograms/src/svg/trash--non-burnable.svg create mode 100644 packages/pictograms/src/svg/waste--electronic.svg diff --git a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap index 737d3dff0ec9..4659d54d2b54 100644 --- a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap @@ -19,6 +19,10 @@ Array [ "Ai", "AiEthics", "AiExplainability", + "AiGovernanceLifecycleFactsheet", + "AiGovernanceModel", + "AiGovernanceModelTuned", + "AiGovernancePrompt", "AiPrivacy", "AiReady", "AiRobustness", @@ -121,8 +125,11 @@ Array [ "CanadaMapleLeaf", "Candy", "Capitol", + "Carbon", + "CarbonForCloud", "CarbonForIbmDotcom", "CarbonForIbmProduct", + "Cardboard", "Care", "CargoCrane", "CargoShip", @@ -434,6 +441,7 @@ Array [ "FlashingContent", "Flexibility", "Flexibility_02", + "Flexible", "FlexibleCompute", "FlexibleInfrastructure", "FlowChart", @@ -445,6 +453,7 @@ Array [ "Folder", "Forecasting", "Forklift", + "FountainDrinking", "Fragile", "FreeTrial", "Fuel", @@ -591,11 +600,13 @@ Array [ "Lantern", "Launch", "Leader", + "Library", "LiftAndShift", "Lightning", "Link", "ListBullet", "ListCheckbox", + "Literature", "LoadBalancer", "Location", "Lock_01", @@ -604,6 +615,7 @@ Array [ "LockedNetwork_02", "London", "LondonBigBen", + "LoopHearing", "Love", "LoweringRisk", "Luggage", @@ -851,6 +863,7 @@ Array [ "Satellite", "SatelliteDish", "SaveTime", + "Scalable", "Scale", "Scale_02", "ScalingContainers", @@ -889,6 +902,7 @@ Array [ "Shop", "ShoppingCart", "Shower", + "Silence", "Singapore", "SingleSignOn", "Slack", @@ -922,6 +936,7 @@ Array [ "StairsUp", "StartForFree", "StartUps", + "StationHydration", "StationaryBicycle", "Steel", "SteeringWheel", @@ -930,6 +945,8 @@ Array [ "Stockholm", "Storage", "StorageAreaNetworks", + "StorageForDataAndAi", + "StorageForResiliency", "StorageProduct", "Strategy", "StrategyAndRisk", @@ -1028,6 +1045,8 @@ Array [ "Transparency_01", "Transparency_02", "Trash", + "TrashBurnable", + "TrashNonBurnable", "Tree", "TreeDiagram", "TreeMap", @@ -1086,6 +1105,7 @@ Array [ "WashingtonDc", "WashingtonDcCapitol", "WashingtonDcMonument", + "WasteElectronic", "WatsonLogo", "Watsonx", "WatsonxAi", diff --git a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap index 5babb4daf6f3..22251bd1c9f2 100644 --- a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap @@ -19,6 +19,10 @@ Array [ "Ai", "AiEthics", "AiExplainability", + "AiGovernanceLifecycleFactsheet", + "AiGovernanceModel", + "AiGovernanceModelTuned", + "AiGovernancePrompt", "AiPrivacy", "AiReady", "AiRobustness", @@ -121,8 +125,11 @@ Array [ "CanadaMapleLeaf", "Candy", "Capitol", + "Carbon", + "CarbonForCloud", "CarbonForIbmDotcom", "CarbonForIbmProduct", + "Cardboard", "Care", "CargoCrane", "CargoShip", @@ -434,6 +441,7 @@ Array [ "FlashingContent", "Flexibility", "Flexibility_02", + "Flexible", "FlexibleCompute", "FlexibleInfrastructure", "FlowChart", @@ -445,6 +453,7 @@ Array [ "Folder", "Forecasting", "Forklift", + "FountainDrinking", "Fragile", "FreeTrial", "Fuel", @@ -590,11 +599,13 @@ Array [ "Lantern", "Launch", "Leader", + "Library", "LiftAndShift", "Lightning", "Link", "ListBullet", "ListCheckbox", + "Literature", "LoadBalancer", "Location", "Lock_01", @@ -603,6 +614,7 @@ Array [ "LockedNetwork_02", "London", "LondonBigBen", + "LoopHearing", "Love", "LoweringRisk", "Luggage", @@ -850,6 +862,7 @@ Array [ "Satellite", "SatelliteDish", "SaveTime", + "Scalable", "Scale", "Scale_02", "ScalingContainers", @@ -888,6 +901,7 @@ Array [ "Shop", "ShoppingCart", "Shower", + "Silence", "Singapore", "SingleSignOn", "Slack", @@ -921,6 +935,7 @@ Array [ "StairsUp", "StartForFree", "StartUps", + "StationHydration", "StationaryBicycle", "Steel", "SteeringWheel", @@ -929,6 +944,8 @@ Array [ "Stockholm", "Storage", "StorageAreaNetworks", + "StorageForDataAndAi", + "StorageForResiliency", "StorageProduct", "Strategy", "StrategyAndRisk", @@ -1027,6 +1044,8 @@ Array [ "Transparency_01", "Transparency_02", "Trash", + "TrashBurnable", + "TrashNonBurnable", "Tree", "TreeDiagram", "TreeMap", @@ -1085,6 +1104,7 @@ Array [ "WashingtonDc", "WashingtonDcCapitol", "WashingtonDcMonument", + "WasteElectronic", "WatsonLogo", "Watsonx", "WatsonxAi", diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml index 7c6e641477ed..75f2ec270cd2 100644 --- a/packages/pictograms/categories.yml +++ b/packages/pictograms/categories.yml @@ -13,6 +13,7 @@ categories: - embed - export--01 - export--02 + - flexible - launch - link - love @@ -25,9 +26,16 @@ categories: - renew - repeat - reset + - scalable - trash - upload--01 - upload--02 + - name: AI + members: + - ai-governance--lifecycle-factsheet + - ai-governance--model + - ai-governance--model-tuned + - ai-governance--prompt - name: Blockchain members: - connected--ecosystem @@ -555,6 +563,8 @@ categories: - server--rack - servers - storage--area-networks + - storage--for-data-and-ai + - storage--for-resiliency - storage--product - tape--storage - virtualization @@ -737,6 +747,8 @@ categories: - name: IBM members: - bee + - carbon + - carbon--for-cloud - carbon--for-ibm-dotcom - carbon--for-ibm-product - enterprise--design--thinking--01 @@ -1197,3 +1209,15 @@ categories: - tornado - weather - windy + - name: Workplace + members: + - cardboard + - fountain--drinking + - library + - literature + - loop--hearing + - silence + - station--hydration + - trash--burnable + - trash--non-burnable + - waste--electronic diff --git a/packages/pictograms/pictograms.yml b/packages/pictograms/pictograms.yml index 59ceec83ec23..1c851647827b 100644 --- a/packages/pictograms/pictograms.yml +++ b/packages/pictograms/pictograms.yml @@ -141,6 +141,37 @@ aliases: - AI trust - trust +- name: ai-governance--lifecycle-factsheet + friendly_name: AI governance lifecycle factsheet + aliases: + - governance + - model + - factsheet + - artificial intelligence +- name: ai-governance--model + friendly_name: AI governance model + aliases: + - governance + - model + - artificial intelligence +- name: ai-governance--model-tuned + friendly_name: AI governance model tuned + aliases: + - governance + - model + - tuned + - modified + - changed + - edited + - artificial intelligence +- name: ai-governance--prompt + friendly_name: AI governance prompt + aliases: + - governance + - prompt + - code + - snippet + - artificial intelligence - name: air--conditioner friendly_name: Air conditioner aliases: @@ -841,6 +872,45 @@ - government - municipal - legislature +- name: carbon + friendly_name: Carbon + aliases: + - product + - web + - software + - digital + - carbon + - carbon logo + - pictogram + - icon + - components + - patterns + - code + - ui + - interface + - system + - design system + - library + - reusable + - component library + - react + - vue + - angular + - web components +- name: carbon--for-cloud + friendly_name: Carbon for cloud + aliases: + - cloud + - PAL + - cloud PAL + - component asset library + - carbon + - kit + - development + - pattern asset library + - product + - product design + - software design - name: carbon--for-ibm-dotcom friendly_name: Carbon for IBM dotcom aliases: @@ -863,6 +933,13 @@ - product - product design - software design +- name: cardboard + friendly_name: Cardboard + aliases: + - cardboard + - box + - recycle + - recyclable - name: care friendly_name: Care aliases: @@ -2979,6 +3056,12 @@ aliases: - flexibility - cloud +- name: flexible + friendly_name: Flexible + aliases: + - flexible + - pliable + - moldable - name: flexible--compute friendly_name: Flexible compute aliases: @@ -3048,6 +3131,12 @@ - forklift - machinery - warehouse +- name: fountain--drinking + friendly_name: Drinking fountain + aliases: + - water + - potable water + - hydration - name: fragile friendly_name: Fragile aliases: @@ -4070,6 +4159,13 @@ aliases: - leader - Cloud +- name: library + friendly_name: Library + aliases: + - literature + - book + - read + - research - name: lift-and-shift friendly_name: Lift and shift aliases: @@ -4102,6 +4198,15 @@ - list - checkbox - cloud +- name: literature + friendly_name: Literature + aliases: + - literature + - book + - document + - manual + - read + - library - name: load-balancer friendly_name: Load balancer aliases: @@ -4153,6 +4258,15 @@ - big ben - cities - city +- name: loop--hearing + friendly_name: Hearing loop + aliases: + - assistive listening device + - hearing + - ear + - listen + - ADA + - deaf - name: love friendly_name: Love aliases: @@ -5852,6 +5966,13 @@ aliases: - save time - Cloud +- name: scalable + friendly_name: Scalable + aliases: + - expandable + - expansible + - modular + - adaptable - name: scale friendly_name: Scale aliases: @@ -6121,6 +6242,12 @@ - plumbing - workplace - support +- name: silence + friendly_name: Silence + aliases: + - sound + - quiet area + - mouth - name: singapore friendly_name: Singapore aliases: @@ -6339,6 +6466,14 @@ aliases: - start-ups - cloud +- name: station--hydration + friendly_name: Hydration station + aliases: + - drinking fountain + - water + - hydration + - bottle refill + - water fountain - name: stationary--bicycle friendly_name: Stationary bicycle aliases: @@ -6404,6 +6539,20 @@ - servers - infrastructure - it infrastructure +- name: storage--for-data-and-ai + friendly_name: Storage for data and AI + aliases: + - AI + - data + - resilience + - protection +- name: storage--for-resiliency + friendly_name: Storage for resiliency + aliases: + - AI + - data + - resilience + - protection - name: storage--product friendly_name: Storage product aliases: @@ -7081,6 +7230,21 @@ - garbage - dustbin - workplace +- name: trash--burnable + friendly_name: Burnable trash + aliases: + - burnable + - flammable + - fire + - flame + - hot + - trash +- name: trash--non-burnable + friendly_name: Non-burnable trash + aliases: + - non-burnable + - non-flammable + - trash - name: tree friendly_name: Tree aliases: @@ -7488,6 +7652,12 @@ - monument - cities - city +- name: waste--electronic + friendly_name: Electronic waste + aliases: + - electronic waste + - electronics + - e-waste - name: watson--logo friendly_name: IBM Watson aliases: @@ -7708,7 +7878,7 @@ - health - active - workplace - - community + - community - wellness - name: yoga--03 friendly_name: Yoga 03 diff --git a/packages/pictograms/src/svg/ai-governance--lifecycle-factsheet.svg b/packages/pictograms/src/svg/ai-governance--lifecycle-factsheet.svg new file mode 100644 index 000000000000..536781a93c4c --- /dev/null +++ b/packages/pictograms/src/svg/ai-governance--lifecycle-factsheet.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/packages/pictograms/src/svg/ai-governance--model-tuned.svg b/packages/pictograms/src/svg/ai-governance--model-tuned.svg new file mode 100644 index 000000000000..df0fb6070e9c --- /dev/null +++ b/packages/pictograms/src/svg/ai-governance--model-tuned.svg @@ -0,0 +1,28 @@ + + + + + + diff --git a/packages/pictograms/src/svg/ai-governance--model.svg b/packages/pictograms/src/svg/ai-governance--model.svg new file mode 100644 index 000000000000..c55c45f203ed --- /dev/null +++ b/packages/pictograms/src/svg/ai-governance--model.svg @@ -0,0 +1,28 @@ + + + + + + diff --git a/packages/pictograms/src/svg/ai-governance--prompt.svg b/packages/pictograms/src/svg/ai-governance--prompt.svg new file mode 100644 index 000000000000..ee1612cdf7ad --- /dev/null +++ b/packages/pictograms/src/svg/ai-governance--prompt.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/packages/pictograms/src/svg/carbon--for-cloud.svg b/packages/pictograms/src/svg/carbon--for-cloud.svg new file mode 100644 index 000000000000..2639626449bb --- /dev/null +++ b/packages/pictograms/src/svg/carbon--for-cloud.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/packages/pictograms/src/svg/carbon.svg b/packages/pictograms/src/svg/carbon.svg new file mode 100644 index 000000000000..4f7921d62d0f --- /dev/null +++ b/packages/pictograms/src/svg/carbon.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/packages/pictograms/src/svg/cardboard.svg b/packages/pictograms/src/svg/cardboard.svg new file mode 100644 index 000000000000..c108b58857cb --- /dev/null +++ b/packages/pictograms/src/svg/cardboard.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/flexible.svg b/packages/pictograms/src/svg/flexible.svg new file mode 100644 index 000000000000..0470acfe9810 --- /dev/null +++ b/packages/pictograms/src/svg/flexible.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/packages/pictograms/src/svg/fountain--drinking.svg b/packages/pictograms/src/svg/fountain--drinking.svg new file mode 100644 index 000000000000..9bc9fe5bcb55 --- /dev/null +++ b/packages/pictograms/src/svg/fountain--drinking.svg @@ -0,0 +1,25 @@ + + + + + + diff --git a/packages/pictograms/src/svg/library.svg b/packages/pictograms/src/svg/library.svg new file mode 100644 index 000000000000..b0e7eaced578 --- /dev/null +++ b/packages/pictograms/src/svg/library.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/literature.svg b/packages/pictograms/src/svg/literature.svg new file mode 100644 index 000000000000..edeb78d9a729 --- /dev/null +++ b/packages/pictograms/src/svg/literature.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/loop--hearing.svg b/packages/pictograms/src/svg/loop--hearing.svg new file mode 100644 index 000000000000..8b674f3611a9 --- /dev/null +++ b/packages/pictograms/src/svg/loop--hearing.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/scalable.svg b/packages/pictograms/src/svg/scalable.svg new file mode 100644 index 000000000000..1b11ad24bc5c --- /dev/null +++ b/packages/pictograms/src/svg/scalable.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/packages/pictograms/src/svg/silence.svg b/packages/pictograms/src/svg/silence.svg new file mode 100644 index 000000000000..ada9963fc286 --- /dev/null +++ b/packages/pictograms/src/svg/silence.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/packages/pictograms/src/svg/station--hydration.svg b/packages/pictograms/src/svg/station--hydration.svg new file mode 100644 index 000000000000..f2797c965a30 --- /dev/null +++ b/packages/pictograms/src/svg/station--hydration.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/packages/pictograms/src/svg/storage--for-data-and-ai.svg b/packages/pictograms/src/svg/storage--for-data-and-ai.svg new file mode 100644 index 000000000000..283d3df1d93e --- /dev/null +++ b/packages/pictograms/src/svg/storage--for-data-and-ai.svg @@ -0,0 +1,36 @@ + + + + + + diff --git a/packages/pictograms/src/svg/storage--for-resiliency.svg b/packages/pictograms/src/svg/storage--for-resiliency.svg new file mode 100644 index 000000000000..dec941c01131 --- /dev/null +++ b/packages/pictograms/src/svg/storage--for-resiliency.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/packages/pictograms/src/svg/trash--burnable.svg b/packages/pictograms/src/svg/trash--burnable.svg new file mode 100644 index 000000000000..c6d56dd5bdbf --- /dev/null +++ b/packages/pictograms/src/svg/trash--burnable.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/packages/pictograms/src/svg/trash--non-burnable.svg b/packages/pictograms/src/svg/trash--non-burnable.svg new file mode 100644 index 000000000000..bd2f08de8a27 --- /dev/null +++ b/packages/pictograms/src/svg/trash--non-burnable.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/packages/pictograms/src/svg/waste--electronic.svg b/packages/pictograms/src/svg/waste--electronic.svg new file mode 100644 index 000000000000..f3c4714d4124 --- /dev/null +++ b/packages/pictograms/src/svg/waste--electronic.svg @@ -0,0 +1,13 @@ + + + + + + From bca92a4884018c742a766a9fdb572482ec552418 Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Tue, 14 Nov 2023 17:48:29 -0300 Subject: [PATCH 5/6] test: added avt keyboard test (#15164) --- .../FluidTextInput-test.avt.e2e.js | 101 +++++++++++++++++- 1 file changed, 97 insertions(+), 4 deletions(-) diff --git a/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js b/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js index 8551856754bd..c0d3f63136d6 100644 --- a/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js +++ b/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js @@ -19,9 +19,7 @@ test.describe('FluidTextInput @avt', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations( - 'FluidTextInput @avt-default-state' - ); + await expect(page).toHaveNoACViolations('FluidTextInput'); }); test('@avt-advanced-states password input', async ({ page }) => { @@ -32,6 +30,101 @@ test.describe('FluidTextInput @avt', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('FluidTextInput password input'); + await expect(page).toHaveNoACViolations('FluidTextInput-password-input'); + }); + + test('@avt-advanced-states with tooltip', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextInput', + id: 'experimental-unstable-fluidtextinput--default-with-tooltip', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidTextInput-with-tooltip'); + }); + + test('@avt-advanced-states skeleton', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextInput', + id: 'experimental-unstable-fluidtextinput--skeleton', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidTextInput-skeleton'); + }); + + test('@avt-keyboard-nav default', async ({ page }) => { + await visitStory(page, { + component: 'TextInput', + id: 'experimental-unstable-fluidtextinput--default', + globals: { + theme: 'white', + }, + }); + const input = page.getByRole('textbox'); + + // Check the focus + await expect(input).toBeVisible(); + await page.keyboard.press('Tab'); + await expect(input).toBeFocused(); + + // Check input interaction + await input.fill('Text'); + await expect(input).toHaveValue('Text'); + await page.keyboard.press('Backspace'); + await expect(input).toHaveValue('Tex'); + }); + + test('@avt-keyboard-nav with tooltip', async ({ page }) => { + await visitStory(page, { + component: 'TextInput', + id: 'experimental-unstable-fluidtextinput--default-with-tooltip', + globals: { + theme: 'white', + }, + }); + const input = page.getByRole('textbox'); + await expect(input).toBeVisible(); + + // Check tooltip visibility + await page.keyboard.press('Tab'); + await expect(page.getByLabel('Show information')).toBeFocused(); + await page.keyboard.press('Enter'); + await expect( + page.getByText('Additional field information here.') + ).toBeVisible(); + + // Check the focus + await page.keyboard.press('Tab'); + await expect(input).toBeFocused(); + + // Check input interaction + await input.fill('Text'); + await expect(input).toHaveValue('Text'); + await page.keyboard.press('Backspace'); + await expect(input).toHaveValue('Tex'); + }); + + test('@avt-keyboard-nav for password', async ({ page }) => { + await visitStory(page, { + component: 'TextInput', + id: 'experimental-unstable-fluidtextinput--password-input', + globals: { + theme: 'white', + }, + }); + const input = page.getByRole('textbox'); + const span = page.locator('span.cds--assistive-text'); + + await page.keyboard.press('Tab'); + await input.fill('Text'); + + // Checking toggle interaction + await page.keyboard.press('Tab'); + await expect(span).toHaveText('Show password'); + await page.keyboard.press('Enter'); + await expect(span).toHaveText('Hide password'); }); }); From 0c30e68d84bbb0f9ac0ad988b50c4d76db4f4f40 Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Tue, 14 Nov 2023 17:48:51 -0300 Subject: [PATCH 6/6] Add Keyboard Nav AVT test for `FluidSelect` (#15153) * test: added avt keyboard test * chore: fixed date for copyright --- .../FluidSelect/FluidSelect-test.avt.e2e.js | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js b/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js index 7944f5346cfa..4af9b704e0ca 100644 --- a/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js +++ b/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -21,4 +21,46 @@ test.describe('FluidSelect @avt', () => { }); await expect(page).toHaveNoACViolations('FluidSelect @avt-default-state'); }); + + test('@avt-advanced-states skeleton', async ({ page }) => { + await visitStory(page, { + component: 'FluidSelect', + id: 'experimental-unstable-fluidselect--skeleton', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidSelect-skeleton'); + }); + + test('@avt-keyboard-nav FluidSelect', async ({ page }) => { + await visitStory(page, { + component: 'FluidSelect', + id: 'experimental-unstable-fluidselect--default', + globals: { + theme: 'white', + }, + }); + + const select = page.getByRole('combobox').first(); + await expect(select).toBeVisible(); + + // Focus on label additional information + await page.keyboard.press('Tab'); + await expect( + page.getByRole('button', { name: 'Show information' }).first() + ).toBeFocused(); + await page.keyboard.press('Enter'); + await expect( + page.getByText('Additional field information here.').first() + ).toBeVisible(); + + // Tab to Select + await page.keyboard.press('Tab'); + await expect(select).toBeFocused(); + await expect(select).toHaveValue(''); + // Select Option 4 + await select.selectOption('option-4'); + await expect(select).toHaveValue('option-4'); + }); });