feat(Decorator): new component Decorator #4170

paul-balchin-ibm · 2024-01-29T14:02:11Z

Contributes to #4146

Migrating Decorator from Products v1 / Security / Decorator.

v1 references: GitHub, Storybook.

For migration purposes:

New component architecture must meet Products v2's code specifications.
~~The design and behavior of version v2 must match version v1 exactly.~~ Normally this would be true, but there are three variations of the Decorator spread across three repos. Each of them have different designs and behaviours, and after a design review not one of them can be considered "best of class". (See Review legacy Security COMPONENTS for migration #4003 and scroll down to the "Decorator and DataDecorator" to review all variations.)
~~A design update is in progress.~~ Complete.

Old prop	New prop	Change
active	theme	Specify theme as "light" or "dark".
className	className	—
href	href	—
inline	small	Still a `bool`.
midLineTruncation	truncateValue	Specify as "end", "start", or `{...}`
noIcon	hideIcon	Name change.
onClick	onClick	—
onClickValue	onClickValue	—
onContextMenu	onContextMenu	—
score	score	—
scoreDescription	scoreDescription	—
scoreThresholds	scoreThresholds	—
title	valueTitle	Override the default `value` provided to the mouse tooltip.
type	label	Name change.
value	value	—
—	disabled	New state option for button types.
—	onClickLabel	New callback function.
~~fitValue~~	(deprecated)	Is now the default behavior.
~~noBorderRadius~~	(deprecated)	No longer supported.
~~noType~~	(deprecated)	A decorator (i.e. a value "decorated with" an identifier) must show a label in the form of an icon, some text, or both.

What did you change?

This is a new v2 component.

How did you test and verify your work?

Storybook review.
Design update by Cameron Calder and Bridget Ndege.
Design review by Cameron Calder and Bridget Ndege.

…nent-decorator

netlify · 2024-01-29T14:02:37Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`d24ca28`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/65dc96c7be6e3c0008076e1e
😎 Deploy Preview	https://deploy-preview-4170--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…nent-decorator

…-system#4354) Co-authored-by: Matt Gallo <[email protected]>

…gn-system#4361) * chore: custom filter exploration continued * fix(DataGrid): add support for selectrow and nestedrow * chore: custom filter exploration * feat(Datagrid): add multi select option * chore: remove onClearFilters from prop types * chore: revert copyright year * chore: add multi select example to flyout * chore: revert nested/selection changes from branch * chore: update gallery config --------- Co-authored-by: Ratheesh Rajan <[email protected]>

…system#4377) * fix(DataGrid): add support for selectrow and nestedrow * feat(Datagrid): apply latest ai gradients * chore: remove comments * chore: revert nested row changes pulled in accidentally * chore: update snapshot * chore: refactor how row class names are applied * fix: remove extra border --------- Co-authored-by: Ratheesh Rajan <[email protected]>

* feat(useravatar):implementation of name,size props * fix(useravatar): changed story name * fix(useravatar): review changes suggested * fix(useravatar): resolve test-c4p * fix(useravatar): review changes suggested * fix(useravatar): review changes suggested * fix(useravatar): review changes suggested * fix(useravatar): review changes suggested * fix(useravatar): review changes suggested * fix(useravatar): name changes suggested * feat(useravatar): image implementation * fix(useravatar): resolve lint issue * fix(useravatar): resolve check-gallery * fix(useravatar): review changes suggested --------- Co-authored-by: elysia <[email protected]>

…n-system#4339 (carbon-design-system#4346)

- @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected]

- @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected]

…ign-system#4383)

…m#4385)

* build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/UserAvatar Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/WebTerminal Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/TruncatedList Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/prefix-example Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip from 2.0.0 to 2.0.1 Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat: beginning ts changes for APIKeyModal * chore: add custom typings to address broken types from carbon/react * fix: address remaining type issues * chore: refactor pw input import * chore: refactor customStep types

