Skip to content

Commit 68c7695

Browse files
Arifulislam5577Arifulislam5577
authored
ClassName Props added (#63)
* Fixed: Fixed all the spelling mistake * Added: Alert and Accordion className Props * Added: Avatar and Avatar group className Props * Added: Badge className props added * Added: Breadcrumb ClassName props added * Added: Button and Button group className props added * Added: className Props in card * Added: Carousel className props added * Added: Checkbox and checkbox group className props added * Fixed: DatePicker Refector * Added: Areachart props added * Added: className props added in rest of the component * Fixed: Npm Error Fixed
1 parent b45df4b commit 68c7695

File tree

166 files changed

+1964
-1674
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

166 files changed

+1964
-1674
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"css.customData": [".vscode/tailwind.json"],
3-
"css.lint.unknownAtRules": "ignore"
3+
"css.lint.unknownAtRules": "ignore",
4+
"cSpell.words": ["datepicker"]
45
}

‎app/docs.css‎

Lines changed: 0 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -77,133 +77,3 @@
7777
.tabActive {
7878
@apply border-b-metal-900 !text-metal-900;
7979
}
80-
81-
/* Search */
82-
83-
.DocSearch .DocSearch-Modal {
84-
@apply fixed left-0 right-0 mx-auto mt-4 max-h-[calc(100vh-5rem)] w-full max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl md:static lg:mt-[4rem] lg:max-h-none lg:max-w-xl;
85-
}
86-
87-
.DocSearch.DocSearch-Button {
88-
@apply m-0 h-0 bg-transparent p-0 hover:ring-0 lg:h-11 lg:w-64 lg:rounded-md lg:bg-primary-25 lg:px-3 lg:py-[3px] lg:hover:bg-primary-50;
89-
}
90-
91-
.DocSearch .DocSearch-Button-Placeholder {
92-
@apply text-metal-500 text-body-4 font-normal;
93-
}
94-
95-
.DocSearch .DocSearch-Search-Icon {
96-
@apply h-5 w-5 text-transparent md:mr-1 lg:h-4 lg:w-4 !important;
97-
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236A7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
98-
}
99-
100-
.dark .DocSearch .DocSearch-Search-Icon {
101-
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%239BA3AF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
102-
}
103-
104-
.DocSearch .DocSearch-Button-Keys {
105-
@apply hidden;
106-
}
107-
108-
.DocSearch .DocSearch-Button-Key:first-child {
109-
@apply mr-px text-body-4;
110-
}
111-
112-
.DocSearch .DocSearch-Button-Key {
113-
@apply text-metal-500 m-0 w-auto bg-none pb-0 pt-1 text-body-6 font-normal shadow-none;
114-
}
115-
116-
.DocSearch.DocSearch-Button .DocSearch-Search-Icon {
117-
@apply text-metal-500;
118-
}
119-
120-
.DocSearch .DocSearch-Hit-icon {
121-
@apply hidden;
122-
}
123-
124-
.DocSearch .DocSearch-Hits mark {
125-
@apply text-metal-600 decoration-cyan-600 decoration-2 underline-offset-2;
126-
}
127-
128-
.DocSearch .DocSearch-Hit[aria-selected='true'] a {
129-
@apply bg-cyan-700;
130-
}
131-
132-
.DocSearch .DocSearch-Hit-source {
133-
@apply bg-white pb-1 text-gray-700;
134-
}
135-
136-
.DocSearch.DocSearch-Container {
137-
@apply fixed left-0 top-0 z-[200] min-h-screen max-w-[100vw] bg-gray-900 bg-opacity-50;
138-
}
139-
140-
.DocSearch .DocSearch-Modal {
141-
@apply shadow-none;
142-
}
143-
144-
.DocSearch .DocSearch-SearchBar {
145-
@apply border-metal-100 border-b p-0;
146-
}
147-
148-
.DocSearch .DocSearch-Form {
149-
@apply shadow-none;
150-
}
151-
152-
.DocSearch .DocSearch-Input {
153-
@apply text-metal-500 text-body-5 shadow-none focus:shadow-none focus:outline-none focus:ring-0;
154-
}
155-
156-
.DocSearch .DocSearch-LoadingIndicator svg,
157-
.DocSearch .DocSearch-MagnifierLabel svg {
158-
@apply h-4 w-4;
159-
}
160-
161-
.DocSearch .DocSearch-Commands {
162-
@apply hidden;
163-
}
164-
165-
.DocSearch .DocSearch-Footer {
166-
@apply border-metal-100 h-12 border-t shadow-none;
167-
}
168-
169-
.DocSearch .DocSearch-Dropdown {
170-
@apply bg-white;
171-
}
172-
173-
.DocSearch .DocSearch-Hit {
174-
@apply pb-2 shadow-none;
175-
}
176-
177-
.DocSearch .DocSearch-Hit a {
178-
@apply !bg-metal-100 rounded-md shadow-none;
179-
}
180-
.DocSearch .DocSearch-Hit[aria-selected='true'] a {
181-
@apply !bg-metal-900 rounded-md shadow-none;
182-
}
183-
.DocSearch .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon,
184-
.DocSearch .DocSearch-Hit-action-button {
185-
@apply hidden;
186-
}
187-
188-
.DocSearch .DocSearch-Hit .DocSearch-Hit-action:last-child {
189-
@apply h-5 w-5;
190-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
191-
}
192-
193-
.DocSearch .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action:last-child {
194-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
195-
}
196-
197-
.DocSearch .DocSearch-Screen-Icon,
198-
.DocSearch .DocSearch-NoResults-Prefill-List,
199-
.DocSearch .DocSearch-Cancel {
200-
@apply hidden;
201-
}
202-
203-
.DocSearch .DocSearch-Title {
204-
@apply text-metal-700 mb-1 text-body-3 font-normal;
205-
}
206-
207-
.DocSearch .DocSearch-Reset {
208-
@apply hover:text-black;
209-
}

