commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: Skeleton Padding and Width Issue (#9310)

Browse Source 
* Fixed the Skeleton Padding and Width Issue

* Fix the Icon Bounce on Skeleton

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Piyush Garg
2023-06-05 09:24:16 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent 7f7d80e653
commit b7cecfbb66
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/shell/Shell.tsx
+5 -4
View File
@@ -646,17 +646,18 @@ const NavigationItem: React.FC<{
href={item.href}
aria-label={t(item.name)}
className={classNames(
"hover:bg-emphasis [&[aria-current='page']]:bg-emphasis hover:text-emphasis text-default group flex items-center rounded-md py-2 px-3 text-sm font-medium",
"[&[aria-current='page']]:bg-emphasis text-default group flex items-center rounded-md py-2 px-3 text-sm font-medium",
isChild
? `[&[aria-current='page']]:text-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
props.index === 0 ? "mt-0" : "mt-px"
}`
: "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm"
: "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : ""
)}
aria-current={current ? "page" : undefined}>
{item.icon && (
<item.icon
className="h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
className="mr-2 h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
aria-hidden="true"
aria-current={current ? "page" : undefined}
/>
@@ -667,7 +668,7 @@ const NavigationItem: React.FC<{
{item.badge && item.badge}
</span>
) : (
<SkeletonText className="h-3 w-32" />
<SkeletonText style={{ width: `${item.name.length * 10}px` }} className="h-[20px]" />
)}
</Link>
</Tooltip>
packages/ui/components/skeleton/index.tsx
+3 -1
View File
@@ -62,12 +62,14 @@ const Skeleton = <T extends keyof JSX.IntrinsicElements | React.FC>({
);
};
const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean }> = ({
const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean; style?: React.CSSProperties }> = ({
className = "",
invisible = false,
style,
}) => {
return (
<span
style={style}
className={classNames(
`font-size-0 bg-emphasis inline-block animate-pulse rounded-md empty:before:inline-block empty:before:content-['']`,
className,