name: [Table] Number of Rows per Page not updated
about: UI Kit - Table

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When the number of rows per page is changed, the amount of rows shown is updated and the value displayed on the dropdown is updated to the selected value.

Current Behavior

When the number of rows per page is changed, the amount of rows shown is updated but the value displayed on the dropdown is kept on the default number (10) rows per page.

Steps to Reproduce

1. Open table
2. Change the number of rows per page
3. Confirm that the number of rows has changed
4. Confirm that the value displayed on the Rows per Page dropdown is unchanged

Context

Your Environment

Banner:

• Check icons
• Check the variants (should it follow the sema naming or the naming in the specs)
• Add prop for setting different colors (sema)
• Check the icon size when the text reach 3 lines
• Check spacings

Breadcrumb:

• Align the border color of dropdown with the specs

Button

• Hitachi mode
• Button icon (check with the design system the min width)

Checkbox/RadioButton

• Add fill when hovering (the icon must be transparent)

Dropdown

• When multiple selections, the text in the dropdown label shouldn't have the word "Selected"
• Width shouldn't be predefine
• Check spacing in the "All" label

Input:

• Input box missing info button
• Input box are using old icons
• Input box now have a red border when failing
• The info text doesn't change color

KPI

• Review spacing

Login

• Login password box is missing show password feature

Snackbar

• Same as banner

Table

• Table All selector is outside the Table
• Table navigation is not reviewed
• Table row changes color when selected
• Table now has a counter of selected icons on top

Text area

• Text area when inactive it doesn't trucated
• Text area should let user write above the limit and turn itself red

Card

• Card buttons are now black

Promote Promote Navigation Anchors pattern present in the Lab to the Core.

Request specs to the design system.

name: [Dropdown] Not all options are shown after filter applied
about: UI Kit - Dropdown

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When opening the dropdown, all options should be shown, independently if they're selected or not.

Current Behavior

Only the results of a previous filter are shown

Steps to Reproduce

1. Open dropdown on example 2 or 4
2. Filter by "value 1"
3. Click the "select all" checkbox
4. Press Apply
5. Open the dropdown
6. Press Cancel
7. Open the dropdown

Context

Your Environment

Make sure the core components work in the several examples we are exposing:

• create-react-app
• nextjs
• vanilla

Describe the bug
Components have several spaces around it making it difficult to use them in generic places where that needs to be configured by the application

Need to review and improve the CONTRIBUTING file in order to better communicate how people should contribute.

Need to review and standardize README files across all packages.

Describe the bug
The selectors component are using SVG which is causing some problems in other environments with the retrieving the resource

The current default behavior for single selection dropdown is that if no element is explicitly selected, the first element of the list will be selected.

This enhancement will allow the user to disable the default selection, supporting use cases where by default no element is selected.

Include the recently added icons in the Design System repository and make them available in two forms, one using React Components, following the Material UI approach.
Also, in the same package, include the raw svg icons.

We want to include this in the build process so in the future we can have DS adding the icons to our code and they would be automatically made available via the build/publish process.

Description:

The objective of this story is to implement the Tooltip Pattern according to: https://xd.adobe.com/view/9f6ffe41-08e8-47cb-71a9-4525c6663acd-e95e/?fullscreen

There is already a version of this pattern in the visualizations, being used by the Bar and Line charts. We want to promote this to a component in the core section and explain how to use it, like we do with all other components.

Accessibility is a point we should take in consideration. So we should use the correct aria attributes.

Material ui offers a tooltip component and the idea is to propagate the charts tooltip styles in the tooltip component, and offer a tooltip component.

Estimation: 5

Acceptance Criteria:

• Deprecate the Popper component from lab
• Promote the Tooltip component to core, taking in consideration the accessibility rules
• Cover the component with automation tests
• Component is themable
• Component works in all browsers

Promote Promote Slider pattern present in the Lab to the Core.

The pattern must follow the latest version of the design system (at this moment version 0.0.6).
Identified changes:

• Align with design system the capability of multi-ranges
• Tooltip fixed
• Label
• Error mensage (align with design system)

Provide examples with a couple of different use cases of including the UI-KIT using:

• create react app
• next-js
• vanilla (minimal setup)

Add documentation in the readme about the provided example

Implemented by @jofigueiredo

We need to add #ui-kit slack channel of hitachi-design workspace to the Contributing section.
This is an alternative slack channel for people outside of hitachivantara-eng workspace.

Is your feature request related to a problem? Please describe.
Implement the Design System pattern for the assets inventory.

Describe your requirements and objective
Implement the Design System pattern for the assets inventory.

Describe the solution you'd like
Have a UI-KIT component to implement the pattern

Describe alternatives you've considered
None

Additional context
None

The desired supported browsers for UI-KIT version 1 is the last version of the following browsers:

