@rescui/button 0.24.0 → 0.24.1-RUI-293-Update-menu-component-6ca9d26d3.22

package/llm/components/button.md

@@ -0,0 +1,610 @@
+# Button
+
+Buttons allow users to perform actions with a single click.
+
+## Usage
+
+### Features showcase
+
+### Basic usage
+
+```tsx
+import { Button } from '@rescui/button';
+
+<Button onClick={() => alert('Boom💥😀')}>Button</Button>;
+```
+
+### Change mode and size
+
+```tsx
+import { Button } from '@rescui/button';
+
+<Button mode="rock" size="s">
+  Button
+</Button>;
+```
+
+### Add icon
+
+```tsx
+import { Button } from '@rescui/button';
+import { DownloadOutlineIcon } from '@rescui/icons';
+
+<div className="rs-docs-row">
+  <span className="rs-docs-col">
+    <Button icon={<DownloadOutlineIcon />}>Icon on the left</Button>
+  </span>
+  <span className="rs-docs-col">
+    <Button icon={<DownloadOutlineIcon />} iconPosition="right">
+      Icon on the right
+    </Button>
+  </span>
+</div>;
+```
+
+### Push icon to the edge
+
+Use this to align icons in a column of buttons, ensuring consistency even when some buttons have multiple lines of text.
+
+```tsx
+import { Button } from '@rescui/button';
+import { AiIcon } from '@rescui/icons';
+
+const Demo = () => {
+  return (
+    <div className="container">
+      <div>
+        <Button className="btn" iconPosition="left-edge" allowMultiline icon={<AiIcon />}>
+          Short Button
+        </Button>
+      </div>
+      <div>
+        <Button className="btn" iconPosition="left-edge" allowMultiline icon={<AiIcon />}>
+          Some long content of my beautiful Button
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+.container {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+
+  width: 350px;
+  padding: 24px;
+
+  border: 1px solid black;
+
+  resize: horizontal;
+  gap: 12px;
+}
+
+.btn {
+  width: 100%;
+}
+```
+
+### Customizing primary color
+
+To get the correct primary color variables bundle, use the [primary color tool](/design/colors/primary-tool/).
+
+```tsx
+import { Button } from '@rescui/button';
+
+render(
+  <div>
+    <Button>Default primary button</Button>
+    <div className="pink-primary" style={{ marginTop: 12 }}>
+      <Button>Pink primary button</Button>
+    </div>
+    <div style={{ marginTop: 12 }}>
+      <Button className="green-primary">Green primary button</Button>
+    </div>
+  </div>
+);
+```
+
+```postcss
+.pink-primary {
+  --rs-color-primary-light-theme: rgb(223, 36, 119);
+  --rs-color-primary-t-dim-light-theme: rgba(223, 36, 119, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(223, 36, 119, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(223, 36, 119);
+  --rs-color-primary-t-dim-dark-theme: rgba(223, 36, 119, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(223, 36, 119, 0.2);
+}
+
+.green-primary {
+  --rs-color-primary-light-theme: rgb(8, 132, 132);
+  --rs-color-primary-t-dim-light-theme: rgba(8, 132, 132, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(8, 132, 132, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(8, 132, 132);
+  --rs-color-primary-t-dim-dark-theme: rgba(8, 132, 132, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(8, 132, 132, 0.2);
+}
+```
+
+## CSS API
+
+#### `Button` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-button-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-button-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-button-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-button-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-button-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-button-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-button-mode-transparent` | prop: `mode`<br><br>value: `"transparent"` |
+| `rs-button-mode-outline` | prop: `mode`<br><br>value: `"outline"` |
+| `rs-button-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-button-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
+| `rs-button-icon-left-edge` | prop: `iconPosition`<br><br>value: `"left-edge"` |
+| `rs-button-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
+| `rs-button-icon-right-edge` | prop: `iconPosition`<br><br>value: `"right-edge"` |
+| `rs-button-flat-right` | prop: `flat`<br><br>value: `"right"`<br><br>Flatten `right` side of a button |
+| `rs-button-flat-left` | prop: `flat`<br><br>value: `"left"`<br><br>Flatten `left` side of a button |
+| `rs-button-state-hover` | prop: `css-state`<br><br>value: `":hover"` |
+| `rs-button-state-active` | prop: `css-state`<br><br>value: `":active"` |
+| `rs-button-state-focus-visible` | prop: `css-state`<br><br>value: `":focus-visible"` |
+| `rs-button-state-active-focus-visible-no-hover` | prop: `css-state`<br><br>value: `":active:focus-visible:not(:hover)"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Button } from '@rescui/button';
+import { PersonIcon } from '@rescui/icons';
+
+const MyButton = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <Button className={className} icon={<PersonIcon />}>
+        Button
+      </Button>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyButton />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyButton className={`my-button-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyButton className={`my-button-var-1 my-button-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/button/lib/public-api.p.css';
+
+.my-button-var-1 {
+  @mixin rs-button-size-l;
+  @mixin rs-button-mode-rock;
+  @mixin rs-button-icon-right;
+}
+.my-button-var-2 {
+  @mixin rs-button-size-xs;
+  @mixin rs-button-mode-outline;
+  @mixin rs-button-icon-left;
+}
+```
+
+#### CSS Vars
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-button-flip-text-color` | `0 \| 1` | The flag whenever the text color should be inverted |
+| `--rs-button-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button |
+| `--rs-button-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button |
+| `--rs-button-l-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `l` size |
+| `--rs-button-l-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `l` size |
+| `--rs-button-m-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `m` size |
+| `--rs-button-m-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `m` size |
+| `--rs-button-s-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `s` size |
+| `--rs-button-s-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `s` size |
+| `--rs-button-xs-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `xs` size |
+| `--rs-button-xs-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `xs` size |
+
+##### Demo
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="button-customization-example-wrapper-1 rs-docs-row">
+  <div className="rs-docs-col">
+    <Button size="l">Button L</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="m">Button M</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="s">Button S</Button>
+  </div>
+</div>;
+```
+
+```postcss attached
+.button-customization-example-wrapper-1 {
+  --rs-button-border-radius: 0;
+}
+```
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="button-customization-example-wrapper-2 rs-docs-row">
+  <div className="rs-docs-col">
+    <Button size="l">Button L</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="m">Button M</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="s">Button S</Button>
+  </div>
+</div>;
+```
+
+```postcss
+.button-customization-example-wrapper-2 {
+  --rs-button-border-radius: 0;
+  --rs-button-l-border-radius: 8px;
+  --rs-button-s-border-radius: 4px;
+}
+```
+
+## Customizations
+
+#### Custom width
+
+You can control button width externally via a `width` CSS property. You can also do that by putting it into CSS Flexbox container.
+
+```tsx
+import { Button } from '@rescui/button';
+
+<Button className={'my-button-with-custom-width'}>Custom width button</Button>;
+```
+
+```postcss
+.my-button-with-custom-width {
+  width: 300px;
+}
+```
+
+##### Adaptive equal width buttons
+
+```tsx
+import { useState } from 'react';
+import { createTextCn } from '@rescui/typography';
+import { Button } from '@rescui/button';
+
+const ResizeableContainer = ({ children }) => {
+  const [width, setWidth] = useState(400);
+
+  return (
+    <div className={createTextCn('light')('rs-text-2')}>
+      <input
+        type="range"
+        min={250}
+        max={800}
+        onChange={e => setWidth(e.target.value)}
+        value={width}
+      />
+      <span>Container width: {width}px</span>
+      <div
+        style={{
+          width: `${width}px`,
+          marginTop: '24px',
+          border: 'dotted 1px red'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const AdaptiveButtons = () => (
+  <>
+    <div className="my-buttons-container">
+      <Button className="my-adaptive-button">Sort</Button>
+      <Button className="my-adaptive-button">Long long long text</Button>
+    </div>
+  </>
+);
+
+render(
+  <ResizeableContainer>
+    <AdaptiveButtons />
+  </ResizeableContainer>
+);
+```
+
+```postcss
+.my-buttons-container {
+  display: flex;
+  gap: 10px;
+}
+
+.my-adaptive-button {
+  flex: 1 1 0;
+}
+```
+
+#### Add new icons
+
+If you want to add your own icons, make sure they use correct box sizes
+
+- 16x16px for xs size
+
+- 20x20px for s size
+
+- 24x24px for m size
+
+- 28x28px for l size
+
+Icons should support `className` prop, as well.
+
+```tsx
+import { Button } from '@rescui/button';
+
+const SettingsIcon = ({ className }) => (
+  <svg className={className} width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 3L4 7.5v9l8 4.5 8-4.5v-9zm.01 13.005a4 4 0 1 1 3.998-4 4 4 0 0 1-3.999 4z" />
+  </svg>
+);
+
+render(
+  <div className="rs-docs-row rs-docs-row_vertical-center">
+    <Button className="rs-docs-col" icon={<SettingsIcon />}>
+      External icon on the left
+    </Button>
+    <span className="rs-docs-col rs-text-2">or</span>
+    <Button
+      className="rs-docs-col"
+      icon={<SettingsIcon />}
+      iconPosition="right"
+    >
+      External icon on the right
+    </Button>
+  </div>
+);
+```
+
+#### Border-radius customization
+
+You can customize border-radius for all and for specific button sizes, using CSS variables:
+
+- `--rs-button-border-radius`
+- `--rs-button-xs-border-radius`
+- `--rs-button-s-border-radius`
+- `--rs-button-m-border-radius`
+- `--rs-button-l-border-radius`
+- `--rs-button-multiline-border-radius`
+- `--rs-button-xs-multiline-border-radius`
+- `--rs-button-s-multiline-border-radius`
+- `--rs-button-m-multiline-border-radius`
+- `--rs-button-l-multiline-border-radius`
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="button-customization-example-wrapper-1 rs-docs-row">
+  <div className="rs-docs-col">
+    <Button size="l">Button L</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="m">Button M</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="s">Button S</Button>
+  </div>
+</div>;
+```
+
+```postcss
+.button-customization-example-wrapper-1 {
+  --rs-button-border-radius: 0;
+}
+```
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="button-customization-example-wrapper-2 rs-docs-row">
+  <div className="rs-docs-col">
+    <Button size="l">Button L</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="m">Button M</Button>
+  </div>
+  <div className="rs-docs-col">
+    <Button size="s">Button S</Button>
+  </div>
+</div>;
+```
+
+```postcss
+.button-customization-example-wrapper-2 {
+  --rs-button-border-radius: 0;
+  --rs-button-l-border-radius: 8px;
+  --rs-button-s-border-radius: 4px;
+}
+```
+
+#### Shifted side
+
+Shifted side means that buttons will be shifted to a specific side by the padding value. This feature works only with `Clear` buttons.
+
+- **Avoid** mixing `shifted="all"` buttons with any `margin` style names (used in some layout columns) - use wrapper instead.
+- **Avoid** mixing `shifted={side}` buttons with `margin-${side}` style names (used in some layout columns) - use wrapper instead.
+- When shifted buttons overlap, the last one gets the priority.
+- **Use only when necessary**.
+
+Examples:
+
+```tsx
+import { Button } from '@rescui/button';
+import '@rescui/typography';
+
+<div className="rs-text-2">
+  <p>Some common text</p>
+  <p>
+    <Button mode="clear" shifted="left">
+      Button
+    </Button>
+  </p>
+  <p>
+    <Button mode="clear" shifted="all">
+      Hover
+    </Button>{' '}
+    over the first word.
+  </p>
+  <p className="rs-docs-offset-top-24">Another common paragraph</p>
+  <p>
+    <Button mode="clear" shifted={['top', 'bottom', 'left']}>
+      Button
+    </Button>
+  </p>
+  <p>Button above has normal line-height</p>
+  <p className="rs-docs-offset-top-48">
+    <Button mode="clear" shifted="top" size="l">
+      Top shifted with offset 48
+    </Button>
+  </p>
+  <p className="rs-docs-offset-top-24">
+    <span>
+      <Button mode="clear" shifted="left">
+        Left col button
+      </Button>
+    </span>
+    <span style={{ float: 'right' }}>
+      <Button mode="clear" shifted="right">
+        Right col button
+      </Button>
+    </span>
+  </p>
+</div>;
+```
+
+##### CSS variables for shifted emulation
+
+You may also use following CSS variables to manually shift your button:
+
+- `--rs-out-button-vertical-padding`
+- `--rs-out-button-horizontal-padding`
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="shifted-css__wrapper">
+  <Button mode={'clear'} className="shifted-css__btn">
+    Button
+  </Button>
+</div>;
+```
+
+```postcss
+.shifted-css__wrapper {
+  border: 1px solid black;
+  display: inline-block;
+}
+
+.shifted-css__btn {
+  margin: calc(-1 * var(--rs-out-button-vertical-padding)) calc(
+      -1 * var(--rs-out-button-horizontal-padding)
+    );
+}
+```
+
+#### Customizing primary color
+
+To get the correct primary color variables bundle, use the [primary color tool](/design/colors/primary-tool/).
+
+```tsx
+import { Button } from '@rescui/button';
+
+render(
+  <div>
+    <Button>Default primary button</Button>
+    <div className="pink-primary" style={{ marginTop: 12 }}>
+      <Button>Pink primary button</Button>
+    </div>
+    <div style={{ marginTop: 12 }}>
+      <Button className="green-primary">Green primary button</Button>
+    </div>
+  </div>
+);
+```
+
+```postcss attached
+.pink-primary {
+  --rs-color-primary-light-theme: rgb(223, 36, 119);
+  --rs-color-primary-t-dim-light-theme: rgba(223, 36, 119, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(223, 36, 119, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(223, 36, 119);
+  --rs-color-primary-t-dim-dark-theme: rgba(223, 36, 119, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(223, 36, 119, 0.2);
+}
+
+.green-primary {
+  --rs-color-primary-light-theme: rgb(8, 132, 132);
+  --rs-color-primary-t-dim-light-theme: rgba(8, 132, 132, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(8, 132, 132, 0.2);
+
+  --rs-color-primary-dark-theme: rgb(8, 132, 132);
+  --rs-color-primary-t-dim-dark-theme: rgba(8, 132, 132, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(8, 132, 132, 0.2);
+}
+```
+
+#### Flipping text color
+
+You may also use `--rs-button-flip-text-color` CSS variable to flip the text color of the `mode="classic"` Button:
+
+```tsx
+import { Button } from '@rescui/button';
+
+<div className="light-green-primary">
+  <Button mode={'classic'} className="contrast-button">
+    Button
+  </Button>
+</div>;
+```
+
+```postcss
+.contrast-button {
+  --rs-button-flip-text-color: 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);
+}
+```

package/llm/index.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/button",
-  "version": "0.24.0",
+  "version": "0.24.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -16,7 +17,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/use-resize-observer": "^0.3.0",
+    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.169+6ca9d26d3",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -25,11 +26,11 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.0",
-    "@rescui/icons": "^1.7.6",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.27.0",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.57+6ca9d26d3",
+    "@rescui/icons": "1.7.7-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
+    "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
@@ -37,5 +38,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
+  "gitHead": "6ca9d26d30da536dc5a10fdd86222129e2832efa"
 }