antd
A package containing wrapped components and utilities for using ant.design in Hub.
All components (and helpers use if there is one) can be seen in the Storybook.
#
Installation
@iqmetrix/antd
exports all components fromantd
. Some of these components have been extended to support our Design System. You do not need to install the publicantd
package separately.
#
Usage#
CSS@iqmetrix/antd
exports a CSS file that will theme antd
to match Hub. It also exports an accessibility.css
with a different color scheme made for better accessibility.
#
Using it in the App.css#
Using it in the App.tsx#
ComponentsYou can import any antd component
from @iqmetrix/antd
. If there is a custom implementation of it for iQmetrix, you will get the custom one.
es
folders#
Importanting from and If you need to import an interface, you can do it from the lib
folder.
#
Helpers@iqmetrix/antd
also exports JS helpers (built in typescript) to facilitate the use of some antd
components in Hub.
#
BadgeStylesUsing it with Accessibility Schema
#
TableHelpers#
Updating from version 1.x to version 4.xNote: We have decided to match major versions with
antd
to document the package version.
Remove from your packages.json the following packages
- antd
- @iqmetrix/alert
- @iqmetrix/result
Update all the imports from these previously removed packaged to import from
@iqmetrix/antd
.Update
@iqmetrix/antd
to use the latest released versionAddress the
Icon
breaking changes by importing the SVG icon from@iqmetrix/antd
instead of using<Icon />
. You can find the list of icons in the Antd Design icons website.- Before
- Now
Address the breaking changes that apply to your project from the V3 to V4 antd guide.
- when you see in the guide to import from
antd
replace it on your project by@iqmetrix/antd
.
- when you see in the guide to import from
#
Result ComponentThe following exports from @iqmetrix/result
had the name changed and you need to update your code to have the right import from @iqmetrix/antd
:
ResultIQPStatusType
-->ResultStatusErrorType
IResultIQProps
-->ResultProps
Errors
-->ResultErrors