refactor: change Option UI component from fluent to ant design

[andyhuang18]

Brief Information

This pull request is in the type of (more info about types):

• build
• ci
• docs
• feat
• fix
• perf
• refactor
• test

Related issues (all available keywords):

• resolve [Refactor] refactor the Options page with antd  #725

Details

The previous project used fluent components, and I have replaced the Checkbox, Link, ChoiceGroup, and IChoiceGroupOption components with the corresponding components of antdesign. Can @wj23027 continue to revise the reconstruction of Stack components?

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA

Others

[andyhuang18]

Hi @wj23027 . You can replace the Stack component with the layout component in antdesign. You can refer to Flex and Grid. It should be noted that the content of Option.css may need to be adjusted.

[wxharry]

Do we want the colorful calendar feature in this pr?

[andyhuang18]

I found that the new branch I cut on the previous calendar branch resulted in this unrelated commit. I will try to modify it, sorry!

[wxharry]

I found that the new branch I cut on the previous calendar branch resulted in this unrelated commit. I will try to modify it, sorry!

No worries!

[wxharry]

Do you think it would be better if we use antd's Button with 'link' to replace , it would be easier to control its style and behavior. Something like this:

<Button type="text">Text</Button>

[andyhuang18]

I feel like it might be more appropriate to keep the link as is?

[wxharry]

Nice work! Can we also replace the button with the antd Button in the src/pages/Popup/Popup.tsx? I have made that changes in this pr, so it should be an easy fix.

[andyhuang18]

Nice work! Can we also replace the button with the antd Button in the src/pages/Popup/Popup.tsx? I have made that changes in this pr, so it should be an easy fix.

Sure! I will fix this issue.

[wxharry]

Thanks for the contribution! This is branch is so close to get merged. Please take a look if we can remove importing @fluentui/react/lib/Icons in src/pages/Options/index.jsx. If so, remove it and remove fluentui related in package.json

[andyhuang18]

It can be said that all fluentui dependencies have been deleted. I would like to ask an additional question here. I found that there are still a large number of fluentui dependencies in yarn.lock. Do I need to delete yarn.lock and re-execute yarn install to generate a new yarn.lock?

[andyhuang18]

I found that the TooltipTrigger component also depends on fluent ui, and this part also needs to be refactored.

[andyhuang18]

Hi @wxharry , I have refactored all components related to fluent ui into antdesign, and now they can be merged into the main branch. @wangyantong2000 can also be developed based on the newly modified tooltip

[tyn1998]

LGTM, thank you so much @andyhuang18 !