Skip to content

Commit 271366d

Browse files
prabhuignotoprabhuignoto
committed
feat: enhance component styling and functionality with hybrid theme integration
- Updated SCSS files across various components to utilize the new hybrid theme, improving consistency and visual appeal. - Implemented smooth transitions and hover effects for better user interaction in components like Button, Card, and Tooltip. - Added new utility mixins for hover feedback and interactive states, enhancing accessibility and responsiveness. - Refactored existing styles to align with the hybrid theme, ensuring a cohesive design language throughout the application. - Introduced new animations for dialog and notification components, improving the overall user experience.
1 parent f8988c1 commit 271366d

Some content is hidden

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

48 files changed

+1112
-458
lines changed

‎packages/documentation/App.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -419,9 +419,8 @@ pre {
419419
width: 100% !important;
420420
box-shadow: var(--shadow-card) !important;
421421
transition: all var(--transition-base) !important;
422-
/* Allow tooltips to overflow and be visible */
423-
overflow-x: hidden !important;
424-
overflow-y: visible !important;
422+
/* Allow tooltips to overflow and be visible - no scrollbars */
423+
overflow: visible;
425424

426425
&:hover {
427426
box-shadow: var(--shadow-card-hover) !important;
@@ -442,6 +441,7 @@ pre {
442441
/* Section body */
443442
.rc-section-body {
444443
padding: var(--spacing-xl) !important;
444+
overflow: visible;
445445
}
446446
}
447447
}
@@ -451,7 +451,7 @@ pre {
451451
flex-direction: column;
452452
align-items: flex-start;
453453
width: 100%;
454-
overflow-x: auto;
454+
overflow-x: hidden;
455455
/* Allow tooltips to overflow vertically */
456456
overflow-y: visible;
457457
}
@@ -490,7 +490,7 @@ pre {
490490

491491
/* Ensure Section body doesn't constrain content */
492492
.rc-section-body {
493-
overflow: visible !important;
493+
overflow: visible;
494494
max-width: none !important;
495495
width: 100% !important;
496496
}

‎packages/documentation/components/data-grid/code-strings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,4 @@ const App = () => (
7575
data={data}
7676
/>
7777
);`;
78+

‎packages/documentation/components/draggable/widgets.tsx‎

Lines changed: 137 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,140 @@
1-
import React from 'react';
2-
3-
/**
4-
* Draggable widgets component
5-
*/
6-
const Widgets: React.FC = () => {
7-
return (
8-
<div>
9-
<p>Draggable component examples will be rendered here.</p>
10-
</div>
11-
);
12-
};
1+
import { useEffect, useState } from 'react';
2+
import { useAtomValue } from 'jotai';
3+
import { Section, Text } from '../../../lib/components';
4+
import { HeaderCodeToggle } from '../../common/inline-code-viewer';
5+
import { DemoWidget } from '../../common/demo-widget';
6+
import { responsiveState } from '../../atoms/home';
7+
import {
8+
BoundToContainer,
9+
BoundToContainerHorizontal,
10+
BoundToContainerVertical,
11+
DraggableWidgets,
12+
} from './draggable-examples';
13+
import {
14+
ContainerBound,
15+
ContainerBoundHorizontal,
16+
ContainerBoundVertical,
17+
Multiple,
18+
} from './widget-variants';
19+
20+
function Widgets() {
21+
const media = useAtomValue(responsiveState);
22+
const [width, setWidth] = useState(0);
23+
24+
useEffect(() => {
25+
if (!media) {
26+
return;
27+
}
28+
29+
if (media.isExtraLargeScreen) {
30+
setWidth(700);
31+
} else if (media.isBigScreen) {
32+
setWidth(600);
33+
} else if (media.isDesktop) {
34+
setWidth(500);
35+
} else if (media.isTablet) {
36+
setWidth(400);
37+
} else if (media.isMobile) {
38+
setWidth(300);
39+
}
40+
}, [media]);
1341

14-
Widgets.displayName = 'Widgets';
42+
return width > 0 ? (
43+
<div className="rc-demo-widgets">
44+
<HeaderCodeToggle.Provider>
45+
<Section
46+
size="md"
47+
title="Container-bound dragging"
48+
border={false}
49+
headerActions={<HeaderCodeToggle.Button />}
50+
>
51+
<Text>
52+
The draggable element is constrained within its container boundaries.
53+
Drag the box within the gray container.
54+
</Text>
55+
<HeaderCodeToggle.Content
56+
code={ContainerBound}
57+
language="jsx"
58+
componentName="useDraggable"
59+
>
60+
<DemoWidget name="useDraggable" width={width}>
61+
<BoundToContainer />
62+
</DemoWidget>
63+
</HeaderCodeToggle.Content>
64+
</Section>
65+
</HeaderCodeToggle.Provider>
66+
67+
<HeaderCodeToggle.Provider>
68+
<Section
69+
size="md"
70+
title="Horizontal dragging"
71+
border={false}
72+
headerActions={<HeaderCodeToggle.Button />}
73+
>
74+
<Text>
75+
Restrict dragging to horizontal movement only using the{' '}
76+
<code>dragDirection: 'HORIZONTAL'</code> option.
77+
</Text>
78+
<HeaderCodeToggle.Content
79+
code={ContainerBoundHorizontal}
80+
language="jsx"
81+
componentName="useDraggable"
82+
>
83+
<DemoWidget name="useDraggable" width={width}>
84+
<BoundToContainerHorizontal />
85+
</DemoWidget>
86+
</HeaderCodeToggle.Content>
87+
</Section>
88+
</HeaderCodeToggle.Provider>
89+
90+
<HeaderCodeToggle.Provider>
91+
<Section
92+
size="md"
93+
title="Vertical dragging"
94+
border={false}
95+
headerActions={<HeaderCodeToggle.Button />}
96+
>
97+
<Text>
98+
Restrict dragging to vertical movement only using the{' '}
99+
<code>dragDirection: 'VERTICAL'</code> option.
100+
</Text>
101+
<HeaderCodeToggle.Content
102+
code={ContainerBoundVertical}
103+
language="jsx"
104+
componentName="useDraggable"
105+
>
106+
<DemoWidget name="useDraggable" width={width}>
107+
<BoundToContainerVertical />
108+
</DemoWidget>
109+
</HeaderCodeToggle.Content>
110+
</Section>
111+
</HeaderCodeToggle.Provider>
112+
113+
<HeaderCodeToggle.Provider>
114+
<Section
115+
size="md"
116+
title="Multiple draggable targets"
117+
border={false}
118+
headerActions={<HeaderCodeToggle.Button />}
119+
>
120+
<Text>
121+
Enable dragging for multiple child elements by using the{' '}
122+
<code>makeChildrenDraggable: true</code> option. All children become
123+
independently draggable within the container.
124+
</Text>
125+
<HeaderCodeToggle.Content
126+
code={Multiple}
127+
language="jsx"
128+
componentName="useDraggable"
129+
>
130+
<DemoWidget name="useDraggable" width={width}>
131+
<DraggableWidgets />
132+
</DemoWidget>
133+
</HeaderCodeToggle.Content>
134+
</Section>
135+
</HeaderCodeToggle.Provider>
136+
</div>
137+
) : null;
138+
}
15139

16140
export default Widgets;

‎packages/documentation/components/sidebar/code-strings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ const groups = [
3535
export default function App() {
3636
return <Sidebar enableSearch focusable groups={groups} />;
3737
}`;
38+

‎packages/documentation/components/tooltip/tooltip-widgets.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,12 @@ const Widgets = () => {
7474
></Dropdown>
7575
</div>
7676
</Section>
77-
<Section size="md" title="On Hover">
77+
<Section size="md" title="On Hover" height={450}>
7878
<Text>
7979
The Tooltip is activated by hovering over the target element and is
8080
auto closed the moment the mouse moves out of the target element.
8181
</Text>
82-
<DemoWidget name="Tooltip" width={width}>
82+
<DemoWidget name="Tooltip" width={width} height={350}>
8383
<Tooltip
8484
message="Phasellus dignissim, diam id ullamcorper imperdiet, lacus nibh aliquam diam, at pulvinar"
8585
position={position}
@@ -88,46 +88,44 @@ const Widgets = () => {
8888
foreColor="#FF0000"
8989
size="sm"
9090
>
91-
<Card height={200}>
91+
<Card height={100} width={300}>
9292
<p style={{ color: isDark ? '#fff' : '#000' }}>
9393
Fusce eu magna nec arcu ultrices ultricies in nec ex. Aenean
9494
molestie velit quis volutpat vestibulum. Donec facilisis est ac
9595
condimentum aliquet. Nam semper dui eget sagittis sagittis.
96-
Aenean sodales vulputate magna vitae sodales. Phasellus
97-
dignissim, diam id ullamcorper imperdiet, lacus nibh aliquam
98-
diam, at pulvinar
96+
Aenean sodales vulputate magna vitae sodales.
9997
</p>
10098
</Card>
10199
</Tooltip>
102100
</DemoWidget>
103101
</Section>
104-
<Section size="md" title="Static Tooltip">
102+
<Section size="md" title="Static Tooltip" height={450}>
105103
<Text>
106104
Sometimes it can be useful to have the Tooltip visible all the time.
107105
use the <code>isStatic</code> prop to achieve this.
108106
</Text>
109-
<DemoWidget name="Tooltip" width={width}>
107+
<DemoWidget name="Tooltip" width={width} height={250}>
110108
<Tooltip
111109
message="Phasellus dignissim, diam id ullamcorper imperdiet, lacus nibh aliquam diam, at pulvinar"
112110
position={position}
113111
minWidth={150}
114112
isStatic
115113
>
116114
<div style={{ width: `${width}px` }}>
117-
<Card height={300}>
118-
<Image height={280} src="https://bit.ly/37wPJb5" />
115+
<Card height={100}>
116+
<Image height={80} src="https://bit.ly/37wPJb5" />
119117
</Card>
120118
</div>
121119
</Tooltip>
122120
</DemoWidget>
123121
</Section>
124-
<Section size="md" title="Activate Tooltip on click">
122+
<Section size="md" title="Activate Tooltip on click" height={500}>
125123
<Text>
126124
Tooltip can be also activated by clicking on the target element via
127125
the <code>openOnClick</code> prop. In this mode a close button will be
128126
additionally rendered to close the tooltip.
129127
</Text>
130-
<DemoWidget name="Tooltip" width={width}>
128+
<DemoWidget name="Tooltip" width={width} height={350}>
131129
<Tooltip
132130
message="Phasellus dignissim, diam id ullamcorper imperdiet, lacus nibh aliquam diam, at pulvinar"
133131
position={position}

‎packages/documentation/components/tooltip/widget-variants.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const BottomLeft = () => (
2525
minWidth={160}
2626
>
2727
<div style={{ width: `100%` }}>
28-
<Card height={100}>
28+
<Card height={100} width={100}>
2929
Fusce eu magna nec arcu ultrices ultricies in nec ex. Aenean molestie
3030
velit quis volutpat vestibulum. Donec facilisis est ac condimentum
3131
aliquet. Nam semper dui eget sagittis sagittis. Aenean sodales vulputate

‎packages/lib/components/auto-suggest/auto-suggest.module.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
@use '@design/tokens.scss';
55
@use '@design/effects.scss';
66
@use '@design/shadow.scss';
7+
@use '@design/hybrid-theme.scss' as hybrid;
78

89
// Design tokens for AutoSuggest component
910
$suggestions-min-width: 250px;
1011
$suggestions-max-height: 300px;
1112
$suggestions-min-height: 100px;
1213
$suggestions-border-width: 1px;
13-
$suggestions-animation-duration: 0.15s;
14-
$suggestions-animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
14+
$suggestions-animation-duration: hybrid.$animation-duration-primary;
15+
$suggestions-animation-timing: hybrid.$ease-smooth;
1516

1617
// Spacing tokens
1718
$input-padding: tokens.$space-3 tokens.$space-4;
@@ -23,7 +24,7 @@ $menu-item-padding: tokens.$space-2 tokens.$space-3;
2324
height: 35px;
2425

2526
// Smooth transitions for interactive states
26-
@include effects.include-transition(box-shadow, $suggestions-animation-duration, $suggestions-animation-timing);
27+
@include hybrid.smooth-transition(box-shadow);
2728

2829
// Disable Input component's pseudo-element focus ring to avoid double outlines
2930
// Use only the global :focus-visible outline for a single, clean focus indicator
@@ -46,11 +47,7 @@ $menu-item-padding: tokens.$space-2 tokens.$space-3;
4647
z-index: 999;
4748

4849
// Smooth appearance animation with non-blocking transitions
49-
@include effects.include-transition(
50-
all,
51-
$suggestions-animation-duration,
52-
$suggestions-animation-timing
53-
);
50+
@include hybrid.smooth-multi-transition(transform, opacity, box-shadow, background-color, border-color);
5451

5552
// Transform animation for smooth reveal
5653
transform: translateY(0);
@@ -72,8 +69,7 @@ $menu-item-padding: tokens.$space-2 tokens.$space-3;
7269

7370
// Enhanced accessibility: Focus styling for menu interactions
7471
&:focus-visible {
75-
outline: 2px solid theme.$primary;
76-
outline-offset: -2px;
72+
@include hybrid.focus-outline(theme.$primary);
7773
}
7874
}
7975

‎packages/lib/components/breadcrumb/breadcrumb.module.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,22 @@ $spacing-sm: 0.5rem;
3030
flex-shrink: 0;
3131
flex-wrap: nowrap;
3232
gap: $spacing-xs;
33+
@include hybrid.smooth-multi-transition(color, background-color, transform);
3334

3435
&:not(:first-child) {
3536
margin-left: $spacing-sm;
3637
}
3738

39+
// Device-aware feedback
40+
@include hybrid.hover-feedback() {
41+
background: rgba(theme.$secondary-rgb, 0.15);
42+
border-radius: hybrid.$radius-sm;
43+
}
44+
45+
@include hybrid.touch-feedback() {
46+
transform: scale(0.98);
47+
}
48+
3849
// Mobile: Allow wrapping if needed
3950
@media (max-width: 640px) {
4051
max-width: 200px;
@@ -66,7 +77,7 @@ $spacing-sm: 0.5rem;
6677
display: inline-flex;
6778
align-items: center;
6879
padding: $spacing-xs;
69-
transition: background-color 0.2s ease, color 0.2s ease;
80+
@include hybrid.smooth-multi-transition(background-color, color, transform);
7081

7182
&.selected {
7283
background-color: rgba(theme.$primary-rgb, 0.1);
@@ -77,6 +88,10 @@ $spacing-sm: 0.5rem;
7788
text-underline-offset: 2px;
7889
}
7990

91+
&:focus-visible {
92+
@include hybrid.focus-outline(theme.$primary);
93+
}
94+
8095
@each $size in $sizes {
8196
&.bread_crumb_node_#{$size} {
8297
> * {

0 commit comments

Comments
 (0)