‎app/docs/components/alert/alertApi.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,25 @@ export const alertApiData = [
6262
propsType: ['left', 'right', 'top', 'bottom'],
6363
default: 'left',
6464
},
65+
{
66+
id: 10,
67+
propsName: 'className',
68+
propsDescription: 'Injects the class name',
69+
propsType: 'string',
70+
default: 'None',
71+
},
72+
{
73+
id: 11,
74+
propsName: 'titleStyle',
75+
propsDescription: 'Injects the class name in title',
76+
propsType: 'string',
77+
default: 'None',
78+
},
79+
{
80+
id: 12,
81+
propsName: 'iconStyle',
82+
propsDescription: 'Injects the class name in icon',
83+
propsType: 'string',
84+
default: 'None',
85+
},
6586
]

‎app/docs/components/areaChart/AreaChartApi.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,32 @@ export const areaChartAPIData = [
6969
propsDescription: 'Array of data points used to populate the chart.',
7070
default: 'Array',
7171
},
72+
{
73+
id: 11,
74+
propsName: 'chartColor',
75+
propsType: 'string',
76+
propsDescription: 'Color for the main chart.',
77+
default: '#1B4DFF',
78+
},
79+
{
80+
id: 12,
81+
propsName: 'secondaryChartColor',
82+
propsType: 'string',
83+
propsDescription: 'Color for the secondary chart',
84+
default: '#1B4DFF',
85+
},
86+
{
87+
id: 13,
88+
propsName: 'areaStoke',
89+
propsType: 'string',
90+
propsDescription: 'Color for the area stroke of the chart.',
91+
default: '#1B4DFF',
92+
},
93+
{
94+
id: 14,
95+
propsName: 'secondaryAreaStoke',
96+
propsType: 'string',
97+
propsDescription: 'Color for the secondary area stroke',
98+
default: '#94ABFF',
99+
},
72100
]

‎app/docs/components/avatar/avatarApi.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,18 @@ export const avatarApiData = [
6969
propsDescription: 'Total number of notifications',
7070
default: '99',
7171
},
72+
{
73+
id: 12,
74+
propsName: 'className',
75+
propsType: 'string',
76+
propsDescription: 'Injects the class name in avatar',
77+
default: 'None',
78+
},
79+
{
80+
id: 13,
81+
propsName: 'statusStyle',
82+
propsType: 'string',
83+
propsDescription: 'Injects the class name in avatar status',
84+
default: 'None',
85+
},
7286
]

‎app/docs/components/badge/badgeApi.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,20 @@ export const badgeApiData = [
4848
propsDescription: 'Custom CSS class to be added to the badge.',
4949
default: 'None',
5050
},
51+
{
52+
id: 12,
53+
propsName: 'dotStyle',
54+
propsType: 'string',
55+
propsDescription: 'Custom style to be added to the badge.',
56+
default: 'None',
57+
},
58+
{
59+
id: 13,
60+
propsName: 'iconStyle',
61+
propsType: 'string',
62+
propsDescription: 'Custom style to be added to the badge icon.',
63+
default: 'None',
64+
},
5165
{
5266
id: 8,
5367
propsName: 'size',

‎app/docs/components/breadcrumb/breadcrumbApi.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,20 @@ export const breadcrumbApiData = [
1313
propsDescription: 'Add a border around the breadcrumb container.',
1414
default: 'false',
1515
},
16+
{
17+
id: 3,
18+
propsName: 'className',
19+
propsType: 'string',
20+
propsDescription: 'Custom class to be added to the breadcrumb.',
21+
default: 'None',
22+
},
23+
{
24+
id: 4,
25+
propsName: 'listStyle',
26+
propsType: 'string',
27+
propsDescription: 'Custom class to be added to the breadcrumb list wrapper.',
28+
default: 'None',
29+
},
1630
]
1731

