{
- const {size, compact, isExpanded} = useAsideHeaderContext();
- const isExpandedByHover = compact && isExpanded;
+ const {size, pinned, isExpanded} = useAsideHeaderContext();
+ const isExpandedByHover = !pinned && isExpanded;
return (
;
+type Props = Omit;
export const PageLayoutAside = React.forwardRef((props, ref) => {
- const {size, compact, isExpanded, onExpand, onFold} = useAsideHeaderContext();
+ const {size, pinned, isExpanded, onExpand, onFold} = useAsideHeaderContext();
const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({
size,
- compact,
+ pinned,
isExpanded,
onExpand,
onFold,
diff --git a/src/components/AsideHeader/hooks/useIsExpanded.ts b/src/components/AsideHeader/hooks/useIsExpanded.ts
index cc5ffaae..592361e1 100644
--- a/src/components/AsideHeader/hooks/useIsExpanded.ts
+++ b/src/components/AsideHeader/hooks/useIsExpanded.ts
@@ -10,19 +10,19 @@ interface UseIsExpandedResult {
onFold: () => void;
}
-export const useIsExpanded = (externalCompact: boolean): UseIsExpandedResult => {
- const [isExpanded, setIsExpanded] = useState(!externalCompact);
+export const useIsExpanded = (externalPinned: boolean): UseIsExpandedResult => {
+ const [isExpanded, setIsExpanded] = useState(externalPinned);
const [isMouseInside, setIsMouseInside] = useState(false);
useEffect(() => {
- if (externalCompact && isExpanded) {
+ if (!externalPinned && isExpanded) {
return;
}
- setIsExpanded(!externalCompact);
- // We need to run this effect only when externalCompact changes
+ setIsExpanded(externalPinned);
+ // We need to run this effect only when externalPinned changes
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [externalCompact]);
+ }, [externalPinned]);
const delayedShouldExpand = useDelayedToggle(isMouseInside, {
enableDelay: ASIDE_HEADER_EXPAND_DELAY,
@@ -31,7 +31,7 @@ export const useIsExpanded = (externalCompact: boolean): UseIsExpandedResult =>
// Update isExpanded based on hover
useEffect(() => {
- if (externalCompact) {
+ if (!externalPinned) {
setIsExpanded(delayedShouldExpand);
}
// We need to run this effect only when delayedShouldExpand changes
diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
index 1485a4e0..d3a13e8e 100644
--- a/src/components/AsideHeader/types.tsx
+++ b/src/components/AsideHeader/types.tsx
@@ -15,7 +15,8 @@ export interface PanelItemProps {
}
export interface LayoutProps {
- compact: boolean;
+ /** Navigation visual state. When `true`, the navigation is expanded (pinned open). When `false`, it is collapsed. */
+ pinned: boolean;
className?: string;
topAlert?: TopAlertProps;
}
@@ -42,19 +43,19 @@ interface AsideHeaderGeneralProps extends QAProps {
renderContent?: RenderContentType;
renderFooter?: (data: {
size: number;
- compact: boolean;
+ isExpanded: boolean;
asideRef: React.RefObject;
}) => React.ReactNode;
collapseButtonWrapper?: (
defaultButton: React.ReactNode,
data: {
- compact: boolean;
- onChangeCompact?: (compact: boolean) => void;
+ isExpanded: boolean;
+ onChangePinned?: (pinned: boolean) => void;
},
) => React.ReactNode;
editMenuProps?: EditMenuProps;
onClosePanel?: () => void;
- onChangeCompact?: (compact: boolean) => void;
+ onChangePinned?: (pinned: boolean) => void;
onMenuMoreClick?: () => void;
onAllPagesClick?: () => void;
openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
@@ -93,7 +94,8 @@ export interface AsideHeaderItem extends MenuItem {
event: React.MouseEvent,
) => void;
bringForward?: boolean;
- compact?: boolean;
+ /** When `true`, forces the item to display in expanded form. */
+ isExpanded?: boolean;
/**
* @deprecated Use itemWrapper instead for popup functionality
diff --git a/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx b/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx
index a610f38c..c890c809 100644
--- a/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx
+++ b/src/components/AsideHeader/useAsideHeaderInnerContextValue.tsx
@@ -11,7 +11,7 @@ const EMPTY_MENU_ITEMS: AsideHeaderItem[] = [];
export const useAsideHeaderInnerContextValue = (
props: AsideHeaderProps & {
size: number;
- compact: boolean;
+ pinned: boolean;
isExpanded: boolean;
onExpand?: () => void;
onFold?: () => void;
diff --git a/src/components/Logo/Logo.module.scss b/src/components/Logo/Logo.module.scss
index f05d2dee..d9adb00c 100644
--- a/src/components/Logo/Logo.module.scss
+++ b/src/components/Logo/Logo.module.scss
@@ -36,7 +36,7 @@ $block: '.#{variables.$ns}logo';
&__logo {
margin: 0 var(--g-spacing-4) 0 var(--g-spacing-2);
- &_compact {
+ &_collapsed {
opacity: 0;
}
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 13dfc884..59bdd0ed 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -21,7 +21,7 @@ const logoTransitionClasses = {
};
export const Logo: React.FC<
- LogoProps & {compact?: boolean; buttonClassName?: string; iconPlaceClassName?: string}
+ LogoProps & {isExpanded?: boolean; buttonClassName?: string; iconPlaceClassName?: string}
> = ({
text,
icon,
@@ -34,7 +34,7 @@ export const Logo: React.FC<
target = '_self',
wrapper,
onClick,
- compact,
+ isExpanded = true,
className,
buttonClassName,
'aria-label': ariaLabel,
@@ -60,7 +60,7 @@ export const Logo: React.FC<
logo = text();
} else {
logo = (
-
+
{text}
);
@@ -82,7 +82,7 @@ export const Logo: React.FC<
{buttonIcon}
@@ -93,7 +93,7 @@ export const Logo: React.FC<
return (
- {hasWrapper ? wrapper(button, Boolean(compact)) : button}
+ {hasWrapper ? wrapper(button, Boolean(isExpanded)) : button}
);
};
diff --git a/src/components/Logo/Readme.md b/src/components/Logo/Readme.md
index 897c6e68..ae221442 100644
--- a/src/components/Logo/Readme.md
+++ b/src/components/Logo/Readme.md
@@ -2,21 +2,21 @@
Logo icon is wrapped in UIKit Button, text is wrapped in HTML tag `a` or `div`, when passing `hasWrapper` prop.
-| Name | Description | Type | Default |
-| :--------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | :-------: |
-| aria-label | HTML `aria-label` attribute passed to tag `a` | `string` | |
-| aria-labelledby | HTML `aria-labelledby` attribute passed to tag `a` | `string` | |
-| buttonClassName | HTML `class` for UIKit Button | `string` | |
-| buttonWrapperClassName | HTML `class` attribute for UIKit Button wrapper | `string` | |
-| compact | Logo view state: `true` shows icon, `false` — icon and text | `boolean` | |
-| className | HTML `class` attribute | `string` | |
-| href | HTML `href` attribute for UIKit Button in the compact state and HTML tag `a` for the collapsed state without defining `hasWrapper` prop | `string` | |
-| icon | | [IconProps['data']](https://github.com/gravity-ui/uikit/blob/610e49b6d4b9d1b4eae46841a9c1ab87ccc591fb/src/components/Icon/Icon.tsx#L26) | |
-| iconClassName | HTML `class` attribute of the icon container | `string` | |
-| iconSize | `width` and `height` attribute | `number` | `24` |
-| iconSrc | HTML `src` attribute of the tag `img` | `string` | |
-| onClick | Callback function called when the user clicks the Logo | `(event: React.MouseEvent) => void` | |
-| target | HTML `target` attribute of the tag `a` | `HTMLAttributeAnchorTarget` | `"_self"` |
-| text | Text displays only when `compact` prop is `false` | `() => React.ReactNode` or `string` | |
-| textSize | Text font size | `number` | `15` |
-| wrapper | Wrapper function. Wrapping icon and text in two separated containers | `(node: React.ReactNode, compact: boolean) => React.ReactNode` | |
+| Name | Description | Type | Default |
+| :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | :-------: |
+| aria-label | HTML `aria-label` attribute passed to tag `a` | `string` | |
+| aria-labelledby | HTML `aria-labelledby` attribute passed to tag `a` | `string` | |
+| buttonClassName | HTML `class` for UIKit Button | `string` | |
+| buttonWrapperClassName | HTML `class` attribute for UIKit Button wrapper | `string` | |
+| pinned | Logo view state: `true` (pinned) shows icon and text, `false` — icon only | `boolean` | |
+| className | HTML `class` attribute | `string` | |
+| href | HTML `href` attribute for UIKit Button in the collapsed state and HTML tag `a` for the expanded state without defining `hasWrapper` prop | `string` | |
+| icon | | [IconProps['data']](https://github.com/gravity-ui/uikit/blob/610e49b6d4b9d1b4eae46841a9c1ab87ccc591fb/src/components/Icon/Icon.tsx#L26) | |
+| iconClassName | HTML `class` attribute of the icon container | `string` | |
+| iconSize | `width` and `height` attribute | `number` | `24` |
+| iconSrc | HTML `src` attribute of the tag `img` | `string` | |
+| onClick | Callback function called when the user clicks the Logo | `(event: React.MouseEvent) => void` | |
+| target | HTML `target` attribute of the tag `a` | `HTMLAttributeAnchorTarget` | `"_self"` |
+| text | Text displays only when `pinned` prop is `true` | `() => React.ReactNode` or `string` | |
+| textSize | Text font size | `number` | `15` |
+| wrapper | Wrapper function. Wrapping icon and text in two separated containers | `(node: React.ReactNode, pinned: boolean) => React.ReactNode` | |
diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx
index 49449598..5708bf31 100644
--- a/src/components/MobileHeader/MobileHeader.tsx
+++ b/src/components/MobileHeader/MobileHeader.tsx
@@ -35,7 +35,7 @@ const b = createBlock('mobile-header', styles);
type PanelName = string | null;
interface BurgerMenuProps extends Omit {
- renderFooter?: (data: {size: number; isCompact: boolean}) => React.ReactNode;
+ renderFooter?: (data: {size: number; isExpanded: boolean}) => React.ReactNode;
}
type OverlapPanelProps = Omit;
@@ -82,12 +82,12 @@ export const MobileHeader = React.forwardRef(
ref,
): React.ReactElement => {
const targetRef = useForwardRef(ref);
- const [compact] = useState(true);
+ const [pinned] = useState(false);
const [visiblePanel, setVisiblePanel] = useState(null);
const [overlapPanelVisible, setOverlapPanelVisible] = useState(false);
// for expand top panel cases (i.e. switch service panel). Will be removed if not used in future design
- const size = compact ? MOBILE_HEADER_COMPACT_HEIGHT : MOBILE_HEADER_EXPANDED_HEIGHT;
+ const size = pinned ? MOBILE_HEADER_EXPANDED_HEIGHT : MOBILE_HEADER_COMPACT_HEIGHT;
const onPanelToggle = useCallback(
(name: PanelName) => {
@@ -184,9 +184,9 @@ export const MobileHeader = React.forwardRef(
() =>
burgerMenu.renderFooter?.({
size,
- isCompact: compact,
+ isExpanded: pinned,
}),
- [burgerMenu, size, compact],
+ [burgerMenu, size, pinned],
);
const onLogoClick = useCallback(
@@ -280,7 +280,7 @@ export const MobileHeader = React.forwardRef(
const allPanelItems = [burgerPanelItem, ...panelItems];
return (
-
+
{topAlert && (
@@ -295,7 +295,7 @@ export const MobileHeader = React.forwardRef(
closeTitle={burgerCloseTitle}
openTitle={burgerOpenTitle}
/>
-
+
{sideItemRenderContent?.({size})}
diff --git a/src/components/MobileLogo/MobileLogo.tsx b/src/components/MobileLogo/MobileLogo.tsx
index 214ee437..caea4cbe 100644
--- a/src/components/MobileLogo/MobileLogo.tsx
+++ b/src/components/MobileLogo/MobileLogo.tsx
@@ -10,12 +10,12 @@ import styles from './MobileLogo.module.scss';
const b = createBlock('mobile-logo', styles);
export interface MobileLogoProps extends LogoProps {
- compact: boolean;
+ isExpanded: boolean;
}
export const MobileLogo: React.FC = ({
text,
- compact,
+ isExpanded,
icon,
iconSrc,
iconClassName,
@@ -66,7 +66,7 @@ export const MobileLogo: React.FC = ({
return hasWrapper ? (
- {wrapper(logo, compact)}
+ {wrapper(logo, isExpanded)}
) : (
React.ReactNode,
opts: {
collapsed: boolean;
- compact: boolean;
+ pinned: boolean;
item: MenuItem;
ref: React.RefObject;
},
@@ -74,7 +74,8 @@ export interface LogoProps {
textSize?: number;
href?: string;
target?: HTMLAttributeAnchorTarget;
- wrapper?: (node: React.ReactNode, compact: boolean) => React.ReactNode;
+ /** Wrapper function for the logo. The `isExpanded` parameter indicates if the navigation is expanded. */
+ wrapper?: (node: React.ReactNode, isExpanded: boolean) => React.ReactNode;
onClick?: (event: React.MouseEvent) => void;
'aria-label'?: string;
'aria-labelledby'?: string;