feat: add variants to icons #355

gabyzif · 2024-08-05T11:15:36Z

Instructions

No need to keep instructions in the final PR description

PR target branch should be against main
PR title prefix should state semantic value for the change, usually feat:, fix: or chore:. Source.
PR branch prefix should state the same as the above with a /, usually feat/, fix/ or chore/. Source.

Summary

The purpose of this PR is adding a variant in the icon component and making a better DX experience on adding the icons.

Design wants to organize the icons in storybook by categories on the future so I thought having an dictorioary of icons would make it easier for this case (or if we need other properties)

I added a documentation in the icons stories where it might be good to have all the steps we need to do when adding one.

I also started working on adding a @deprecated for the names of the icons.

Testing Plan

Was this tested locally? If not, explain why.
{explain how this has been tested, and what, if any, additional testing should be done}

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

Closes https://go.mparticle.com/work/REPLACEME

…ew types

tibuurcio · 2024-08-05T19:09:03Z

General feedback: Summary is telling me the "what" changes but I can get that from looking at the files. I usually use it to understand the "why" we're doing the change. Context that's not on the code.

For instance, summary doesn't say anything about the new way of exporting icons that the PR proposes.

tibuurcio

Nice work, left some suggestions!

src/components/general/Icon/Icon.tsx

src/constants/Icons.ts

src/types/iconTypes.ts

src/components/general/Icon/Icon.tsx

Co-authored-by: Gabriel Tibúrcio <v-gtiburcio@mparticle.com>

# [1.25.0-icons-variant.1](v1.24.0...v1.25.0-icons-variant.1) (2024-08-06) ### Bug Fixes * imports of icons ([9f5ac6c](9f5ac6c)) ### Features * Allow override theme for ConfigProvider ([#354](#354)) ([29cc614](29cc614)) * icon-variants: update premium icon ([d7681d4](d7681d4)) * icons-variant cleanup code ([bf83485](bf83485)) * icons-variant cleanup code ([54dfc77](54dfc77)) * icons-variant: add documentation for icons ([28ffcc9](28ffcc9))

tibuurcio · 2024-08-06T21:15:07Z

src/components/general/Icon/Icon.stories.tsx

+const iconTableDocumentation = `
+### Icon Component Documentation
+
+The \`IconTable\` component is used to display a table of all available icons in the project. 
+
+#### Props
+- \`name\`: The name of the icon 
+- \`color\`: The color of the icon. Available options are \`default\`, \`primary\`, \`success\`, \`warning\`, \`error\`, \`info\`, \`white\`, \`black\`, \`text\`, \`strong\`, \`brand\`.
+- \`size\`: The size of the icon. Available options are \`xxxxl\`, \`xxxl\`, \`xxl\`, \`xl\`, \`lg\`, \`md\`, \`sm\`, \`xs\`.
+- \`variant\`: The variant of the icon. Available options are \`light\` and \`duo-tone\`.
+
+#### Updating Icons
+To update the icons:
+
+1. **Add New Icons**: Add the new icon SVGs to the \`src/constants/Icons\` directory. The icons should be curated by Design and the svg must be minified. 
+2. **Update Icon Constants**: Update the \`Icons\` object in \`src/constants/Icons\` to include the new icons.
+3. **Use Icons**: Use the updated icons in your components by referencing their names.
+
+#### Example Usage
+\`\`\`jsx
+<Icon name="new-icon" size="lg" color="primary" variant="light" />
+\`\`\`
+
+This will render the new icon with the specified size, color, and variant.
+`


Would be nice if we could write markdown in storybook 👀
We could look into it for the Self Service initiative.

ya, it works. this is for the self service intiative too, to document the icon process there

tibuurcio

Mostly good to go, left 2 comments.

src/components/general/Icon/Icon.tsx

src/types/icons.ts

# [1.26.0](v1.25.1...v1.26.0) (2024-08-07) ### Bug Fixes * make the workspace-selector label smaller ([#359](#359)) ([05c4338](05c4338)) * Revert design tokens update ([#361](#361)) ([cd9dbc9](cd9dbc9)) ### Features * add variants to icons ([#355](#355)) ([1112674](1112674))

mparticle-automation · 2024-08-07T20:00:35Z