* build(deps): bump ip in /examples/carbon-for-ibm-products/ProductiveCard Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/StatusIcon Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/SidePanel Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/TagSet Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/RemoveModal Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/PageHeader Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/Saving Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/Tearsheet Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps): bump ip in /examples/carbon-for-ibm-products/SearchBar Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](indutny/node-ip@v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore: add chromedriver to resolutions Fixes an issue with changed CDN * chore: remove from resolutions Keep latest chromedriver in yarn.lock

* fix: tearsheet overlay * fix: selector for old overlay --------- Co-authored-by: Matt Gallo <[email protected]>

…bon-design-system#4423) * feat(Datagrid): apply initial column sort functionality * fix: return if not using sortable table

paul-balchin-ibm added 2 commits January 29, 2024 08:57

feat: new component decorator

4422a97

Merge remote-tracking branch 'upstream/main' into feat-4146_new-compo…

a6e2684

…nent-decorator

paul-balchin-ibm added package: security version: 2 Carbon 11 / v2 area: migration ➡️ Migration of Security package to IBM Products labels Jan 29, 2024

paul-balchin-ibm self-assigned this Jan 29, 2024

paul-balchin-ibm requested a review from a team as a code owner January 29, 2024 14:02

elycheea marked this pull request as draft January 29, 2024 16:38

paul-balchin-ibm added 13 commits February 1, 2024 11:50

fix: code and styling updates

a55c35d

fix: merge conflicts

d55d44b

fix: udpate snapshots

7b8a32a

fix: update gallery

de22515

fix: skip some tests (temp)

794c8aa

fix: minor changes

8fa1461

Merge remote-tracking branch 'upstream/main' into feat-4146_new-compo…

50cbc39

…nent-decorator

fix: updated PropTypes

b8755f5

fix: updated tests

700e334

fix: update styling

d1a8749

fix: merge conflicts

30e515d

fix: updated snapshots and galleries

8c6d0a8

fix: storybook update

e84bd2c

paul-balchin-ibm linked an issue Feb 8, 2024 that may be closed by this pull request

New Component: Decorator #4146

Closed

4 tasks

paul-balchin-ibm added 7 commits February 8, 2024 11:37

fix: update code, style, docs

f5c1e92

Merge remote-tracking branch 'upstream/main' into feat-4146_new-compo…

b38cb59

…nent-decorator

fix: design review update

cd2fe8a

fix: merge conflicts

961c525

fix: design review update

ebaae68

fix: merge conflicts

7fbc098

fix: added a11y icon borders

b4f96d8

Ratheeshrajan and others added 23 commits February 26, 2024 08:45

fix(DataGrid): add support for selectrow and nestedrow (carbon-design…

f237a30

…-system#4354) Co-authored-by: Matt Gallo <[email protected]>

feat: sort icon appear in the Actions column on Datagrid carbon-desig…

ccd43bf

…n-system#4339 (carbon-design-system#4346)

chore(release): publish [skip ci]

0142953

- @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected]

fix: move ai gradient to content (carbon-design-system#4381)

1540b89

chore(release): publish [skip ci]

4666df3

- @carbon/[email protected] - @carbon/[email protected] - @carbon/[email protected]

fix: merge conflicts

29c4e5e

fix: update publish config in community package to public (carbon-des…

8667fff

…ign-system#4383)

fix: header border issue introduced with ai slug (carbon-design-syste…

92d9b45

…m#4385)

feat: new component status indicator (carbon-design-system#4419)

d2ac08f

fix: udpate gallery

a16ec60

fix: code review updates

901ea07

fix: code review updates

b897f6a

chore: update chromedriver resolutions (carbon-design-system#4422)

ed084fd

* chore: add chromedriver to resolutions Fixes an issue with changed CDN * chore: remove from resolutions Keep latest chromedriver in yarn.lock

fix: tearsheet overlay (carbon-design-system#4421)

67c4123

* fix: tearsheet overlay * fix: selector for old overlay --------- Co-authored-by: Matt Gallo <[email protected]>

fix: side panel slug and close position (carbon-design-system#4426)

90d07ed

feat(Datagrid): add option to specify an initial sortable column (car…

d9efe0a

…bon-design-system#4423) * feat(Datagrid): apply initial column sort functionality * fix: return if not using sortable table

fix: merge commits

d24ca28

elycheea requested a review from davidmenendez February 26, 2024 14:07

paul-balchin-ibm removed the status: merge conflict ✋ label Feb 26, 2024

davidmenendez approved these changes Feb 26, 2024

View reviewed changes

paul-balchin-ibm added this pull request to the merge queue Feb 26, 2024

Merged via the queue into carbon-design-system:main with commit 9cea98a Feb 26, 2024
12 checks passed

paul-balchin-ibm deleted the feat-4146_new-component-decorator branch February 26, 2024 18:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Decorator): new component Decorator #4170

feat(Decorator): new component Decorator #4170

paul-balchin-ibm commented Jan 29, 2024 •

edited

Loading

netlify bot commented Jan 29, 2024 •

edited

Loading

feat(Decorator): new component Decorator #4170

feat(Decorator): new component Decorator #4170

Conversation

paul-balchin-ibm commented Jan 29, 2024 • edited Loading

What did you change?

How did you test and verify your work?

netlify bot commented Jan 29, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

paul-balchin-ibm commented Jan 29, 2024 •

edited

Loading

netlify bot commented Jan 29, 2024 •

edited

Loading