-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add readme for Logo, clean up main readme (#268)
* docs: add readme for Logo, clean up main readme * chore: fix typo
- Loading branch information
Showing
3 changed files
with
94 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,12 +13,12 @@ npm install @gravity-ui/navigation | |
| Ensure that peer dependencies are installed in your project | ||
|
|
||
| ```bash | ||
| npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16.0.0 | ||
| npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/[email protected] @gravity-ui/[email protected] @bem-react/[email protected] react@^18.0.0 react-dom@18.0.0 | ||
| ``` | ||
|
|
||
| ## Components | ||
|
|
||
| - AsideHeader | ||
| - [AsideHeader](/src/components/AsideHeader/README.md) | ||
| - MobileHeader | ||
| - FooterItem | ||
| - MobileHeaderFooterItem | ||
|
|
@@ -32,75 +32,6 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16. | |
| - Footer | ||
| - MobileFooter | ||
|
|
||
| ## Optimization | ||
|
|
||
| If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, | ||
| you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this: | ||
|
|
||
| ```diff | ||
| --- Main.tsx | ||
| +++ Main.tsx | ||
| -import {AsideHeader} from './AsideHeader' | ||
| +import {PageLayout, AsideFallback} from '@gravity-ui/navigation'; | ||
| +const Aside = React.lazy(() => | ||
| + import('./Aside').then(({Aside}) => ({ default: Aside })) | ||
| +); | ||
|
|
||
| - <AsideHeader renderContent={renderContent} {...restProps} /> | ||
| + <PageLayout> | ||
| + <Suspense fallback={<AsideFallback />}> | ||
| + <Aside /> | ||
| + </Suspense> | ||
| + | ||
| + <PageLayout.Content> | ||
| + <ContentExample /> | ||
| + </PageLayout.Content> | ||
| + </PageLayout> | ||
| --- Aside.tsx | ||
| +++ Aside.tsx | ||
| -import {AsideHeader} from '@gravity-ui/navigation'; | ||
| +import {PageLayoutAside} from '@gravity-ui/navigation'; | ||
|
|
||
| export const Aside: FC = () => { | ||
| return ( | ||
| - <AsideHeader {...props}> | ||
| + <PageLayoutAside {...props}/> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Imports | ||
|
|
||
| ```ts | ||
| import {AsideHeader} from '@gravity-ui/navigation'; | ||
| ``` | ||
|
|
||
| ## CSS variables | ||
|
|
||
| Used for themization Navigation's components | ||
|
|
||
| ### AsideHeader vars | ||
|
|
||
| | Name | Description | Default | | ||
| | :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: | | ||
| | `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` | | ||
| | `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` | | ||
| | `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` | | ||
| | `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` | | ||
| | `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` | | ||
| | `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px | | ||
| | Item | | | | ||
| | `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` | | ||
| | `--gn-aside-header-item-text-color` | | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | | ||
| | Current Item | | | | ||
| | `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | | ||
| | `--gn-aside-header-item-current-icon-color` | | | | ||
| | `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-current-background-color-hover` | | | | ||
| | z-indexes | | | | ||
| | `--gn-aside-header-z-index` | Aside header z-index | 100 | | ||
| | `--gn-aside-header-panel-z-index` | Aside header panel (Drawer component) z-index | 98 | | ||
| | `--gn-aside-header-pane-top-z-index` | Top pane z-index | 98 | | ||
| | `--gn-aside-header-content-z-index` | Content (right part) z-index | 95 | | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,81 @@ | ||
| # AsideHeader [⚠️ WIP] | ||
| # AsideHeader | ||
|
|
||
| Including additional components like `FooterItem`, `Drawer`. | ||
|
|
||
| ## Imports | ||
|
|
||
| ```ts | ||
| import {AsideHeader} from '@gravity-ui/navigation'; | ||
| ``` | ||
|
|
||
| ## Example | ||
| ## Rendering optimization | ||
|
|
||
| If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, | ||
| you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this: | ||
|
|
||
| // TODO | ||
| ```diff | ||
| --- Main.tsx | ||
| +++ Main.tsx | ||
| -import {AsideHeader} from './AsideHeader' | ||
| +import {PageLayout, AsideFallback} from '@gravity-ui/navigation'; | ||
| +const Aside = React.lazy(() => | ||
| + import('./Aside').then(({Aside}) => ({ default: Aside })) | ||
| +); | ||
|
|
||
| - <AsideHeader renderContent={renderContent} {...restProps} /> | ||
| + <PageLayout> | ||
| + <Suspense fallback={<AsideFallback />}> | ||
| + <Aside /> | ||
| + </Suspense> | ||
| + | ||
| + <PageLayout.Content> | ||
| + <ContentExample /> | ||
| + </PageLayout.Content> | ||
| + </PageLayout> | ||
| --- Aside.tsx | ||
| +++ Aside.tsx | ||
| -import {AsideHeader} from '@gravity-ui/navigation'; | ||
| +import {PageLayoutAside} from '@gravity-ui/navigation'; | ||
|
|
||
| export const Aside: FC = () => { | ||
| return ( | ||
| - <AsideHeader {...props}> | ||
| + <PageLayoutAside {...props}/> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Properties | ||
|
|
||
| | Name | Description | Type | Default | | ||
| | :------------------------ | :--------------------------------------------- | :----------------------------------------------------: | :-----: | | ||
| | ref | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` | | | ||
| | customBackground | `AsideHeader`` background | `React.ReactNode` | | | ||
| | customBackgroundClassName | Override default background container's styles | `string` | | | ||
| | Name | Description | Type | Default | | ||
| | :------------------------ | :--------------------------------------------- | :--------------------------------------------------------------------------------------: | :-----: | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | ||
| | ref | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` | | | ||
| | logo | | [Logo](https://github.com/gravity-ui/navigation/blob/main/src/components/Logo/Readme.md) | | | ||
| | customBackground | `AsideHeader`` background | `React.ReactNode` | | | | | | | | | | | | | | | | | | | | | | | ||
| | customBackgroundClassName | Override default background container's styles | `string` | | | ||
|
|
||
| ### CSS API | ||
|
|
||
| | Name | Description | Default | | ||
| | :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: | | ||
| | `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` | | ||
| | `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` | | ||
| | `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` | | ||
| | `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` | | ||
| | `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` | | ||
| | `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px | | ||
| | Item | | | | ||
| | `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` | | ||
| | `--gn-aside-header-item-text-color` | | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | | ||
| | Current Item | | | | ||
| | `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | | ||
| | `--gn-aside-header-item-current-icon-color` | | | | ||
| | `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` | | ||
| | `--gn-aside-header-item-current-background-color-hover` | | | | ||
| | z-indexes | | | | ||
| | `--gn-aside-header-z-index` | Aside header z-index | 100 | | ||
| | `--gn-aside-header-panel-z-index` | Aside header panel (Drawer component) z-index | 98 | | ||
| | `--gn-aside-header-pane-top-z-index` | Top pane z-index | 98 | | ||
| | `--gn-aside-header-content-z-index` | Content (right part) z-index | 95 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # Logo | ||
|
|
||
| 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 | Value for UIKit Button passing to `extraProps` | `string` | | | ||
| | aria-labelledby | Value for UIKit Button passing to `extraProps` | `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 of the Logo container | `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<HTMLElement, 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` | | |