https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/templates-field-group-as-row--docs

Text says: "For more details on how to use this component, see How to implement the compare and select pattern"

Given the substantial number of components now present in the repository, organizing them into groups would enhance accessibility and discoverability. Given that the components are primarily categorized into three types: Field, Layout, and Widget, we propose creating these three as top-level category folders and relocating the components accordingly.

Here is the list of components for each category:

Field

Template

Widget

Does anyone anticipate encountering any difficulties with this restructuring?
NOTE: We have the similar grouping in storybook though!

cc @ricmars @niallriddell

As shown in the image, the Robot AI Typing indicator icon is misaligned.
This is potentially caused due to a style override for svg causing a side effect.

This change seems to be done for the Icon buttons for Send & Reset. Looks like the Icon buttons are not properly used and motivating this custom style override.

The goal is to represent a list of data objects in a Gantt chart along with there dependencies. The objects could be cases or data objects.

Right now the testing is pretty basic and just opens each story and check that no error is reported
We should extend the functionality by added a couple of unit tests for each story using https://storybook.js.org/docs/writing-tests/stories-in-unit-tests

the unit test should switch some of the props and check the outcome - it should leverage the same mock and infrastructure used in the story already.

showing code coverage would be great -

This should be run in the pipeline on every merge - see existing github action

Similar to the Calendar component, I would like to represent a list of cases or data objects in a Kanban view where a status property will be used to group the objects into different columns. Using drag and drop or an action menu, I should be able to move the object from one status to the other.

Goal of this work is to identify a library that is accessible and does not rely only on drag and drop to move the cards inside the board. The UI should be able to take all the available height or support a fixed height. The list of available status will likely need to be passed as parameter

When i configure the Actionable Button, i dont get the option to specify the pzInsKey. When i only specify the flowaction I get the error "Resource not found"

Documentation:

Design time configuration:

Error at runtime:
{
"errorClassification": "Resource not found",
"localizedValue": "The resource cannot be found.",
"errorDetails": [
{
"message": "Error_Case_Not_Found",
"erroneousInputOutputFieldInPage": "",
"erroneousInputOutputIdentifier": "",
"errorClassification": "",
"localizedValue": "Case not found for the given parameter ID",
"messageParameters": []
}
]
}

Issue

Radio button used for selecting a column in compare table does not announce column heading as contextual label.
Assistive technology used: Mac VoiceOver

Steps to reproduce

1. Press tab to focus on first select radio button in compare table.
2. Observe screen reader announcement
3. Screen reader announces
   Select, selected, radio button, 1 of 3
4. Press 'right arrow' and the focus moves to next radio button in column 2. The announcement changes to
   Select, selected, radio button, 2 of 3
5. As obsereved in step 3 and 4, only the Radio button label 'Select' is announced with no context about the column header in the table. This makes it inaccessible and difficult to figure out which item is being selected.

We should fix all the components to support localization.
It is not clear if this functionality is supported OOB and how to perform this task

Would be nice to improve the doc site and showcase

• ability to switch theme - provide different themes OOB like default, dark as well as some industry specific theme like uplus-wss - see https://pegasystems.github.io/uplus-wss
• ability to switch RTL