🎉 This PR is included in version 1.26.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# 1.0.0-fix-semantic-release.1 (2024-10-28) ### Bug Fixes * Design tokens update + icons alignment fix ([#460](#460)) ([9c93165](9c93165)) * a useEffect Hook has been added to detect if the value received … ([#339](#339)) ([0e1ab5d](0e1ab5d)) * active workspace style ([#148](#148)) ([a276806](a276806)) * add current color fill to icon ([#374](#374)) ([12c698c](12c698c)) * add horizontal gap in suite selector ([#391](#391)) ([74a43d0](74a43d0)) * add icons ([#399](#399)) ([3343c26](3343c26)) * add icons for overview map ([#275](#275)) ([a4bb97d](a4bb97d)) * Add Icons in Aquarium ([#395](#395)) ([d554ed5](d554ed5)) * add info icon ([#381](#381)) ([d3aa957](d3aa957)) * add more icon ([#403](#403)) ([3abc3b7](3abc3b7)) * add new icons ([#380](#380)) ([db88c4e](db88c4e)) * add width auto to be able to manage the wdith from the component ([#368](#368)) ([b47c45f](b47c45f)) * button-alligned center ([#287](#287)) ([d8c056d](d8c056d)) * **cascader:** makes cascader use the aquarium configprovider and theme ([21800e2](21800e2)) * correct QueryItem Cascader and Action cosmetic bugs/flaws ([f5e6032](f5e6032)) * correct usage of Typography in Watermark.stories.tsx ([f8b32cb](f8b32cb)) * ensure PostCSS handles CSS unnesting in Vite config ([#457](#457)) ([1978e65](1978e65)) * export notification center props ([#418](#418)) ([2ea78c2](2ea78c2)) * exported types ([#448](#448)) ([a978175](a978175)) * fix broken stories due to typography update ([d64be86](d64be86)) * fix issue on prettifier ([#446](#446)) ([03668b6](03668b6)) * fix QueryItem.ValueSelector.Cascader's selectedDisplayValue type ([e74053d](e74053d)) * fixes path to be / on UPS cookie creation options ([#240](#240)) ([0cebf44](0cebf44)) * hide expand icon in global navigation lists ([#178](#178)) ([edd21db](edd21db)) * hide minimap after user clicks on a button ([#264](#264)) ([21a399c](21a399c)) * icon color not changing on button hover ([#363](#363)) ([aa07067](aa07067)) * Icon component build issue ([d7e2faf](d7e2faf)) * improve workspace selector performace ([#370](#370)) ([590e231](590e231)) * Input now support refs ([#169](#169)) ([20a7e47](20a7e47)) * **input:** wraps Input.Search in Aquarium ConfigProvider ([0fbba18](0fbba18)) * lazy load ValueSelector to fix Storybook test runner ([#298](#298)) ([4cd501b](4cd501b)) * **lint:** fix linting problems ([c343136](c343136)) * make onChange prop of QueryItem InputText optional ([7a1532f](7a1532f)) * make QueryItem Cascader options reactive ([50f11bc](50f11bc)) * make the workspace-selector label smaller ([#359](#359)) ([05c4338](05c4338)) * minor compatibility changes to QueryItem Qualifier and Cascader ([5065bdd](5065bdd)) * minor tweaks to TextInput to make it fully compatible ([be5deab](be5deab)) * nav link target ([#166](#166)) ([092a3aa](092a3aa)) * **NavigationSearch:** swaps Ctrl for Cmd on Macs ([a0b7d63](a0b7d63)) * notification center export z-index ([#422](#422)) ([ce01227](ce01227)) * PR review suggestions ([f1ed504](f1ed504)) * **queryitem:** change Input.Search to Input in Cascader's popover to prevent preact type error ([80b1469](80b1469)) * remove -t patch from sem release ([fa41baa](fa41baa)) * remove \dist files accidentally committed ([ef5a16b](ef5a16b)) * remove circle-dashed.svg, it's a duplicate ([aac4829](aac4829)) * remove hover effect on active state ([#278](#278)) ([9f89fa1](9f89fa1)) * remove LESS syntax from query-item.css ([643402c](643402c)) * rename icons ([#364](#364)) ([223c47d](223c47d)) * Revert design tokens update ([#361](#361)) ([cd9dbc9](cd9dbc9)) * rollback variables/style ([#310](#310)) ([efcaf5c](efcaf5c)) * signout onclick being triggered on render when there are no orgs ([#337](#337)) ([77f2b1a](77f2b1a)) * style build missing custom rules ([#147](#147)) ([3a66b26](3a66b26)) * sub menu links should open the correct herf ([#167](#167)) ([6b52fea](6b52fea)) * **typography:** fix exporting/structure of Typography and its subtypes ([cd097f8](cd097f8)) * unnest css ([#390](#390)) ([03d3ccb](03d3ccb)) * unnesting minimap styles ([#253](#253)) ([067f24d](067f24d)) * update design tokens ([#375](#375)) ([e818591](e818591)) * update empty component ([#371](#371)) ([655e252](655e252)) * update icons that did not obey the color prop ([#445](#445)) ([68006e3](68006e3)) * update more typography stories ([cd3344c](cd3344c)) * update nav link active background color ([#376](#376)) ([3965e60](3965e60)) * update release.config.cjs ([859b3bb](859b3bb)) * update release.config.cjs tag format version ([93ee2ec](93ee2ec)) * update release.yml to test semantic release ([5dcf0a7](5dcf0a7)) * use semantic release token ([7af705c](7af705c)) * use unique tags ([61d7886](61d7886)) * workspace selector positioning ([#338](#338)) ([9561a49](9561a49)) * **workspaceselector:** fix key duplication in the WorkspaceSelector ([2967c68](2967c68)) * **workspaceselector:** fix performance problems by swapping Antd Menu component with native ul ([8a0257b](8a0257b)) * yet more typography corrections ([81fce66](81fce66)) ### Features * add Action QueryItem ([f76ea2b](f76ea2b)) * add datepicker example ([#408](#408)) ([0b4b46b](0b4b46b)) * Add directory icon ([#319](#319)) ([a2b4132](a2b4132)) * add Help Icon ([6bae0ed](6bae0ed)) * Add links to the minimap ([#246](#246)) ([80bd00c](80bd00c)) * add loadData functionality to QueryItem Cascader ([ced4994](ced4994)) * add lock/unlock icons; rename previous lock to paywall ([#340](#340)) ([eaf6998](eaf6998)) * add mp colors to storybook and remove token to css from pre com… ([#405](#405)) ([40dffbf](40dffbf)) * add notification center ([#416](#416)) ([4c44206](4c44206)) * Add notification icon ([#345](#345)) ([2c9d13e](2c9d13e)) * add overview dt icon ([#362](#362)) ([78d7854](78d7854)) * add placeholder to QueryItem's TextInput ([30bde49](30bde49)) * add premiumDt icon ([#346](#346)) ([b3e2817](b3e2817)) * add prettifier ([#404](#404)) ([a99793f](a99793f)) * add QueryItem-related icons ([89fb3b8](89fb3b8)) * add QueryItem.Text component ([8f0b7bd](8f0b7bd)) * Add size prop to `Typography.Text` component ([#262](#262)) ([0c14f00](0c14f00)) * add value props to Qualifier and Cascader ([16042d7](16042d7)) * add variants to icons ([#355](#355)) ([1112674](1112674)) * add workspace label to Workspace Selector ([#323](#323)) ([bdb3c70](bdb3c70)) * Adds stylelint with recommended configs and rules from Indicative ([#82](#82)) ([4dd5380](4dd5380)) * Adds SuitesReminder hook to get a consistent look across platforms for the reminder notification ([#221](#221)) ([533428e](533428e)) * Allow importing types ([#65](#65)) ([7fe8981](7fe8981)) * Allow override theme for ConfigProvider ([#354](#354)) ([29cc614](29cc614)) * Allows publishing npm versions from feature branches ([#186](#186)) ([044c117](044c117)) * Allows publishing on dev branch/distribution channel ([#162](#162)) ([39530fa](39530fa)) * allows UPS to receive cookie config options ([#261](#261)) ([8ab9ce9](8ab9ce9)) * ant design system ([#9](#9)) ([7c0f090](7c0f090)) * ant upgrade to 5.20 ([#421](#421)) ([49b4bf8](49b4bf8)) * components ([#33](#33)) ([78dfb17](78dfb17)) * Exports bundle without libs (React, Antd) and TS types ([#76](#76)) ([5dbb9df](5dbb9df)) * first story with a simple component and directory structure with readmes ([a60b9b8](a60b9b8)) * focus workspace on icon click ([#163](#163)) ([cea91cd](cea91cd)) * global navigation and styling ([#124](#124)) ([7863d9a](7863d9a)) * icons placeholder ([#385](#385)) ([2503af1](2503af1)) * **icons:** export icons from the Aquarium ([dde4db2](dde4db2)) * install vitest unit test runner ([#143](#143)) ([2ad4075](2ad4075)) * intial add of QueryItem.ValueSelector.Cascader ([c022aa2](c022aa2)) * minimap active state ([#263](#263)) ([ae9a2b0](ae9a2b0)) * move minimap to suite logo ([#369](#369)) ([f2d2437](f2d2437)) * new icons ([#239](#239)) ([a1bfb88](a1bfb88)) * New storybook documentation structure ([#419](#419)) ([1a870bc](1a870bc)) * Organize component directories by type ([#16](#16)) ([6ad046d](6ad046d)) * query select number ([#268](#268)) ([13dc864](13dc864)) * **queryitem:** adding onchange and converting error danger zone text ([91e945f](91e945f)) * **queryitem:** adding QueryItem.Qualifier component ([1fe60d8](1fe60d8)) * **queryitem:** updating styles and adding error message to qualifier ([fa8a8da](fa8a8da)) * replace minimap with suiteSelector component ([#383](#383)) ([2ab27ca](2ab27ca)) * rework Cascader OnChange ([a77c44f](a77c44f)) * Storybook Testing ([#42](#42)) ([876c231](876c231)) * Tag component stories ([#68](#68)) ([4831b25](4831b25)) * update design tokens ([#273](#273)) ([ac2b442](ac2b442)) * update SuiteLogo in GlobalNav to render nav switcher Tour ([#367](#367)) ([a3920af](a3920af)) * UPS code ported from Nancy ([#207](#207)) ([cc153af](cc153af)) * wrap radio group and button components ([#282](#282)) ([6e67439](6e67439))

