Skip to content

Commit c1ea3f2

Browse files
mohdsayedmohdsayed
authored
Merge pull request #60 from rtCamp/fix/ui-components
Fix: Align UI components with Frappe UI
2 parents 8d951aa + 1e84b32 commit c1ea3f2

File tree

16 files changed

+154
-120
lines changed

16 files changed

+154
-120
lines changed

‎packages/frappe-ui-react/src/components/autoComplete/autoComplete.tsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ const Autocomplete: React.FC<AutocompleteProps> = ({
5050
}) => {
5151
const [query, setQuery] = useState<string>("");
5252
const [showOptions, setShowOptions] = useState<boolean>(false);
53+
5354
const searchInputRef = useRef<HTMLInputElement>(null);
55+
const cancelRef = useRef<HTMLDivElement>(null);
5456

5557
const isOption = useCallback(
5658
(option: AutocompleteOption): option is Option => {
@@ -270,7 +272,11 @@ const Autocomplete: React.FC<AutocompleteProps> = ({
270272
const clearAll = useCallback(
271273
(e: React.MouseEvent) => {
272274
e.stopPropagation();
273-
handleComboboxChange(multiple ? [] : null);
275+
if(multiple){
276+
handleComboboxChange([]);
277+
}else{
278+
setQuery("");
279+
}
274280
},
275281
[multiple, handleComboboxChange]
276282
);
@@ -355,11 +361,26 @@ const Autocomplete: React.FC<AutocompleteProps> = ({
355361
displayValue={() => query}
356362
onChange={(
357363
event: React.ChangeEvent<HTMLInputElement>
358-
) => setQuery(event.target.value)}
364+
) => {
365+
cancelRef.current?.removeAttribute("inert");
366+
cancelRef.current?.removeAttribute("aria-hidden");
367+
setQuery(event.target.value);
368+
}}
359369
autoComplete="off"
370+
onBlur={() => {
371+
cancelRef.current?.removeAttribute("inert");
372+
cancelRef.current?.removeAttribute("aria-hidden");
373+
}}
360374
placeholder="Search"
361375
/>
362-
<div className="inline-flex h-7 w-7 items-center justify-center">
376+
<div
377+
ref={cancelRef}
378+
className="inline-flex h-7 w-7 items-center justify-center"
379+
onMouseEnter={() => {
380+
cancelRef.current?.removeAttribute("inert");
381+
cancelRef.current?.removeAttribute("aria-hidden");
382+
}}
383+
>
363384
{loading ? (
364385
<LoadingIndicator
365386
data-testid="loading-indicator"

‎packages/frappe-ui-react/src/components/breadcrumbs/breadcrumbs.stories.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ export default {
2929

3030
const BreadcrumbsTemplate: StoryObj<BreadcrumbsProps> = {
3131
render: (args) => (
32-
<div className="p-4 bg-surface-gray-1 rounded-lg shadow-sm">
33-
<Breadcrumbs {...args} />
34-
</div>
32+
<Breadcrumbs {...args} />
3533
),
3634
};
3735

‎packages/frappe-ui-react/src/components/breadcrumbs/breadcrumbs.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
7171
}, []);
7272

7373
return (
74-
<div className="flex min-w-0 items-center bg-surface-gray-1">
74+
<div className="flex min-w-0 items-center">
7575
{dropdownItems.length > 0 && (
7676
<div className="h-7">
7777
<Dropdown options={dropdownItems as unknown as DropdownOptions}>
@@ -80,7 +80,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
8080
</Button>
8181
</Dropdown>
8282
<span
83-
className="ml-1 mr-0.5 text-base text-(--ink-gray-4)"
83+
className="ml-1 mr-0.5 text-base text-ink-gray-4"
8484
aria-hidden="true"
8585
>
8686
/
@@ -91,10 +91,10 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
9191
<div className="flex min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap">
9292
{crumbs.map((item, i) => {
9393
const isLast = i === crumbs.length - 1;
94-
const commonClasses = `flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-(--outline-gray-3) ${
94+
const commonClasses = `flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 ${
9595
isLast
96-
? "text-(--ink-gray-9)"
97-
: "text-(--ink-gray-5) hover:text-(--ink-gray-7)"
96+
? "text-ink-gray-9"
97+
: "text-ink-gray-5 hover:text-ink-gray-7"
9898
}`;
9999

100100
const handleClick = (
@@ -122,7 +122,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items }) => {
122122
</button>
123123
{!isLast && (
124124
<span
125-
className="mx-0.5 text-base text-(--ink-gray-4) select-none"
125+
className="mx-0.5 text-base text-ink-gray-4 select-none"
126126
aria-hidden="true"
127127
>
128128
/

‎packages/frappe-ui-react/src/components/calendar/calendar.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,10 @@ export const CustomHeader: Story = {
151151
}) => (
152152
<div className="flex items-center justify-between p-4 border-b">
153153
<div className="flex items-center gap-4">
154-
<h1 className="text-xl font-bold text-ink-gray-1">
154+
<h1 className="text-xl font-bold text-ink-gray-7">
155155
{currentMonthYear}
156156
</h1>
157-
<div className="flex items-center gap-1 text-ink-gray-1">
157+
<div className="flex items-center gap-1 text-ink-gray-7">
158158
<button
159159
onClick={decrement}
160160
className="p-2 rounded hover:bg-gray-200"

‎packages/frappe-ui-react/src/components/calendar/calendarDaily.tsx‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,30 @@ export const CalendarDaily = () => {
3737
<p className="pb-2 text-base font-semibold text-ink-gray-8">
3838
{parseDateWithDay(currentDate.toDate(), true)}
3939
</p>
40+
<div
41+
className={`flex shrink-0 h-fit border-outline-gray-1 ${
42+
config.noBorder ? 'border-t-[1px]' : 'border-[1px] border-b-0'
43+
}`}
44+
>
45+
<div className="flex justify-center items-start py-0.5 w-20 text-base text-ink-gray-6 text-center">
46+
<div className="text-sm text-ink-gray-6 h-[29px] inline-flex items-center">
47+
All day
48+
</div>
49+
</div>
50+
<div className="grid w-full grid-cols-7 relative">
51+
{(fullDayEvents[parsedCurrentDate] || []).map((event, idx) => (
52+
<CalendarEvent
53+
key={event.id}
54+
event={{ ...event, idx }}
55+
date={currentDate.toDate()}
56+
extraClassName="mb-1 w-[20%] cursor-pointer"
57+
/>
58+
))}
59+
</div>
60+
</div>
4061
<div
4162
className={clsx(
42-
"flex h-full w-full overflow-y-scroll border-ink-gray-2",
63+
"flex h-full w-full overflow-y-scroll border-gray-200",
4364
config.noBorder ? "border-t" : "border border-r-0"
4465
)}
4566
ref={gridRef}
@@ -51,31 +72,21 @@ export const CalendarDaily = () => {
5172
</div>
5273

5374
<div className="grid h-full w-full grid-cols-1 pb-2">
54-
<div className="calendar-column relative border-r border-l border-ink-gray-2">
55-
<div
56-
className="flex w-full flex-wrap gap-2 overflow-y-auto border-b border-ink-gray-2 p-1 transition-all"
57-
style={{ minHeight: `${config.redundantCellHeight}px` }}
58-
>
59-
{(fullDayEvents[parsedCurrentDate] || []).map((event, idx) => (
60-
<CalendarEvent
61-
key={event.id}
62-
event={{ ...event, idx }}
63-
date={currentDate.toDate()}
64-
extraClassName="mb-1 w-[20%] cursor-pointer"
65-
/>
66-
))}
67-
</div>
68-
{timeArray.map((time) => (
75+
<div className="calendar-column relative border-r border-l border-gray-200">
76+
{timeArray.map((time, timeIndex) => (
6977
<div
7078
key={time}
71-
className="relative flex text-ink-gray-8"
72-
data-time-attr={time}
79+
className="relative flex text-ink-gray-8 cursor-pointer"
80+
data-time-attr={timeIndex !== 0 ? time : undefined}
81+
onClick={(e) =>
82+
handleCellDblClick(e, currentDate.toDate(), time)
83+
}
7384
onDoubleClick={(e) =>
7485
handleCellDblClick(e, currentDate.toDate(), time)
7586
}
7687
>
7788
<div
78-
className="w-full border-b border-ink-gray-2"
89+
className="w-full border-b border-gray-200"
7990
style={{ height: `${hourHeight}px` }}
8091
/>
8192
</div>

‎packages/frappe-ui-react/src/components/calendar/calendarEvent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,11 @@ export const CalendarEvent = ({
134134
ref={eventRef}
135135
draggable="true"
136136
className={clsx(
137-
"h-min-[18px] rounded-lg p-2 transition-all duration-75 cursor-pointer",
137+
"mx-px shadow rounded h-min-[6px] rounded-lg p-2 transition-all duration-75 cursor-pointer shrink-0 w-[90%]",
138138
extraClassName,
139139
colorMap[event?.color ?? "blue"]?.background_color || "bg-green-100",
140140
activeView !== "Month" && "shadow-lg absolute",
141+
event.isFullDay && "relative",
141142
isPopoverOpen && "!z-20 drop-shadow-xl"
142143
)}
143144
style={eventStyles}

‎packages/frappe-ui-react/src/components/calendar/calendarMonthly.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const CalendarMonthly = () => {
7272
</div>
7373
<div
7474
className={clsx(
75-
"grid w-full flex-1 grid-cols-7 border-ink-gray-2",
75+
"grid w-full flex-1 grid-cols-7 border-gray-200",
7676
currentMonthDates.length > 35 ? "grid-rows-6" : "grid-rows-5",
7777
config.noBorder ? "border-t" : "border"
7878
)}

0 commit comments

Comments
 (0)