• Chrome

• Firefox

• Safari

• Edge

• IE 11

Make a smoke test of the ui kit V1 (core) components in the above described and log bugs to the breaking changes identified. Minimal cosmetic things will not be considered blockers for V1

As per the XD file, when tried to handle the row click of Table getTrProps is not working where the click event can be handled.

Please refer the following link of React-table TanStack/table#467

Promote Promote Form Composer pattern present in the Lab to the Core.
The pattern must follow the latest version of the design system (at this moment version 0.0.6).
Identified changes:

• Change name to Tooltip
• Implement behavior of behaviour relative to cursor
• Check colors and typography

Is your enhancement request related to a problem? Please describe.
Context:

• Simple selection mode
• In the array of labels, the 'select' one is defined (ex: "Select...")
• It is provided a list of values to the component, where none of which is selected

Current behavior:

• No empty selection line (ex: "Select...") is present
• The component automatically selects the first value, and assumes its value

Describe the solution you'd like
Desired behavior:

• There is an empty "Select..." option in the list of values
• The empty selection line is the one selected
• The current value of the component is empty or not defined

Describe alternatives you've considered
None. The current behavior is a limitation for my use case.

Additional context
Justification for the request:
With the current behavior, this component imposes a mandatory selected value, which might not have been consciously chosen by the end user.
It is not possible to have fields/promps of this type with optional filling.

Description:

In the lab section, we have an external contribution with an initial Search Box component. This component is currently duplicated in the context of the dropdown and we want to make sure we use this component instead along with updating it to the core section.
This component should allow:

• list of suggestions configurable with a callback, which should return an array of strings
• list has to be navigable and trigger an onChange once the item is selected
• be implemented with the input, so we do not duplicate logic

These are the specs of the component: https://xd.adobe.com/view/41d6785d-fafc-470e-7a75-c15a5217cc7a-37e7/?fullscreen
The result list specs are in https://xd.adobe.com/view/6a83d2f2-8437-4593-63e0-9fbb94bd4660-1cb2/?fullscreen

The search results in right of the component are not in the scope of this story.

Estimation: 8

Acceptance Criteria:

• Promote and update the component according to the ds guidelines
• Make sure the component follows the WAI accessibility guidelines level A
• Add this component in the core section, but keep the current one in lab marking it as deprecated.

In order to ease the contribution of new components, we should have a generator script to scaffold the initial structure required.

We should have a set of templates for the component (component, index, styles), story and sample files.

The generator should be able to copy these files (renamed with the component name provided) to the required locations:

Component -> packages/lab/src/
Story -> packages/doc/stories/03-lab/.js
Sample -> packages/doc/sample/lab/.js

Is your feature request related to a problem? Please describe.
Implement the Design System pattern for the assets inventory list item.

Describe your requirements and objective
Implement the Design System pattern for the assets inventory list item.

Describe the solution you'd like
Have a UI-KIT component to implement the pattern

Describe alternatives you've considered
None

Additional context
None

Add Lint checks at the code level and commit messge to make sure we can generate changelogs properly

== Header ==
IE - horizontal scrolling are visible (image bellow)
IE+Edge+Firefox - menu options "slightly move" when select/active option is changed (edited)

== Input ==
IE+Edge - Placeholder not styled as described on #24 (comment)
All Browsers - Number validation error keeps visible after input box gets cleaned. First add some wrong content, click outside input box, click inside and press the X button on the right side of the input (image bellow) (edited)

All Browsers - (not sure if it's a bug or desirable behaviour) On the Input event demostration deleting content using backspace has some weird behaviour: (1) if the cursor is at the end of the content, it simply does not delete anything, (2) if the cursor is somewhere at the middle of the content, it deletes the character before and adds a dot to the end of the content. Besides this, adding new content to the middle of the existing one, also adds dots to the end of the content

All Browers - input box with an email validation accepts spaces on the email

== Login ==
All Browsers - Both inputs are labeled "password" instead of the username/password 🤦

== Snackbar ==
IE+Edge+Firefox - Snackbar without icon height is slightly lower than others (with the default minimal of 52px) (edited)

IE - The text is truncated before it was supposed to

== Table ==
IE - Items per page are showing multiple buttons

All Browsers - Items per page option of 5 rows per page is not working (shows 10) on some of the examples. Only 10 or more items per page work properly. (edited)
All Browsers - The Extendable Icon on the left column slightly changes position when changing the column currently sorted (when changing from the first column to any other column)
IE - Selection checkbox not showing the box right margin

All Browsers - On a table with fixed column, when sorting the first non-fixed column, the left border of that column (together with the right column border of the last fixed column) are represented on a double border, and the fixed column border is not continuously draw

Description:
The Date picker is a component already in the uikit, although in the Lab Section.
Since it is one of the components used in the example views we will implement in the future, we want to promote it to core and view its specs: https://xd.adobe.com/view/4b22baff-2c9f-4a83-5cb8-8dc62b75200d-3d13/?fullscreen

Acceptance Criteria:

• Promote component to core
• Component is Themable
• Works in all browsers
• Include the following features:
  • input allowing the date to be written and validated
  • have the buttons to be optional
  • animate the selection of the date
• cover the component functionality with automation tests

Promote Empty States pattern present in the Lab to the Core.
The pattern must follow the latest version of the design system (at this moment version 0.0.61.2.1).

Identified changes:

• Missing action (possible placeholder for component)
• Space between icon and message
• Document styles
• Change typography
• Allow custom node messages

Replace the Typography component from material-ui for a custom made, that receives the variant and links it directly to the theme.

Actions:

• Create component.
• Replace the material-ui typography.
• Delete from react theme the overrides.

Description
The objective of this story is to implement the Asset Inventory Pattern in the ui kit, according to:
https://xd.adobe.com/view/be1aa775-55b2-4e5a-6451-d6ffe388dc14-c82b/?fullscreen
This component should allow the switch between two different views, list and card (or any others defined customizing it), its content to be sorted and custom actions can be applied to a set of selected items (if they are selectable).

This pattern already exists in lab, but we may need to keep it there and mark it as deprecated, informing people to move to the one in core. Same applies to the list view, which we should be able to use. At the same time, we need to promote it to core. The Card view with the responsiveness guidelines can be obtained from the MI code.
This component should use the multi button, dropdown and search components.

This component has two render modes by default as we described above:

• Card: the current card, which each part can be used (Card, CardHeader, CardContent, CardMedia and CardActions)
• List: the component we have to create. It is basically a line in the tabular list view. We will create 4 components:
  • ListItem: containing the selection concept
    • ListContent: a column in the list
    • ListActions: the section of the line where the actions can be added
    • ListMedia: picture

The component will be complex, due to its nature, and we should do an implementation following the same strategy https://github.com/tannerlinsley/react-table (the component we use for our table) uses. This will imply:

• A definition of metadata for the data (a.k.a. columns)
• A definition of the Card to be displayed (since there is no way for us to know the shape of the card, or a default shape)
• A definition of the List to be displayed (since there is no way for us to know the shape of the card, or a default shape)
• For the action list, we will have the concept of selection, which by specifying the actions, will trigger a function per action specified
• All elements can be customized, either by passing their props, by having a different component of disabling it. This will be applied to the search, sort, multi button, pagination.
• Pagination should be supported using client side pagination of server side pagination

The component column (or data element) metadata will need to have:
id: string, headerText: string, accessor : union, format : func, cellType : string, style : instanceOf, fixed : string, searchable: bool, sortable : bool (in the future we may add types)

Questions:

• Can we have responsiveness rules for this component?
• How can the list work with too many columns?
• Does the list view support fixed columns?

Acceptance Criteria:

• Have the asset inventory pattern added as a component
• Cover the component requirements and functionality with automated tests

• https://xd.adobe.com/view/789fb4a6-fac2-4c1c-77ee-010bc08e33c1-0eae/?fullscreen
• http://www.webdetails.pt/ds-demos/loading/

Notes:

• The component doesn't handle progress, it just allows that the label text state to be managed outside
• Small version must have a variant where the color doesn't change with the theme (e.g. when it's used in a primary button that remains with the blue background)
• The overlay is to be included in the implementation
  • Activated when used as a high order component / wrap
  • Not activated when used isolated (e.g. inside a button)
• Lab evaluation:
  • Bug: In Safari the lab component isn't reacting to theme changes (but uses the correct one when first rendering)
  • Only the big version is implemented
  • The label isn't properly aligned
  • No overlay support

Accessibility:

• https://www.w3.org/TR/wai-aria-1.1/#progressbar
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

name: [Table] Table navigation controls not working properly
about: UI Kit - Table

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When using the navigation controls, the current page is changed accordingly

Current Behavior

When using the navigation controls, the behaviour is not correct.
For example, clicking on the next page icon, it changes the current page until a certain number, but not until the total number of pages.

Steps to Reproduce

1. Open table
2. Click on the navigation controls :)

Context

Your Environment

UI kit dropdown component is triggering onChange event during component render by itself.
Usually, onChange should be triggered only when the dropdown option is changed.

But in case of UI Kit drop-down component, onChange event is triggered while creating the UI itself.
This will cause null object reference as nothing will be selected during component creation and as a result, an undefined exception will be thrown as Type Error.

Added sample for Assert Inventory

Promote Promote Footer pattern present in the Lab to the Core.

Request specs to the design system.

Describe the bug
The API for the 'values' property does not support to associate an id to each label. This fact causes problems when having values with equal labels. It is not possible to differentiate which concrete value has been selected.