1. Signature component buttons have customs style override, should we not just use OOTB button style and default padding within the container to avoid buttons touching the container border? (unless it's a design choice)
2. The current design have focus ring bleed issue as shown in attached screenshot below.
   

Please find below issues for Dynamic Hierarchical Form Template.

1. Once we delete option in Check box combo, it is not getting populated again in the auto complete
2. Property message is not displaying on the property.

Step to reproduce for Issue 1:

1. We have imported ConstellationUIGallery:01-01 for using Dynamic Hierarchical Form Template
2. Created a view using Dynamic Hierarchical Form Template
3. Configured all details
4. Once we delete option in Check box combo, it is not getting populated again in the auto complete

Step to reproduce for Issue 2:

1. Setting error message on some property in the tab, message is not getting populated on the proper

Dynamic Hierarchical Form Template Issue.docx

The components should be using the theme and inheriting some of the color from the theme used by the application

The compare table, network diagram are the ones that have a lot of custom styles and should be converted to use the theme

CompareTable component is currently implemented using HTML<table> tags and hardcoded styles for colors, spacing, borders etc, missing HTML5 table semantics causing accessiblity concerns.
examples:

Question:
For the spreadsheet display format we could achieve the UX using OOTB Table component as well. Is there any specific reason to not use OOTB Table, any challenges in particular?

Suggestion:
OOTB Table component supports column renderers and could be used to render Radio buttons within table cells. We can also easily align column data left | center | right as needed. This OOTB component does takes care of proper HTML table semantics along with accessibility.

Here are the screenshots of OOTB Table achieving similar results.

Current implementation

Using OOTB Table

OOTB Table Limitations:

1. It doesn't support table body cells to be rendered as th. It renders every cell as td implicitely.
2. Heading is aligned to left always. Although this can be overridden in Styles if need be.
3. Cannot be used in complex case. i.e. displayFormat = 'financial-report'

@ricmars / @niallriddell Please suggest should we replace the implementation with OOTB Table or fix the current code to use Theme tokens, Table semantics and accessibility guidelines.

While it is possible to achieve some tree list representation using table grouping, this approach requires flattening the data structure and does not guarantee the order of the nesting.

The goal of this component is to be able to take a recursive data page that has embedded list and represent the data in a Tree list view - Ability to support row level action would be great but at a minimum should render pyID as link. Support for column filtering, search can also be considered.

2 places the viewname is hardcode.

the viewname is coming as a prop to the component: detailsViewName so this should be used accordingly.

PS: identified these while working on Gantt compnonent, fixed there as part of this comment

Missing effect dependency: secondaryFieldTypes should be added as dependency. The list is not updating when field types are changed alone.

Redundent check: item.pxObjClass && item.pyID can be removed

HeadingTag should be used "h3" for utility summary lists we are using h3 in other places (Attachments, Stakeholders etc). Consider passing prop headingTag='h3'

Hello,

I'm currently facing a few issues with the package https://www.npmjs.com/package/@pega/custom-dx-components which is used in this repository constellation-ui-gallery.

1. When executing the command npm run promoteWebPack, it uncomments a line in node_modules/@pega/custom-dx-components/src/tasks/bundle/builder/index.js to point to the new webpack.config.js file placed in the project's root path.
   However, when installing or updating an npm package, the whole node_modules directory is refreshed and the changes made by promoteWebPack are lost
   

2. I tried to pass rulesetName, rulesetVersion and dBuild as arguments to npm run publishAll but it didn't work.
   When having a look at the source code of custom-dx-components, I found the condition causing this issue.
   In node_modules/@pega/custom-dx-components/src/tasks/publish-all/index.js, at line 79, there is a condition checking if options.params.length >= 7 but there is only a total of 6 params including the 3 I'm manually passing.
   BTW, there is no reference to options.params[6] in this file, which means checking for a length of 7 is not even accurate.
   
   I then tried to pass a 4th argument (counting as the 7th) but I encountered another issue.
   The whole process started without asking any question but nothing was sent to Pega.
   FYI, when running npm run publishAll and answering questions, the components are sent to Pega and the message "Success : Component successfully created in ruleset Demo:01-01-01" is displayed.
   Again, I started searching in the source code and found this in node_modules/@pega/custom-dx-components/src/tasks/publish-all/index.js
   
   The boolean variable doFetch is then passed as an argument to the function publishComponentToServer which is then calling Pega only if doFetch is true
   
   So, if I pass only 3 arguments like npm run publishAll Demo 01-01-01 N, then I still have to answer the questions if it's a dev build and what is the ruleset name and version.
   And if I pass 4 arguments like npm run publishAll Demo 01-01-01 N dummyText, then I don't have to answer the previous questions but during the task "Publish Component", nothing is sent to Pega.

Please see: https://docs.pega.com/bundle/platform/page/platform/user-experience/troubleshooting-web-embeds.html#ariaid-title7

Noticed the following components may not properly be doing this for all markup emitted:
Calendar (?)
GanttChart (?)
PasswordInput
Scheduler (?)
Shortcuts

(?) main return does use Configuration, but see a few other markup returns which don't

RTL has some issues for a couple of components like the network diagram and the signature capture