gabyzif changed the title ~~Feat/icons variant~~ feat: add variants to icons Aug 5, 2024

gabyzif marked this pull request as draft August 5, 2024 11:15

gabyzif added 9 commits August 5, 2024 20:50

add variant to icons

3f33e85

add variant to icons

4abd81b

update the logic for adding variants to icons

5e32046

add deprecated icons

7e17fae

add deprecated icons

6c36016

cleanup

04716d4

rollback style

ade8863

create a file for icon types and update the icon component with the n…

0aa4cab

…ew types

remove extra file

7f50e35

gabyzif force-pushed the feat/icons-variant branch from f939ea0 to 7f50e35 Compare August 5, 2024 18:51

feat: icon-variants: update premium icon

d7681d4

gabyzif marked this pull request as ready for review August 5, 2024 18:58

gabyzif requested a review from tibuurcio August 5, 2024 19:00

tibuurcio reviewed Aug 5, 2024

View reviewed changes

src/components/general/Icon/Icon.tsx Outdated Show resolved Hide resolved

gabyzif and others added 12 commits August 5, 2024 21:29

Update src/types/iconTypes.ts

771db1f

Co-authored-by: Gabriel Tibúrcio <v-gtiburcio@mparticle.com>

feat: icons-variant cleanup code

54dfc77

