Skip to content

feat(utility-classes): add CSS helper classes #2576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
veekays wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(utility-classes): add CSS helper classes #2576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
882 changes: 803 additions & 79 deletions core/components/css-utilities/Border/Border.story.tsx
View file
Open in desktop

Large diffs are not rendered by default.

587 changes: 532 additions & 55 deletions core/components/css-utilities/Display/Display.story.tsx
View file
Open in desktop

Large diffs are not rendered by default.

1,000 changes: 866 additions & 134 deletions core/components/css-utilities/Flex/Flex.story.tsx
View file
Open in desktop

Large diffs are not rendered by default.

950 changes: 936 additions & 14 deletions core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx
View file
Open in desktop

Large diffs are not rendered by default.

342 changes: 299 additions & 43 deletions core/components/css-utilities/Overflow/Overflow.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Heading, Paragraph, Card, Table, Text } from '@/index';
import { Heading, Card, Table, Text } from '@/index';
import utilitiesSchema from '../Schema';

export const overflow = () => {
Expand All @@ -12,62 +12,318 @@ export const overflow = () => {
className: 'overflow-hidden',
properties: 'overflow: hidden !important;',
},
{
className: 'overflow-visible',
properties: 'overflow: visible !important;',
},
{
className: 'overflow-scroll',
properties: 'overflow: scroll !important;',
},
{
className: 'overflow-x-auto',
properties: 'overflow-x: auto !important;',
},
{
className: 'overflow-x-hidden',
properties: 'overflow-x: hidden !important;',
},
{
className: 'overflow-x-visible',
properties: 'overflow-x: visible !important;',
},
{
className: 'overflow-x-scroll',
properties: 'overflow-x: scroll !important;',
},
{
className: 'overflow-y-auto',
properties: 'overflow-y: auto !important;',
},
{
className: 'overflow-y-hidden',
properties: 'overflow-y: hidden !important;',
},
{
className: 'overflow-y-visible',
properties: 'overflow-y: visible !important;',
},
{
className: 'overflow-y-scroll',
properties: 'overflow-y: scroll !important;',
},
];

const longText =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.';

const wideText =
'This is a very long text that will extend beyond the container width and demonstrate horizontal overflow behavior. It should be long enough to show the differences between various overflow settings.';