1832
export const breadcrumbItemApiData = [
@@ -44,4 +58,11 @@ export const breadcrumbItemApiData = [
4458
propsDescription: 'Disables the breadcrumb, making it uncheckable.',
4559
default: 'false',
4660
},
61+
{
62+
id: 5,
63+
propsName: 'className',
64+
propsType: 'string',
65+
propsDescription: 'Custom class to be added to the breadcrumb item wrapper.',
66+
default: 'None',
67+
},
4768
]

‎app/docs/components/button/buttonApi.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,20 @@ export const buttonApiData = [
6565
},
6666
{
6767
id: 11,
68-
propsName: 'customClass',
68+
propsName: 'className',
6969
propsType: 'string',
7070
propsDescription: 'Custom CSS class to be added to the button.',
7171
default: 'None',
7272
},
7373
{
7474
id: 12,
75+
propsName: 'notificationLabelStyle',
76+
propsType: 'string',
77+
propsDescription: 'notification Label Style',
78+
default: 'None',
79+
},
80+
{
81+
id: 13,
7582
propsName: 'onClick',
7683
propsType: '() => void',
7784
propsDescription: 'Function to be called when the button is clicked.',

‎app/docs/components/card/cardApi.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,11 @@ export const cardAPIData = [
4848
propsDescription: "Size of the card's background image.",
4949
default: 'lg',
5050
},
51+
{
52+
id: 8,
53+
propsName: 'className',
54+
propsType: 'string',
55+
propsDescription: 'Custom class to be added to the card.',
56+
default: 'None',
57+
},
5158
]

‎app/docs/components/card/variant/CardWithIcon.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const CardWithIcon = () => {
88
{/* ===CARD ONE=== */}
99
<Card className="max-w-xl p-6">
1010
<Card.Container className="flex items-start gap-3.5 md:gap-5">
11-
<Card.Container className="bg-metal-50 flex items-center justify-center rounded-full p-2.5 md:p-4">
11+
<Card.Container className="flex items-center justify-center rounded-full bg-metal-50 p-2.5 md:p-4">
1212
<ArchiveTray size={28} color="#3D4A5C" />
1313
</Card.Container>
1414
<Card.Container className="flex flex-col gap-2">
@@ -27,7 +27,7 @@ const CardWithIcon = () => {
2727
<Card className="max-w-xl p-6">
2828
<Card.Container className="flex gap-5">
2929
<Card.Container className="flex items-start gap-5">
30-
<Card.Container className="bg-metal-50 flex items-center justify-start rounded-full p-2.5 md:p-4">
30+
<Card.Container className="flex items-center justify-start rounded-full bg-metal-50 p-2.5 md:p-4">
3131
<ArchiveTray size={28} color="#3D4A5C" />
3232
</Card.Container>
3333
<Card.Container className="flex flex-col gap-2">
@@ -40,9 +40,9 @@ const CardWithIcon = () => {
4040
</Card.Container>
4141
<Card.Container className="hidden items-start md:flex">
4242
<Popover
43-
customClass="!w-[20rem]"
43+
className="!w-[20rem]"
4444
additionalContent={
45-
<h2 className="text-metal-500 text-body-3 font-medium leading-6 tracking-[-0.3px]">
45+
<h2 className="text-body-3 font-medium leading-6 tracking-[-0.3px] text-metal-500">
4646
Keep Design System
4747
</h2>
4848
}>
@@ -123,7 +123,7 @@ export const CardComponent = () => {
123123
</Card.Container>
124124
<Card.Container className="hidden items-start md:flex">
125125
<Popover
126-
customClass="!w-[20rem]"
126+
className="!w-[20rem]"
127127
additionalContent={
128128
<h2 className="text-body-3 leading-6 tracking-[-0.3px] font-medium text-metal-500">
129129
Keep Design System
@@ -151,10 +151,10 @@ export const CardComponent = () => {
151151
</Card.Description>
152152
</Card.Container>
153153
<Card.Container className="mt-3 flex items-center justify-center">
154-
<Button type="outlinePrimary" customClass="!hidden md:!block">
154+
<Button type="outlinePrimary" className="!hidden md:!block">
155155
Learn More
156156
</Button>
157-
<Button type="outlinePrimary" size="sm" customClass="md:hidden block">
157+
<Button type="outlinePrimary" size="sm" className="md:hidden block">
158158
Learn More
159159
</Button>
160160
</Card.Container>

0 commit comments

Comments
 (0)