feat: icons-variant cleanup code

bf83485

fix: imports of icons

9f5ac6c

feat: icons-variant: add documentation for icons

28ffcc9

fix: make the workspace-selector label smaller

da9e88b

Merge branch 'main' into feat/icons-variant

0a2ce7f

feat: update icons sparkle

cb57b63

Merge remote-tracking branch 'origin/main'

d8572d8

feat: solve conflicts

1bb1591

feat: merge main into icons

6648b3c

gabyzif added 2 commits August 6, 2024 22:54

feat: merge main into icons branch

4e17c64

feat: merge main into icons branch

55f75f8

tibuurcio reviewed Aug 6, 2024

View reviewed changes

src/components/general/Icon/Icon.tsx Outdated Show resolved Hide resolved

src/types/icons.ts Outdated Show resolved Hide resolved

gabyzif added 3 commits August 6, 2024 23:27

Merge branch 'main' into feat/icons-variant

297cb5e

feat: icon-variants cleanup code

f2eee45

feat: icons remove deprecated comment

1ebae5d

nastyastavitskaya approved these changes Aug 7, 2024

View reviewed changes

gabyzif merged commit 1112674 into main Aug 7, 2024
10 of 11 checks passed

mparticle-automation added the released label Aug 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add variants to icons #355

feat: add variants to icons #355

gabyzif commented Aug 5, 2024 •

edited

Loading

tibuurcio commented Aug 5, 2024 •

edited

Loading

tibuurcio left a comment

tibuurcio Aug 6, 2024 •

edited

Loading

gabyzif Aug 6, 2024 •

edited

Loading

tibuurcio left a comment

mparticle-automation commented Aug 7, 2024

feat: add variants to icons #355

feat: add variants to icons #355

Conversation

gabyzif commented Aug 5, 2024 • edited Loading

Instructions

Summary

Testing Plan

Reference Issue (For mParticle employees only. Ignore if you are an outside contributor)

tibuurcio commented Aug 5, 2024 • edited Loading

tibuurcio left a comment

Choose a reason for hiding this comment

tibuurcio Aug 6, 2024 • edited Loading

Choose a reason for hiding this comment

gabyzif Aug 6, 2024 • edited Loading

Choose a reason for hiding this comment

tibuurcio left a comment

Choose a reason for hiding this comment

mparticle-automation commented Aug 7, 2024

gabyzif commented Aug 5, 2024 •

edited

Loading

tibuurcio commented Aug 5, 2024 •

edited

Loading

tibuurcio Aug 6, 2024 •

edited

Loading

gabyzif Aug 6, 2024 •

edited

Loading