Skip to content

3353 ic chip make chips fit to content by default and add full width option #4221

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.

Sign up for GitHub

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

Jump to bottom
Draft
jd3267 wants to merge 5 commits into
base: develop
Choose a base branch
from
Draft

3353 ic chip make chips fit to content by default and add full width option #4221

jd3267 wants to merge 5 commits into from

Conversation

@jd3267
Copy link
Contributor

@jd3267 jd3267 commented Jan 28, 2026

Summary of the changes

Updated ic-chip to fit to content and added a fullwidth prop that can be set to make ic-chip fill container

Related issue

#3353

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.

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.

jd3267 added 5 commits January 28, 2026 16:09
@jd3267
docs(canary-docs): adds fullWidth prop to ic-chip docs
979f066 
adds fullWidth prop to ic-chip canary docs
@jd3267
fix(canary-web-components): adds fullWidth prop to ic-chip
acf1496 
adds fullWidth prop to ic-chip
@jd3267
docs(docs): add fullWidth prop to ic-chip
2b414fb 
update docs to add fullWidth prop to ic-chip
@jd3267
fix(react): update storybook and tests for ic-chip
a30d892 
update storybook and tests for ic-chip to test for chips being in a container and with the fullWidth
prop set
@jd3267
fix(web-components): update ic-chip to fit to content, and add fullWi…
1a34ce1 
…dth prop

update ic chip to set width to content size, up to max of container size. also added fullWidth prop
to allow filling of container
@github-actions
Copy link
Contributor

github-actions bot commented Jan 28, 2026

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3353-ic-chip---make-chips-fit-to-content-by-default-and-add-full-width-option/web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3353-ic-chip---make-chips-fit-to-content-by-default-and-add-full-width-option/react

@github-actions
Copy link
Contributor

github-actions bot commented Jan 28, 2026

View your canary branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3353-ic-chip---make-chips-fit-to-content-by-default-and-add-full-width-option/canary-web-components
View your canary React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3353-ic-chip---make-chips-fit-to-content-by-default-and-add-full-width-option/canary-react

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jd3267