Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add onclick to action element #2957

Open
wants to merge 23 commits into
base: develop
Choose a base branch
from

Conversation

am26090
Copy link

@am26090 am26090 commented Dec 27, 2024

Summary of the changes

In the data table on the data prop, where the action element is added, i have added an on click to the actionElement, with a ternary to only use click when a prop is passed.

Related issue

2943

Checklist

General

  • Changes to docs package checked and committed.
  • All acceptance criteria reviewed and met.

Testing

  • Relevant unit tests and visual regression tests added.
  • Visual testing against Figma component specification completed.
  • Playground stories in React Storybook up to date, with any prop changes and additions addressed.
  • Compare performance of modified components against develop using Performance addon in React Storybook.

Accessibility

  • Accessibility Insights FastPass performed.
  • A11y unit test added and yields no issues.
  • A11y plug-in on Storybook yields no issues.
  • Manual screen reader testing performed using NVDA and VoiceOver.
  • Manual keyboard testing for keyboard controls and logical focus order.
  • Correct roles used and ARIA attributes used correctly where required.
  • Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

  • Page can be zoomed to 400% with no loss of content.
  • Screen magnifier used with no issues.
  • Text resized to 200% with no loss of content.
  • Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

  • Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
  • Windows High Contrast mode tested with no loss of content.
  • System light and dark mode tested with no loss of content.
  • Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

  • Min/max content examples tested with no loss of content or overflow.
  • All prop combinations work without issue.
  • Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
  • Controlled and uncontrolled input components tested.
  • Props/slots can be updated after initial render.

GCHQ-Developer-112 and others added 15 commits December 18, 2024 13:41
fix(fonts): update @ukic/fonts version to fix failing release
add a new dismissLabel prop which allows the user to change the text of the label on the dismiss
button

feat mi6#2839
Add prop to customise tooltip label for chip. Add Cypress test and stories

. mi6#2839
…agination-bar-items-per-page-prop

Prevent duplication of pagination bar items per page dropdown items
…p-text

feat(web-components): [ic-chip] add prop to customise tooltip text
adds test for action element in data-table
…-data-table cell

Allow specifying target and rel attribute for the anchor tag in the cell, along with the href.
There are existing styles that add a new window icon to the link when the target is "_blank"
and so no change is required to achieve that.

Ref: mi6#2751
… to include new target key

This change also removes the incorrect keys from the example code that seem to have been left over
from a copy and paste from a different example.

Closes: mi6#2751
feat(canary-web-components): allow specifying target for anchor in ic-data-table cell
…-test

test(canary-react): adds visual test for action elements
@CLAassistant
Copy link

CLAassistant commented Dec 27, 2024

CLA assistant check
All committers have signed the CLA.

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome 👋

Welcome to the ic-ui-kit repo, thank you for submitting a pull request!

How to contribute

Please read our CONTRIBUTING.md, which explains our ways of working and guidelines for contributions.

Code of Conduct

We'd appreciate it if you could read and abide by our Code of Conduct, as we wish to foster an inclusive and respectful community.

Targeting your pull request

We use develop rather than main as the base for contributions - please make sure your PR is targeting develop.

Signing the CLA

We require all contributors to sign our Contributor License Agreement (CLA) before we can accept a contribution. If you are contributing on behalf of an organization please follow your organization's policies in signing CLAs.

Associated issue

Please make sure that your pull request has an issue open - this allows us to keep track of changes made and offer support where needed.

@MI6-255
Copy link
Contributor

MI6-255 commented Dec 30, 2024

Thanks for your contribution, you just need to run prettier to fix the broken GitHub checks, then a member of the team will take a look.

@am26090
Copy link
Author

am26090 commented Dec 30, 2024

Thanks for your contribution, you just need to run prettier to fix the broken GitHub checks, then a member of the team will take a look.

Should be all sorted now. Thanks

Copy link
Contributor

@ad9242 ad9242 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good to add some documentation about the actionElement and actionOnClick. This would make it much clearer for users as at the moment you have to look into the code or examples to discover that this functionality exists.

Maybe just expand the Action Element story (ideally in both canary-web-components & canary-react) to add more info describing the functionality (and maybe why users might want to go with this approach rather than using slotted elements)

Copy link
Contributor

@ad9242 ad9242 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please can you also add the sample code to the canary-web-components Action Element story (like other stories above it in the file)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants