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 from antd. Some of these components have been extended to support our Design System. You do not need to install the public antd package separately.

npm install @iqmetrix/antd

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#

@import "~@iqmetrix/antd/dist/antd.css";

/* or */

@import "~@iqmetrix/antd/dist/accessibility.css";

Using it in the App.tsx#

import `@iqmetrix/antd/dist/antd.css`;

// or

import `@iqmetrix/antd/dist/accessibility.css`;

Components#

You can import any antd component from @iqmetrix/antd. If there is a custom implementation of it for iQmetrix, you will get the custom one.

import { Alert, Card, Result, Form } from `@iqmetrix/antd`;

Importanting from and `es` folders#

If you need to import an interface, you can do it from the lib folder.

import { AbstractCheckboxProps } from `@iqmetrix/antd/lib/checkbox`;

Helpers#

@iqmetrix/antd also exports JS helpers (built in typescript) to facilitate the use of some antd components in Hub.

BadgeStyles#

import { Badge, BadgeStyles } from "@iqmetrix/antd";
// ...

<Badge count="Success" style={BadgeStyles.Success} />
<Badge count="Error" style={BadgeStyles.Error} />

Using it with Accessibility Schema

import { Badge, BadgeStylesAccessible } from "@iqmetrix/antd";
// ...

<Badge count="Success" style={BadgeStylesAccessible.Success} />
<Badge count="Error" style={BadgeStylesAccessible.Error} />

TableHelpers#

import { Table, TableHelpers } from "@iqmetrix/antd";
// ...

<Table
  columns={columns}
  dataSource={editableData}
  bordered
  rowClassName={() => "editable-row"}
  components={{
    body: {
      row: EditableTable.EditableRow,
      cell: EditableTable.EditableCell,
    },
  }}
/>;

Updating from version 1.x to version 4.x#

Note: 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 version
npm i @iqmetrix/antd@4
Address 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
import { Icon } from "antd";

export default () => (
<p>
<Icon type="right" /> My text
</p>
);
- Now
import { RightOutlined } from "@iqmetrix/antd/icons";

export default () => (
<p>
<RightOutlined /> My text
</p>
);
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.

Result Component#

The 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