@redis-ui/components 47.6.2 → 47.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/ButtonGroup/components/Button/Button.cjs +3 -1
- package/dist/ButtonGroup/components/Button/Button.d.ts +1 -1
- package/dist/ButtonGroup/components/Button/Button.js +3 -1
- package/dist/SideBar/SideBar.constants.cjs +2 -2
- package/dist/SideBar/SideBar.constants.d.ts +2 -2
- package/dist/SideBar/SideBar.constants.js +2 -2
- package/package.json +1 -1
- package/skills/redis-ui-components/references/ButtonGroup.md +2 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonGroupProps } from './ButtonGroup.types';
|
|
2
2
|
declare const ButtonGroup: ((props: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
3
|
-
Button: (props: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
Button: ({ isSelected, ...props }: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Icon: ({ icon }: import("./components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
};
|
|
6
6
|
export default ButtonGroup;
|
|
@@ -2,8 +2,10 @@ require("../../../_virtual/_rolldown/runtime.cjs");
|
|
|
2
2
|
const require_Button_style = require("./Button.style.cjs");
|
|
3
3
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
4
|
//#region src/ButtonGroup/components/Button/Button.tsx
|
|
5
|
-
var Button = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
|
|
5
|
+
var Button = ({ isSelected, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
|
|
6
6
|
type: "button",
|
|
7
|
+
isSelected,
|
|
8
|
+
"aria-pressed": isSelected,
|
|
7
9
|
...props
|
|
8
10
|
});
|
|
9
11
|
//#endregion
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ButtonProps } from './Button.types';
|
|
2
|
-
export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const Button: ({ isSelected, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Button as Button$1 } from "./Button.style.js";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
//#region src/ButtonGroup/components/Button/Button.tsx
|
|
4
|
-
var Button = (props) => /* @__PURE__ */ jsx(Button$1, {
|
|
4
|
+
var Button = ({ isSelected, ...props }) => /* @__PURE__ */ jsx(Button$1, {
|
|
5
5
|
type: "button",
|
|
6
|
+
isSelected,
|
|
7
|
+
"aria-pressed": isSelected,
|
|
6
8
|
...props
|
|
7
9
|
});
|
|
8
10
|
//#endregion
|
|
@@ -29,9 +29,9 @@ var SIDEBAR_CONSTANTS = {
|
|
|
29
29
|
},
|
|
30
30
|
header: {
|
|
31
31
|
height: "7rem",
|
|
32
|
-
margin: "0 0
|
|
32
|
+
margin: "0 0 2rem 0"
|
|
33
33
|
},
|
|
34
|
-
footer: { meta: { padding: "0 1.8rem
|
|
34
|
+
footer: { meta: { padding: "0 1.8rem 0rem 1.8rem" } },
|
|
35
35
|
item: {
|
|
36
36
|
margin: "0.2rem 0.5rem 0.2rem 1rem",
|
|
37
37
|
height: "3.2rem",
|
|
@@ -28,11 +28,11 @@ export declare const SIDEBAR_CONSTANTS: {
|
|
|
28
28
|
};
|
|
29
29
|
readonly header: {
|
|
30
30
|
readonly height: "7rem";
|
|
31
|
-
readonly margin: "0 0
|
|
31
|
+
readonly margin: "0 0 2rem 0";
|
|
32
32
|
};
|
|
33
33
|
readonly footer: {
|
|
34
34
|
readonly meta: {
|
|
35
|
-
readonly padding: "0 1.8rem
|
|
35
|
+
readonly padding: "0 1.8rem 0rem 1.8rem";
|
|
36
36
|
};
|
|
37
37
|
};
|
|
38
38
|
readonly item: {
|
|
@@ -29,9 +29,9 @@ var SIDEBAR_CONSTANTS = {
|
|
|
29
29
|
},
|
|
30
30
|
header: {
|
|
31
31
|
height: "7rem",
|
|
32
|
-
margin: "0 0
|
|
32
|
+
margin: "0 0 2rem 0"
|
|
33
33
|
},
|
|
34
|
-
footer: { meta: { padding: "0 1.8rem
|
|
34
|
+
footer: { meta: { padding: "0 1.8rem 0rem 1.8rem" } },
|
|
35
35
|
item: {
|
|
36
36
|
margin: "0.2rem 0.5rem 0.2rem 1rem",
|
|
37
37
|
height: "3.2rem",
|
package/package.json
CHANGED
|
@@ -29,7 +29,7 @@ import { ButtonGroup } from '@redis-ui/components';
|
|
|
29
29
|
|
|
30
30
|
| Prop | Type | Default | Description |
|
|
31
31
|
|------|------|---------|-------------|
|
|
32
|
-
| `isSelected` | `boolean` | - | Marks the button as selected
|
|
32
|
+
| `isSelected` | `boolean` | - | Marks the button as selected. Applies the selected styling and sets `aria-pressed` to expose the toggle state to assistive technology. When omitted, no `aria-pressed` attribute is rendered (plain, non-toggle button). |
|
|
33
33
|
| `onClick` | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click handler used to toggle selection. |
|
|
34
34
|
| `children` | `React.ReactNode` | - | Button content. |
|
|
35
35
|
|
|
@@ -123,5 +123,6 @@ const isSelected = (value: string) => selected.includes(value);
|
|
|
123
123
|
|
|
124
124
|
- `ButtonGroup` has no internal selection logic; manage selected state in the parent component.
|
|
125
125
|
- `ButtonGroup.Button` is styled as a native `button` and can be disabled through the standard `disabled` attribute.
|
|
126
|
+
- `ButtonGroup.Button` follows the WAI-ARIA toggle button pattern: passing `isSelected` sets `aria-pressed` (`true`/`false`) so screen readers announce the selected state. This works for both single- and multi-select usages. Buttons rendered without `isSelected` get no `aria-pressed` and remain plain buttons.
|
|
126
127
|
- `ButtonGroup.Icon` always renders the icon at `size="M"` and inherits its color from the surrounding text (`currentColor`).
|
|
127
128
|
- If you need to pass props to an icon component, declare it outside the render path or wrap it in `useMemo`; avoid inline arrow functions because they re-create the icon on every parent render.
|