Pageaside fixes

.changeset/fifty-houses-reflect.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fixes to `PageAside`

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -32,6 +32,7 @@ export function PageAside(props: {
     withPageFeedback: boolean;
 }) {
     const { page, document, withPageFeedback, context } = props;
+    const { customization, site } = context;
 
     return (
         <aside
@@ -95,7 +96,8 @@ export function PageAside(props: {
                     'flex flex-col',
                     'overflow-hidden',
                     'w-full',
-                    'xl:max-2xl:page-api-block:rounded-md',
+                    'xl:max-2xl:rounded-corners:page-api-block:rounded-md',
+                    'xl:max-2xl:circular-corners:page-api-block:rounded-xl',
                     'xl:max-2xl:page-api-block:border',
                     'xl:max-2xl:page-api-block:border-tint',
                     'xl:max-2xl:page-api-block:bg-tint/9',
@@ -122,7 +124,9 @@ export function PageAside(props: {
                         />
                     </div>
                 ) : null}
-                <PageAsideFooter context={context} />
+                {customization.themes.toggeable || site.ads ? (
+                    <PageAsideFooter context={context} />
+                ) : null}
             </div>
         </aside>
     );
@@ -197,7 +201,7 @@ function PageAsideActions(props: {
                 'border-tint-subtle',
                 'py-5',
                 'first:pt-0',
-                'xl:max-2xl:page-api-block:px-5',
+                'xl:max-2xl:page-api-block:p-5',
                 'empty:hidden'
             )}
         >
@@ -270,7 +274,7 @@ async function PageAsideFooter(props: { context: GitBookSiteContext }) {
             className={tcls(
                 'sticky bottom-0 z-10 mt-auto flex flex-col',
                 'bg-tint-base theme-gradient-tint:bg-gradient-tint theme-gradient:bg-gradient-primary theme-muted:bg-tint-subtle [html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
-                'xl:max-2xl:page-api-block:border-t xl:max-2xl:page-api-block:p-2',
+                'border-tint-subtle xl:max-2xl:page-api-block:border-t xl:max-2xl:page-api-block:p-2',
                 'py-4'
             )}
         >

packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx

@@ -61,7 +61,7 @@ export function PageFeedbackForm(props: {
         <div className={tcls('flex flex-col gap-3 text-sm', className)}>
             <div className="flex flex-wrap items-center gap-2">
                 <p>{t(languages, 'was_this_helpful')}</p>
-                <ButtonGroup>
+                <ButtonGroup className="rounded-full border border-tint bg-tint-base">
                     <RatingButton
                         rating={PageFeedbackRating.Good}
                         label={tString(languages, 'was_this_helpful_positive')}
@@ -92,7 +92,7 @@ export function PageFeedbackForm(props: {
                             <textarea
                                 ref={inputRef}
                                 name="comment"
-                                className="max-h-40 min-h-16 grow rounded-sm straight-corners:rounded-none bg-tint-base p-2 ring-1 ring-tint ring-inset placeholder:text-sm placeholder:text-tint contrast-more:ring-tint-12 contrast-more:placeholder:text-tint-strong"
+                                className="mx-0.5 max-h-40 min-h-16 grow rounded-sm straight-corners:rounded-none bg-tint-base p-2 ring-1 ring-tint ring-inset placeholder:text-sm placeholder:text-tint contrast-more:ring-tint-12 contrast-more:placeholder:text-tint-strong"
                                 placeholder={tString(languages, 'was_this_helpful_comment')}
                                 aria-label={tString(languages, 'was_this_helpful_comment')}
                                 onChange={(e) => setComment(e.target.value)}
@@ -136,7 +136,7 @@ function RatingButton(
         active: boolean;
     } & ButtonHTMLAttributes<HTMLButtonElement>
 ) {
-    const { rating, label, onClick, active, ...attr } = props;
+    const { rating, label, onClick, active, disabled, ...attr } = props;
 
     const ratingIcon =
         {
@@ -147,18 +147,13 @@ function RatingButton(
 
     return (
         <Button
-            className={tcls(
-                'border-x-0 bg-tint-base p-2 first:rounded-l-full first:border-l-1 first:pl-2.5 last:rounded-r-full last:border-r-1 last:pr-2.5 hover:bg-primary-hover hover:text-primary-strong',
-                'disabled:cursor-not-allowed disabled:hover:bg-inherit disabled:hover:text-inherit dark:disabled:hover:text-inherit',
-                'ring-tint contrast-more:hover:ring-1',
-                active
-                    ? 'bg-primary-active text-primary-strong disabled:hover:bg-primary-active disabled:hover:text-primary-strong contrast-more:ring-2 contrast-more:hover:ring-2'
-                    : 'disabled:opacity-7 contrast-more:disabled:ring-0'
-            )}
+            className="first:pl-2.5 last:pr-2.5"
             type="button"
-            variant="secondary"
+            variant="blank"
             label={label}
             onClick={onClick}
+            active={active}
+            disabled={disabled}
             iconOnly
             {...attr}
             icon={ratingIcon}

packages/gitbook/src/components/primitives/Button.tsx

@@ -81,7 +81,7 @@ export const variantClasses = {
 const activeClasses = {
     primary: 'bg-primary-solid-hover',
     blank: 'bg-primary-active disabled:bg-primary-active text-primary-strong font-medium hover:text-primary-strong disabled:text-primary-strong hover:bg-primary-active',
-    secondary: 'bg-tint-active',
+    secondary: 'bg-tint-active disabled:bg-tint-active',
     header: 'bg-header-link/3',
 };
 
@@ -193,9 +193,9 @@ export const ButtonGroup = React.forwardRef<
         <div
             ref={ref}
             className={tcls(
-                'flex h-fit items-stretch justify-start',
+                'flex h-fit items-stretch justify-start overflow-hidden',
                 combinedShape
-                    ? '*:translate-y-0! *:shadow-none! [&>*:not(:first-child)]:border-l-0 [&>*:not(:first-child,:last-child)]:rounded-none [&>*:not(:only-child):first-child]:rounded-r-none [&>*:not(:only-child):last-child]:rounded-l-none'
+                    ? '*:translate-y-0! *:shadow-none! [&>*:not(:first-child)]:border-l-0 [&>*:not(:first-child,:last-child)]:rounded-none! [&>*:not(:only-child):first-child]:rounded-r-none [&>*:not(:only-child):last-child]:rounded-l-none'
                     : '',
                 className
             )}

packages/gitbook/src/components/primitives/styles.ts

@@ -13,6 +13,7 @@ export const ButtonStyles = [
     'border',
     'border-tint',
     'hover:border-tint-hover',
+    'disabled:border-tint',
 
     'depth-subtle:shadow-xs',
     'hover:depth-subtle:shadow-md',