return (
<div>
<Heading size="xxl">Overflow</Heading>
<br />
<Text weight="strong">
The CSS overflow property controls what happens to content that is too big to fit into an area.
<div className="p-6">
<Heading size="xxl">Overflow Utilities</Heading>
<Text weight="strong" className="mt-4">
Use these utilities to control how content that exceeds its container's dimensions is displayed.
</Text>
<div className="mb-8 mt-5">

<div className="mt-8 mb-8">
<Card className="h-100">
<Table
data={data}
schema={utilitiesSchema}
headerOptions={{
withSearch: true,
}}
size={'standard'}
size="standard"
showMenu={false}
/>
</Card>
</div>
<Heading size="m">Examples</Heading>
<Paragraph>Here are some representative examples of these classes:</Paragraph>
&nbsp;
<Heading size="s">The auto value adds scrollbars when necessary:</Heading>
<br />
<div className="overflow-auto Utilities-overflow">
You can use the overflow property when you want to have better control of the layout. The overflow property
specifies what happens if content overflows an element's box.
</div>
&nbsp;
<div className="DocPage-codeBlock">
{'<div className="overflow-auto overflow">'}
<br />
{
'You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element box.'
}
<br />
{'</div>'}
</div>
&nbsp;
<Heading size="s">With the hidden value, the overflow is clipped, and the rest of the content is hidden</Heading>
<br />
<div className="overflow-hidden Utilities-overflow">
You can use the overflow property when you want to have better control of the layout. The overflow property
specifies what happens if content overflows an element's box.
</div>
&nbsp;
<div className="DocPage-codeBlock">
{'<div className="overflow-hidden overflow">'}
<br />
{
'You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an elements box.'
}
<br />
{'</div>'}

<div className="mt-9">
<Heading size="m">Examples</Heading>
<Text className="mb-6">
Here's how each overflow utility affects content that exceeds its container's dimensions:
</Text>

{/* General Overflow Examples */}
<Card className="mb-8 p-6">
<Heading size="s">General Overflow</Heading>
<Text className="mt-3 mb-5">These utilities control overall overflow in both directions.</Text>

<div className="d-flex flex-wrap">
{/* overflow-auto */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-auto
</Text>
<div className="position-relative">
<div className="overflow-auto p-4 bg-secondary-lightest border rounded-05 h-100">{longText}</div>
<Text className="mt-3">Scrollbars appear only when necessary</Text>
</div>
</div>

{/* overflow-hidden */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-hidden
</Text>
<div className="position-relative">
<div className="overflow-hidden p-4 bg-secondary-lightest border rounded-05 h-100">{longText}</div>
<Text className="mt-3">Content is clipped, no scrollbars</Text>
Comment on lines +102 to +114
Copy link
Collaborator

@anuradha9712 anuradha9712 May 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use some better example, right now all the examples looks similar
image

</div>
</div>

{/* overflow-visible */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-visible
</Text>
<div className="position-relative overflow-hidden">
<div className="overflow-visible p-4 bg-secondary-lightest border rounded-05 h-100">{longText}</div>
<Text className="mt-3">Content flows outside the container</Text>
</div>
</div>

{/* overflow-scroll */}
<div className="mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-scroll
</Text>
<div className="position-relative">
<div className="overflow-scroll p-4 bg-secondary-lightest border rounded-05 h-100">{longText}</div>
<Text className="mt-3">Scrollbars always present</Text>
</div>
</div>
</div>
</Card>

{/* Horizontal Overflow Examples */}
<Card className="mb-8 p-6">
<Heading size="s">Horizontal Overflow (X-axis)</Heading>
<Text className="mt-3 mb-5">These utilities control horizontal overflow only.</Text>

<div className="d-flex flex-wrap">
{/* overflow-x-auto */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-x-auto
</Text>
<div className="position-relative">
<div className="overflow-x-auto white-space-nowrap p-4 bg-secondary-lightest border rounded-05">
{wideText}
</div>
<Text className="mt-3">Horizontal scrollbar appears as needed</Text>
</div>
</div>

{/* overflow-x-hidden */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-x-hidden
</Text>
<div className="position-relative">
<div className="overflow-x-hidden white-space-nowrap p-4 bg-secondary-lightest border rounded-05">
{wideText}
</div>
<Text className="mt-3">Horizontal content is clipped</Text>
</div>
</div>

{/* overflow-x-visible */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-x-visible
</Text>
<div className="position-relative overflow-hidden">
<div className="overflow-x-visible white-space-nowrap p-4 bg-secondary-lightest border rounded-05">
{wideText}
</div>
<Text className="mt-3">Horizontal content flows outside</Text>
</div>
</div>

{/* overflow-x-scroll */}
<div className="mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-x-scroll
</Text>
<div className="position-relative">
<div className="overflow-x-scroll white-space-nowrap p-4 bg-secondary-lightest border rounded-05">
{wideText}
</div>
<Text className="mt-3">Horizontal scrollbar always present</Text>
</div>
</div>
</div>
</Card>

{/* Vertical Overflow Examples */}
<Card className="mb-8 p-6">
<Heading size="s">Vertical Overflow (Y-axis)</Heading>
<Text className="mt-3 mb-5">These utilities control vertical overflow only.</Text>

<div className="d-flex flex-wrap">
{/* overflow-y-auto */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-y-auto
</Text>
<Text appearance="subtle">(Vertical scrollbar appears as needed)</Text>
<div className="position-relative">
<div className="overflow-y-auto p-4 bg-secondary-lightest border rounded-05 vh-25 mb-5">{longText}</div>
</div>
</div>

{/* overflow-y-hidden */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-y-hidden
</Text>
<Text appearance="subtle">(Vertical content is clipped)</Text>
<div className="position-relative">
<div className="overflow-y-hidden p-4 bg-secondary-lightest border rounded-05 vh-25 mb-5">
{longText}
</div>
</div>
</div>

{/* overflow-y-visible */}
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-y-visible
</Text>
<Text appearance="subtle">(Vertical content flows outside)</Text>
<div className="position-relative overflow-hidden">
<div className="overflow-y-visible p-4 bg-secondary-lightest border rounded-05 vh-25 mb-5">
{longText}
</div>
</div>
</div>

{/* overflow-y-scroll */}
<div className="mb-6 w-25">
<Text weight="strong" className="mb-3">
overflow-y-scroll
</Text>
<Text appearance="subtle">(Vertical scrollbar always present)</Text>
<div className="position-relative">
<div className="overflow-y-scroll p-4 bg-secondary-lightest border rounded-05 vh-25 mb-5">
{longText}
</div>
</div>
</div>
</div>
</Card>

{/* Practical Example */}
<Card className="p-6">
<Heading size="s">Practical Example</Heading>
<Text className="mt-3 mb-5">A real-world example of using overflow utilities in a UI component:</Text>

<div className="d-flex flex-wrap">
<div className="mr-8 mb-6 w-25">
<Text weight="strong" className="mb-3">
Comment on lines +263 to +267
Copy link
Collaborator

@anuradha9712 anuradha9712 May 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add some spacing in this example
image

Content Card with Long Description
</Text>
<Card className="p-0">
<div className="p-4 bg-secondary-lightest">
<Heading size="s">Product Information</Heading>
</div>
<div className="p-4">
<Text weight="strong">Main content area</Text>
<div className="mt-3 overflow-y-auto bg-secondary-lightest rounded-05 p-3 border vh-25">
<Text>{longText}</Text>
</div>
<div className="d-flex mt-4 justify-content-end">
<Text className="cursor-pointer text-primary">Read more</Text>
</div>
</div>
</Card>
</div>

<div className="w-25">
<Text weight="strong" className="mb-3">
Horizontal Navigation
</Text>
<Card className="p-0">
<div className="p-4 bg-secondary-lightest">
<Heading size="s">Tab Navigation</Heading>
</div>
<div className="p-4">
<div className="overflow-x-auto border-bottom">
<div className="d-flex white-space-nowrap">
<div className="p-3 border-bottom border-primary cursor-pointer">
<Text weight="strong" className="text-primary">
Dashboard
</Text>
</div>
<div className="p-3 cursor-pointer">
<Text>Reports</Text>
</div>
<div className="p-3 cursor-pointer">
<Text>Analytics</Text>
</div>
<div className="p-3 cursor-pointer">
<Text>User Management</Text>
</div>
<div className="p-3 cursor-pointer">
<Text>Settings</Text>
</div>
<div className="p-3 cursor-pointer">
<Text>Integrations</Text>
</div>
</div>
</div>
<div className="p-3 mt-3 bg-secondary-lightest rounded-05">
<Text>Dashboard content goes here...</Text>
</div>
</div>
</Card>
</div>
</div>
</Card>
</div>
</div>
);
Expand Down
Loading