To Reproduce
Steps to reproduce the behavior:

1. Set the component to be simple selection
2. Provide a list of values with at least 2 equal labels, where the second label is the one with property selected=true
   2.1 Example: Array(4)
0: {label: "Label C1", selected: false}
1: {label: "Label C1", selected: true}
2: {label: "Label C2", selected: false}
3: {label: "Label C3", selected: false}
3. Open the dropdown (at this point the second option is selected)
4. Then select the first option which has the equal label
5. In the onChange event handler, the new selected value received is aparently the same in both selections of the first or the second values
6. The component seems to be stucked on an invalid situation, check the print screens:
   6.1 When opened, it seems to have two values selected, though it's a simple selection component
   6.2 And when closed, it seems not to have any selection ?!?

Expected behavior
The list of values receives both 'id' and 'label' for each value.
The onChange event handler receives the 'Id' of the selected value instead of the 'label'.
The component presents the selected option according to the unique internal 'Id'.
Provides the support needed to have both the concept of internal values (the unique Ids) with an unequivocal meaning to the application, and the concept of a label with a more friendly description of the value to the end user (which can be repeated if the domain in cause requires it)

Screenshots

Enviroment (please complete the following information):

• Device: Laptop
• OS: Windows 10
• Browser chrome
• Version 72.0.3626.121

name: [Table] Rows per page selection lost after table column sorted
about: UI Kit - Table

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When sorting a table column, the number of rows/lines persists

Current Behavior

When sorting a table column, the number of rows/lines returns to the default number, 10.

Steps to Reproduce

1. Open the table example
2. Select 20, 25, 50 or 100 lines per page
3. Sort the table by any column

Context

Your Environment

Describe the bug
Date picker is not showing the default text on firefox
To Reproduce
Steps to reproduce the behavior:

1. Go to open the storybook in firefox
2. Go to Lab tab
3. Select datepicker tab

Expected behavior
The datepicker has a default text in all browsers

Screenshots

Expected Behavior: Should display empty rows with respect to the rows per table.

Conditions:

1. RowsPerTable value is 10.
2. Data count received from API is 2.

• Expected Behavior: Total rows to displayed: 10 [2 rows with data. 8 empty rows.])
• Actual Behavior: When data count is 2, only 2 rows are displayed. Remaining 8 empty rows are not displayed.

What is the issue?

Page alignment is improper.

1. "NO DATA" text is displayed over the Pagination action buttons of the table.
2. Device List Page footer is also misaligned.
3. When table has no data, the table will disappear.

When you meet the issue.

When API returns has no data, then table should display empty rows as per the rowsPerPage table setting. But, as per the current UI-KIT behavior no rows are displayed, just the “NO DATA“ text is displayed.

Rename list item to list view, following the naming of the pattern. Add to the storybook and examples.

name: [Input] Numeric validation accepts spaces
about: UI Kit - Input

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Numeric validation on Input box should only allow numbers

Current Behavior

Spaces are considered as valid content.

Steps to Reproduce

On the "Limited numeric input" or "Required limited numeric input" examples, insert spaces or spaces followed by numbers.

Context

Your Environment

Description
The objective of this story is to have a Form component in uikit. This component already has an initial version of it, called Form Composer present in the Lab.
The pattern must follow the latest version of the design system.

Once this component is there, we should add examples of it to mimic the existing forms in the login, the Login and recovery forms. Login component should also be rebuild using this new form component after this story is completed.

Key points:

• Navigation should be optional
• Check the form implementation from material ui, including all their composition components:
  • https://material-ui.com/api/form-control/
  • https://material-ui.com/api/form-control-label/
  • https://material-ui.com/api/form-group/
  • https://material-ui.com/api/form-helper-text/
  • https://material-ui.com/api/form-label/

Questions

• This component is missing from the pattern library?

Acceptance Criteria:

• Have the component available in the uikit as a component(s)
• Have its functionalities covered with automation tests

Pattern: https://hitachivantara.sharepoint.com/sites/DesignSystem/SiteAssets/Pattern%20Library/[HV_Library%202018Oct24]%20Tabs_Definition_V003.pdf

Define and review the component APIs having a consistency across all the components we ship in V1.

Things like value/onChange for components with parameters, make sure they are controlled components, etc.
Check the css styles and the APIs exposed by it via the withStyles.
If a component requires more work to make this possible please avoid doing it here. The objective here is do the minimal API review and not refactor the components.

• every pop-up should have an "open" property and should be required
• every pop-up should have an "onClose" function property and should be required
• banner message should be limited to be only a string
• move the main.js to the root and alter the name to the name of the component
• the card component props should not begin with Caps
• onChange -state, onClick-no state is the only accepted naming scheme do
• should display string have a default using english as default language? do