@rescui/menu 0.13.6-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18 → 0.13.6-RUI-293-Update-menu-component-7a032357e.20

package/llm/components/menu.md

@@ -0,0 +1,309 @@
+# Menu (Deprecated)
+
+Deprecated: to get a side menu, use [this component](https://github.com/JetBrains/RescUI/tree/RUI-243-Rework-Menu-component/site/components/menu) instead.
+
+A menu is a group of elements consisting of actions and links, represented by combinations of icons and text.
+
+## Usage
+
+### Features showcase
+
+#### Example
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+<Menu style={{ maxWidth: 200 }}>
+  <MenuItem icon={<CartOutlineIcon />}>Cart</MenuItem>
+  <MenuItem icon={<BugOutlineIcon />}>Bug</MenuItem>
+  <MenuItem icon={<PersonOutlineIcon />}>Person</MenuItem>
+  <MenuItem icon={<TeamOutlineIcon />}>Team</MenuItem>
+  <MenuItem icon={<SuccessOutlineIcon />}>Success</MenuItem>
+</Menu>;
+```
+
+#### With glow hover and mode rock
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+import { useGlowHover } from '@rescui/use-glow-hover';
+
+const GlowMenuItem = props => {
+  const ref = useGlowHover({
+    preset: 'bright-pink',
+    lightSizeEnterAnimationTime: 0,
+    lightSizeLeaveAnimationTime: 0,
+    enableBurst: true
+  });
+  return <MenuItem {...props} ref={ref} />;
+};
+
+const Demo = () => (
+  <Menu mode="rock" style={{ maxWidth: 200 }}>
+    <GlowMenuItem icon={<CartOutlineIcon />}>Cart</GlowMenuItem>
+    <GlowMenuItem icon={<BugOutlineIcon />}>Bug</GlowMenuItem>
+    <GlowMenuItem icon={<PersonOutlineIcon />}>Person</GlowMenuItem>
+    <GlowMenuItem icon={<TeamOutlineIcon />}>Team</GlowMenuItem>
+    <GlowMenuItem icon={<SuccessOutlineIcon />}>Success</GlowMenuItem>
+  </Menu>
+);
+
+render(<Demo />);
+```
+
+#### Change size
+
+If you want to change a size of the menu and items content, you should use `resizeIcons` prop.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+<Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
+  <MenuItem icon={<CartOutlineIcon />}>Cart</MenuItem>
+  <MenuItem icon={<BugOutlineIcon />}>Bug</MenuItem>
+  <MenuItem icon={<PersonOutlineIcon />}>Person</MenuItem>
+  <MenuItem icon={<TeamOutlineIcon />}>Team</MenuItem>
+  <MenuItem icon={<SuccessOutlineIcon />}>Success</MenuItem>
+</Menu>;
+```
+
+#### Contrast primary color
+
+If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+
+const Demo = () => {
+  return (
+    <div className="light-green-primary">
+      <Menu className="menu-with-contrast-primary" style={{ maxWidth: 200 }}>
+        <MenuItem>Some text 1</MenuItem>
+        <MenuItem>Some text 2</MenuItem>
+        <MenuItem>Some text 3</MenuItem>
+        <MenuItem>Some text 4</MenuItem>
+        <MenuItem>Some text 5</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.menu-with-contrast-primary {
+  --rs-menu-contrast-primary: 1;
+}
+
+.light-green-primary {
+  --rs-color-primary-light-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(71, 224, 84);
+  --rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
+}
+```
+
+## CSS Mixins API
+
+#### `Menu` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-menu-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-menu-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-menu-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-menu-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-menu-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"left"` |
+| `rs-menu-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"right"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+const MyMenu = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <Menu
+        mode="rock"
+        size="l"
+        iconPlacement={'left'}
+        style={{ maxWidth: 300 }}
+        className={className}
+      >
+        <MenuItem icon={<CartOutlineIcon size="l" className="icon" />}>Cart</MenuItem>
+        <MenuItem icon={<BugOutlineIcon size="l" className="icon" />}>Bug</MenuItem>
+        <MenuItem icon={<PersonOutlineIcon size="l" className="icon" />}>
+          Person
+        </MenuItem>
+        <MenuItem icon={<TeamOutlineIcon size="l" className="icon" />}>Team</MenuItem>
+        <MenuItem icon={<SuccessOutlineIcon size="l" className="icon" />}>
+          Success
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyMenu />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyMenu className={`my-menu-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyMenu className={`my-menu-var-1 my-menu-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss attached
+@import '@rescui/menu/lib/public-api.p.css';
+@import '@rescui/icons/lib/public-api.p.css';
+
+.my-menu-var-1 {
+  @mixin rs-menu-size-s;
+  @mixin rs-menu-mode-classic;
+  @mixin rs-menu-icon-placement-right;
+
+  .icon {
+    @mixin rs-icon-size-s;
+  }
+}
+.my-menu-var-2 {
+  @mixin rs-menu-size-m;
+  @mixin rs-menu-mode-clear;
+  @mixin rs-menu-icon-placement-left;
+
+  .icon {
+    @mixin rs-icon-size-m;
+  }
+}
+```
+
+#### `Menu` CSS Vars
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-menu-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
+
+Check out [this example](/components/menu/#contrast-primary-color) for contrast primary.
+
+#### `MenuItem` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-menu-item-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-menu-item-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-menu-item-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-menu-item-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-menu-item-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"right"` |
+| `rs-menu-item-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"left"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { MenuItem } from '@rescui/menu';
+import { PersonOutlineIcon } from '@rescui/icons';
+
+const MyMenuItem = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <MenuItem
+        icon={<PersonOutlineIcon size="l" className="icon" />}
+        className={className}
+        style={{ maxWidth: 300 }}
+      >
+        Item
+      </MenuItem>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyMenuItem />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyMenuItem className={`my-menu-item-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyMenuItem className={`my-menu-item-var-1 my-menu-item-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/menu/lib/public-api.p.css';
+@import '@rescui/icons/lib/public-api.p.css';
+
+.my-menu-item-var-1 {
+  @mixin rs-menu-item-size-s;
+  @mixin rs-menu-item-mode-classic;
+  @mixin rs-menu-item-icon-placement-right;
+
+  .icon {
+    @mixin rs-icon-size-s;
+  }
+}
+.my-menu-item-var-2 {
+  @mixin rs-menu-item-size-m;
+  @mixin rs-menu-item-mode-clear;
+  @mixin rs-menu-item-icon-placement-left;
+
+  .icon {
+    @mixin rs-icon-size-m;
+  }
+}
+```

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Menu](./components/menu.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/menu",
-  "version": "0.13.6-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
+  "version": "0.13.6-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -25,10 +26,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.53+2a311c841",
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
     "@rescui/postcss-preset-library": "0.2.2",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
     "@rescui/visual-regression": "0.1.4",
     "postcss": "^8.3.0"
   },
@@ -37,5 +38,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "2a311c841551a48c46895aff5609fe099bbe1a61"
+  "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
 }