Skip to content

Commit 5036d11

Browse files
vinitkhandal717vinitkhandal717
authored
Add Data-ids calendar table sidebar and update component(card, table, calendar) (#519)
* feat: add data ids for table sidebar and calendar * feat: enhance CalendarGrid with scroll position management and data attributes * feat: add data attributes to Card, DataTable, and SplitTag components * feat: implement server-side pagination handling in DataTable component * feat: enhance pagination and layout handling for server-side mode * feat: add maxHeight prop to Card component for improved layout control
1 parent e95fca7 commit 5036d11

File tree

22 files changed

+629
-75
lines changed

22 files changed

+629
-75
lines changed

‎apps/site/src/demos/CardDemo.tsx‎

Lines changed: 279 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1086,6 +1086,284 @@ const CardDemo = () => {
10861086
</div>
10871087
</div>
10881088

1089+
{/* Scrollable Card Examples */}
1090+
<div>
1091+
<h2
1092+
style={{
1093+
fontSize: '20px',
1094+
fontWeight: '600',
1095+
marginBottom: '16px',
1096+
}}
1097+
>
1098+
Scrollable Card Examples
1099+
</h2>
1100+
<p
1101+
style={{
1102+
color: '#666',
1103+
fontSize: '14px',
1104+
marginBottom: '20px',
1105+
}}
1106+
>
1107+
Cards with <code>maxHeight</code> automatically become
1108+
scrollable when content overflows. Scrollbars are hidden for
1109+
a clean look but content remains fully accessible.
1110+
<br />• <strong>Hidden Scrollbars:</strong> Clean appearance
1111+
with full scroll functionality
1112+
<br />• <strong>Smooth Scrolling:</strong> Enhanced user
1113+
experience with smooth scroll behavior
1114+
<br />• <strong>Touch Support:</strong> Optimized for mobile
1115+
and touch devices
1116+
</p>
1117+
1118+
<div
1119+
style={{
1120+
display: 'grid',
1121+
gridTemplateColumns:
1122+
'repeat(auto-fit, minmax(320px, 1fr))',
1123+
gap: '20px',
1124+
marginBottom: '32px',
1125+
}}
1126+
>
1127+
{/* Default Card with Scroll */}
1128+
<Card
1129+
maxHeight="300px"
1130+
headerSlot1={iconSlot}
1131+
headerTitle="Scrollable Default Card"
1132+
headerTag={
1133+
<Tag
1134+
text="Scrollable"
1135+
variant={TagVariant.ATTENTIVE}
1136+
color={TagColor.WARNING}
1137+
size={TagSize.SM}
1138+
/>
1139+
}
1140+
headerSlot2={
1141+
<Button
1142+
buttonType={ButtonType.SECONDARY}
1143+
size={ButtonSize.SMALL}
1144+
leadingIcon={<Settings size={16} />}
1145+
/>
1146+
}
1147+
subHeader="This card has maxHeight=300px and will scroll when content overflows"
1148+
bodySlot1={
1149+
<div
1150+
style={{
1151+
padding: '12px',
1152+
backgroundColor: '#fef3c7',
1153+
borderRadius: '6px',
1154+
border: '1px solid #fbbf24',
1155+
}}
1156+
>
1157+
<Text
1158+
style={{
1159+
fontSize: '14px',
1160+
color: '#92400e',
1161+
}}
1162+
>
1163+
📏 Fixed Height Demo - Scroll to see all
1164+
content
1165+
</Text>
1166+
</div>
1167+
}
1168+
bodyTitle="Long Content Section"
1169+
content="This is a demonstration of scrollable content in cards. When the total content height exceeds the maxHeight property, the card becomes scrollable with hidden scrollbars for a clean appearance. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
1170+
bodySlot2={
1171+
<div
1172+
style={{
1173+
display: 'flex',
1174+
gap: '8px',
1175+
flexWrap: 'wrap',
1176+
}}
1177+
>
1178+
<Tag
1179+
text="Scroll Demo"
1180+
variant={TagVariant.SUBTLE}
1181+
color={TagColor.PRIMARY}
1182+
size={TagSize.SM}
1183+
/>
1184+
<Tag
1185+
text="Hidden Scrollbar"
1186+
variant={TagVariant.SUBTLE}
1187+
color={TagColor.SUCCESS}
1188+
size={TagSize.SM}
1189+
/>
1190+
<Tag
1191+
text="Overflow Content"
1192+
variant={TagVariant.SUBTLE}
1193+
color={TagColor.WARNING}
1194+
size={TagSize.SM}
1195+
/>
1196+
</div>
1197+
}
1198+
actionButton={{
1199+
text: 'Take Action',
1200+
buttonType: ButtonType.PRIMARY,
1201+
size: ButtonSize.SMALL,
1202+
}}
1203+
/>
1204+
1205+
{/* Aligned Card with Scroll */}
1206+
<Card
1207+
variant={CardVariant.ALIGNED}
1208+
alignment={CardAlignment.VERTICAL}
1209+
centerAlign={false}
1210+
maxHeight="300px"
1211+
cardSlot={imageSlot}
1212+
headerTitle="Scrollable Aligned Card"
1213+
headerTag={
1214+
<Tag
1215+
text="Max Height"
1216+
variant={TagVariant.SUBTLE}
1217+
color={TagColor.PRIMARY}
1218+
size={TagSize.SM}
1219+
/>
1220+
}
1221+
subHeader="Vertical aligned card with 300px height limit"
1222+
bodyTitle="Overflow Content Demo"
1223+
content="This aligned card demonstrates scrolling behavior when content exceeds the maxHeight. The image slot remains visible while the content area becomes scrollable. Perfect for image galleries with detailed descriptions, user profiles with extensive information, or any layout where you want to maintain a consistent card height while allowing content to expand. The scrolling is smooth and scrollbars are hidden for aesthetic appeal. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
1224+
actionButton={{
1225+
text: 'View More',
1226+
buttonType: ButtonType.SECONDARY,
1227+
subType: ButtonSubType.INLINE,
1228+
size: ButtonSize.SMALL,
1229+
}}
1230+
/>
1231+
1232+
{/* Custom Card with Scroll and List */}
1233+
<Card variant={CardVariant.CUSTOM} maxHeight="300px">
1234+
<div
1235+
style={{
1236+
display: 'flex',
1237+
flexDirection: 'column',
1238+
gap: '16px',
1239+
}}
1240+
>
1241+
<div
1242+
style={{
1243+
display: 'flex',
1244+
justifyContent: 'space-between',
1245+
alignItems: 'center',
1246+
}}
1247+
>
1248+
<h3
1249+
style={{
1250+
margin: 0,
1251+
fontSize: '18px',
1252+
fontWeight: '600',
1253+
}}
1254+
>
1255+
Scrollable List
1256+
</h3>
1257+
<Tag
1258+
text="15 Items"
1259+
variant={TagVariant.SUBTLE}
1260+
color={TagColor.NEUTRAL}
1261+
size={TagSize.SM}
1262+
/>
1263+
</div>
1264+
1265+
<div style={{ fontSize: '14px', color: '#666' }}>
1266+
This custom card contains a long list of items
1267+
that exceeds the 300px height limit:
1268+
</div>
1269+
1270+
<div
1271+
style={{
1272+
display: 'flex',
1273+
flexDirection: 'column',
1274+
gap: '8px',
1275+
}}
1276+
>
1277+
{Array.from({ length: 15 }, (_, i) => (
1278+
<div
1279+
key={i}
1280+
style={{
1281+
padding: '12px',
1282+
backgroundColor:
1283+
i % 2 === 0
1284+
? '#f8fafc'
1285+
: '#ffffff',
1286+
borderRadius: '6px',
1287+
border: '1px solid #e5e7eb',
1288+
display: 'flex',
1289+
justifyContent: 'space-between',
1290+
alignItems: 'center',
1291+
}}
1292+
>
1293+
<div>
1294+
<div
1295+
style={{
1296+
fontWeight: '500',
1297+
fontSize: '14px',
1298+
}}
1299+
>
1300+
List Item #{i + 1}
1301+
</div>
1302+
<div
1303+
style={{
1304+
fontSize: '12px',
1305+
color: '#666',
1306+
}}
1307+
>
1308+
Description for item {i + 1}
1309+
</div>
1310+
</div>
1311+
<Tag
1312+
text={
1313+
i % 3 === 0
1314+
? 'Active'
1315+
: i % 3 === 1
1316+
? 'Pending'
1317+
: 'Done'
1318+
}
1319+
variant={TagVariant.SUBTLE}
1320+
color={
1321+
i % 3 === 0
1322+
? TagColor.SUCCESS
1323+
: i % 3 === 1
1324+
? TagColor.WARNING
1325+
: TagColor.NEUTRAL
1326+
}
1327+
size={TagSize.SM}
1328+
/>
1329+
</div>
1330+
))}
1331+
</div>
1332+
1333+
<Button
1334+
text="Load More Items"
1335+
buttonType={ButtonType.SECONDARY}
1336+
size={ButtonSize.SMALL}
1337+
/>
1338+
</div>
1339+
</Card>
1340+
</div>
1341+
1342+
<div
1343+
style={{
1344+
padding: '16px',
1345+
backgroundColor: '#f0fdf4',
1346+
borderRadius: '8px',
1347+
border: '1px solid #bbf7d0',
1348+
fontSize: '14px',
1349+
color: '#15803d',
1350+
marginBottom: '32px',
1351+
}}
1352+
>
1353+
<strong>💡 Scrollable Card Features:</strong>
1354+
<br />• <strong>Hidden Scrollbars:</strong> Clean appearance
1355+
with full scroll functionality
1356+
<br />• <strong>Smooth Scrolling:</strong> Enhanced user
1357+
experience with smooth scroll behavior
1358+
<br />• <strong>Touch Support:</strong> Optimized for mobile
1359+
and touch devices
1360+
<br />• <strong>Flexible Height:</strong> Set any maxHeight
1361+
value (e.g., "300px", "50vh", "20rem")
1362+
<br />• <strong>Content Preservation:</strong> All content
1363+
remains accessible regardless of height
1364+
</div>
1365+
</div>
1366+
10891367
{/* Height Control Examples */}
10901368
<div>
10911369
<h2
@@ -1104,7 +1382,7 @@ const CardDemo = () => {
11041382
marginBottom: '20px',
11051383
}}
11061384
>
1107-
Cards support <strong>height</strong> and{' '}
1385+
Cards support <strong>maxHeight</strong> and{' '}
11081386
<strong>minHeight</strong> props for flexible sizing:
11091387
<br />• Accepts any CSS height value: pixels, percentages,
11101388
viewport units

‎apps/site/src/demos/dataTableDemo.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2919,8 +2919,12 @@ const DataTableDemo = () => {
29192919
serverSidePagination={isServerSideMode}
29202920
isLoading={isLoading}
29212921
pagination={{
2922-
currentPage,
2923-
pageSize,
2922+
currentPage: isServerSideMode
2923+
? serverState.currentPage
2924+
: currentPage,
2925+
pageSize: isServerSideMode
2926+
? serverState.pageSize
2927+
: pageSize,
29242928
totalRows: isServerSideMode
29252929
? serverState.totalRecords
29262930
: data.length,

‎packages/blend/lib/components/Card/Card.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
2727
props as Extract<CardProps, { variant?: undefined }>
2828
}
2929
cardToken={cardToken}
30+
maxHeight={maxHeight}
3031
/>
3132
)
3233
}
@@ -38,6 +39,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
3839
props as Extract<CardProps, { variant: 'aligned' }>
3940
}
4041
cardToken={cardToken}
42+
maxHeight={maxHeight}
4143
/>
4244
)
4345
}
@@ -49,6 +51,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
4951
props as Extract<CardProps, { variant: 'custom' }>
5052
}
5153
cardToken={cardToken}
54+
maxHeight={maxHeight}
5255
/>
5356
)
5457
}
@@ -76,8 +79,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
7679
? toPixels(maxWidth)
7780
: cardToken.maxWidth
7881
}
79-
maxHeight={maxHeight}
80-
minHeight={minHeight}
82+
maxHeight={maxHeight ? toPixels(maxHeight) : undefined}
83+
minHeight={minHeight ? toPixels(minHeight) : undefined}
8184
outline={cardToken.border}
8285
borderRadius={cardToken.borderRadius}
8386
backgroundColor={cardToken.backgroundColor}
@@ -87,6 +90,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
8790
flexDirection="column"
8891
onMouseEnter={handleMouseEnter}
8992
onMouseLeave={handleMouseLeave}
93+
data-card="true"
9094
>
9195
{renderCardContent()}
9296
</Block>

0 commit comments

Comments
 (0)