carbon-react 159.11.1 → 159.12.0
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/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts +2 -2
- package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js +1 -1
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts +36 -13
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts +15 -7
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
- package/esm/components/button-toggle/button-toggle.component.d.ts +20 -7
- package/esm/components/button-toggle/button-toggle.component.js +1 -1
- package/esm/components/button-toggle/button-toggle.style.d.ts +6 -36
- package/esm/components/button-toggle/button-toggle.style.js +1 -1
- package/esm/components/icon/icon.style.js +1 -1
- package/esm/components/time/__internal__/time-toggle/time-toggle.component.js +1 -1
- package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.d.ts +2 -2
- package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js +1 -1
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts +36 -13
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js +1 -1
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.d.ts +15 -7
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
- package/lib/components/button-toggle/button-toggle.component.d.ts +20 -7
- package/lib/components/button-toggle/button-toggle.component.js +1 -1
- package/lib/components/button-toggle/button-toggle.style.d.ts +6 -36
- package/lib/components/button-toggle/button-toggle.style.js +1 -1
- package/lib/components/icon/icon.style.js +1 -1
- package/lib/components/time/__internal__/time-toggle/time-toggle.component.js +1 -1
- package/package.json +1 -1
- package/esm/components/button-toggle/button-toggle-icon.component.d.ts +0 -15
- package/esm/components/button-toggle/button-toggle-icon.component.js +0 -1
- package/lib/components/button-toggle/button-toggle-icon.component.d.ts +0 -15
- package/lib/components/button-toggle/button-toggle-icon.component.js +0 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
type ButtonToggleGroupContextType = {
|
|
2
|
-
onButtonClick: (value: string) => void;
|
|
3
2
|
handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
4
3
|
pressedButtonValue?: string;
|
|
5
4
|
onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
|
|
6
5
|
allowDeselect: boolean;
|
|
7
|
-
isInGroup: boolean;
|
|
8
6
|
isDisabled: boolean;
|
|
9
7
|
firstButton?: HTMLButtonElement;
|
|
10
8
|
childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
|
|
11
9
|
/** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
|
|
12
10
|
hintTextId?: string;
|
|
11
|
+
size: "small" | "medium" | "large";
|
|
12
|
+
fullWidth?: boolean;
|
|
13
13
|
};
|
|
14
14
|
declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
|
|
15
15
|
export { ButtonToggleGroupProvider, useButtonToggleGroupContext };
|
package/esm/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"../../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{
|
|
1
|
+
import e from"../../../../__internal__/utils/createStrictContext/createStrictContext.js";const[t,o]=e({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isDisabled:!1,size:"medium"}});export{t as ButtonToggleGroupProvider,o as useButtonToggleGroupContext};
|
|
@@ -2,29 +2,47 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../../__internal__/utils/helpers/tags";
|
|
4
4
|
export interface ButtonToggleGroupProps extends MarginProps, TagProps {
|
|
5
|
-
/** Unique id for the root element of the component */
|
|
5
|
+
/** Unique id for the root element of the component. */
|
|
6
6
|
id: string;
|
|
7
7
|
/** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
|
-
/** aria-label for the group
|
|
9
|
+
/** Sets an aria-label for the group, must be provided if there is no visible label. */
|
|
10
10
|
"aria-label"?: string;
|
|
11
|
-
/**
|
|
11
|
+
/** Visible label for the group. */
|
|
12
12
|
label?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* [Legacy] Text for the label's help tooltip.
|
|
15
|
+
* @deprecated Help tooltips are no longer supported, please use the `inputHint` prop instead.
|
|
16
|
+
*/
|
|
14
17
|
labelHelp?: React.ReactNode;
|
|
15
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8),
|
|
20
|
+
* @deprecated Custom label spacing is no longer supported for this component.
|
|
21
|
+
*/
|
|
16
22
|
labelSpacing?: 1 | 2;
|
|
17
23
|
/** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
|
|
18
24
|
inputHint?: React.ReactNode;
|
|
19
25
|
/** The percentage width of the ButtonToggleGroup. */
|
|
20
26
|
inputWidth?: number | string;
|
|
21
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* [Legacy] The text for the field help.
|
|
29
|
+
* @deprecated `fieldHelp` is no longer supported, please use `inputHint` instead.
|
|
30
|
+
*/
|
|
22
31
|
fieldHelp?: string;
|
|
23
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* [Legacy] Sets the field help to inline.
|
|
34
|
+
* @deprecated `fieldHelpInline` is no longer supported.
|
|
35
|
+
*/
|
|
24
36
|
fieldHelpInline?: boolean;
|
|
25
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* [Legacy] Sets the label to be inline.
|
|
39
|
+
* @deprecated Inline labels are no longer supported.
|
|
40
|
+
*/
|
|
26
41
|
labelInline?: boolean;
|
|
27
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* [Legacy] The percentage width of the label.
|
|
44
|
+
* @deprecated `labelWidth` is no longer supported.
|
|
45
|
+
*/
|
|
28
46
|
labelWidth?: number;
|
|
29
47
|
/** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
|
|
30
48
|
fullWidth?: boolean;
|
|
@@ -32,17 +50,22 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
|
|
|
32
50
|
onChange: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
|
|
33
51
|
/** Determines which child button is selected */
|
|
34
52
|
value: string;
|
|
35
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* [Legacy] Aria label for rendered help component.
|
|
55
|
+
* @deprecated Help tooltips are no longer supported.
|
|
56
|
+
*/
|
|
36
57
|
helpAriaLabel?: string;
|
|
37
|
-
/** Allow buttons within the group to be deselected
|
|
58
|
+
/** Allow selected buttons within the group to be deselected. */
|
|
38
59
|
allowDeselect?: boolean;
|
|
39
|
-
/** Disable
|
|
60
|
+
/** Disable the group. */
|
|
40
61
|
disabled?: boolean;
|
|
62
|
+
/** Size of the ButtonToggleGroup */
|
|
63
|
+
size?: "small" | "medium" | "large";
|
|
41
64
|
/** @private @internal @ignore */
|
|
42
65
|
"data-component"?: string;
|
|
43
66
|
}
|
|
44
67
|
declare const ButtonToggleGroup: {
|
|
45
|
-
({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
|
|
68
|
+
({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, size, "data-component": dataComponent, ...props }: ButtonToggleGroupProps): React.JSX.Element;
|
|
46
69
|
displayName: string;
|
|
47
70
|
};
|
|
48
71
|
export default ButtonToggleGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as l,useState as r}from"react";import n from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledButtonToggleGroup as i,StyledLabelWrapper as o,StyledButtonToggleWrapper as a}from"./button-toggle-group.style.js";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import u from"../../../__internal__/utils/helpers/events/events.js";import{ButtonToggleGroupProvider as p}from"./__internal__/button-toggle-group.context.js";import c from"../../../__internal__/label/label.component.js";import{HintText as d}from"../../../__internal__/hint-text/hint-text.component.js";function b(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function f(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),r.forEach((function(t){b(e,t,l[t])}))}return e}function m(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const g=b=>{var{children:g,fieldHelp:h,fieldHelpInline:y,"aria-label":O,label:j,labelHelp:v,labelSpacing:_,inputHint:w,inputWidth:P,fullWidth:D=!1,labelInline:x,labelWidth:S,onChange:W,value:H,helpAriaLabel:$,id:z,allowDeselect:I=!1,disabled:E=!1,size:k="medium","data-component":A}=b,B=function(e,t){if(null==e)return{};var l,r,n=function(e,t){if(null==e)return{};var l,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}(b,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled","size","data-component"]);const C=l(null),K=w||v,L=j?`${z}-label`:void 0,T=K?`${z}-hint`:void 0,R=()=>{var e;return null===(e=C.current)||void 0===e?void 0:e.querySelectorAll("[data-button-toggle-internal]")},[q,G]=r();return e(i,m(f(m(f({id:z,role:"group"},j&&{"aria-labelledby":L}),{"aria-label":O,$size:k,$fullWidth:D,$width:P}),s(B),n(A||"button-toggle-group",B)),{children:[(j||K)&&e(o,{children:[j&&t(c,{id:L,size:k,disabled:E,children:j}),K&&t(d,{id:T,disabled:E,size:k,children:K})]}),t(a,{"data-role":"button-toggle-group-wrapper",ref:C,$size:k,$isDisabled:E,$fullWidth:D,children:t(p,{value:{handleKeyDown:e=>{const t=R();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let r;u.isLeftKey(e)?(e.preventDefault(),r=t[0===l?t.length-1:l-1]):u.isRightKey(e)&&(e.preventDefault(),r=t[(l+1)%t.length]),null==r||r.focus()},pressedButtonValue:H,onChange:W,allowDeselect:I,isDisabled:E,firstButton:q,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=R();t?e===t[0]&&G(e):G(void 0)}}),0)},hintTextId:w?T:void 0,size:k,fullWidth:D},children:g})})]}))};g.displayName="ButtonToggleGroup";export{g as default};
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
interface StyledButtonToggle {
|
|
2
|
+
$size: "small" | "medium" | "large";
|
|
3
|
+
$fullWidth?: boolean;
|
|
4
|
+
$width?: number | string;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
|
|
4
7
|
theme: object;
|
|
5
|
-
} &
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
} & StyledButtonToggle, "theme">;
|
|
9
|
+
export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
interface StyledButtonToggleWrapper {
|
|
11
|
+
$size: "small" | "medium" | "large";
|
|
12
|
+
$isDisabled?: boolean;
|
|
13
|
+
$fullWidth?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapper, never>;
|
|
16
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o,{css as a}from"styled-components";import{margin as l}from"styled-system";import e from"../../../style/themes/apply-base-theme.js";const t={small:{gap:"var(--global-space-comp-xs)",borderRadius:"var(--global-radius-action-l)"},medium:{gap:"var(--global-space-comp-s)",borderRadius:"var(--global-radius-action-xl)"},large:{gap:"var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-2-xl)"}},r=o.div.attrs(e).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-9691d771-0"})([""," ",""],(({$size:o,$fullWidth:l,$width:e})=>a(["display:flex;flex-direction:column;gap:",";"," ",""],t[o].gap,l&&a(["width:100%;"]),e&&a(["width:","%;"],e))),l),d=o.div.withConfig({displayName:"button-toggle-group.style__StyledLabelWrapper",componentId:"sc-9691d771-1"})(["display:flex;flex-direction:column;"]),i=o.div.withConfig({displayName:"button-toggle-group.style__StyledButtonToggleWrapper",componentId:"sc-9691d771-2"})(["",""],(({$size:o,$isDisabled:l,$fullWidth:e})=>a(["display:flex;flex-wrap:wrap;padding:var(--global-space-comp-xs);align-items:center;gap:var(--global-space-comp-s);"," border-radius:",";border:var(--global-borderwidth-xs) solid var(--button-typical-toggle-border-default);",""],!e&&a(["width:fit-content;"]),t[o].borderRadius,l&&a(["border-color:var(--button-typical-toggle-border-disabled);"]))));export{r as StyledButtonToggleGroup,i as StyledButtonToggleWrapper,d as StyledLabelWrapper};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { StyledButtonToggleProps } from "./button-toggle.style";
|
|
3
2
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
4
|
-
|
|
3
|
+
import { IconType } from "../icon";
|
|
4
|
+
export interface ButtonToggleProps extends TagProps {
|
|
5
5
|
/** Prop to specify the aria-label of the component */
|
|
6
6
|
"aria-label"?: string;
|
|
7
7
|
/** Prop to specify the aria-labelledby property of the component */
|
|
8
8
|
"aria-labelledby"?: string;
|
|
9
|
-
/**
|
|
9
|
+
/** Content to display within the button. */
|
|
10
10
|
children?: React.ReactNode;
|
|
11
11
|
/** Callback triggered by blur event on the button. */
|
|
12
12
|
onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
|
|
@@ -15,17 +15,30 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
|
|
|
15
15
|
/** Callback triggered by click event on the button. */
|
|
16
16
|
onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
|
|
17
17
|
/**
|
|
18
|
-
* Set the pressed state of the toggle button
|
|
19
|
-
* @deprecated
|
|
18
|
+
* Set the pressed state of the toggle button.
|
|
19
|
+
* @deprecated Please control the state of selected buttons through ButtonToggleGroup.
|
|
20
20
|
* */
|
|
21
21
|
pressed?: boolean;
|
|
22
|
-
/** An optional string by which to identify the button in
|
|
22
|
+
/** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
|
|
23
23
|
value?: string;
|
|
24
|
+
/** Icon rendered within the button. Will not be rendered if size is small. */
|
|
25
|
+
buttonIcon?: IconType;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the size of the buttonIcon
|
|
28
|
+
* @deprecated `buttonIconSize` is no longer supported.
|
|
29
|
+
*/
|
|
30
|
+
buttonIconSize?: "small" | "large";
|
|
31
|
+
/** Disable the ButtonToggle. */
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** ButtonToggle size */
|
|
34
|
+
size?: "small" | "medium" | "large";
|
|
35
|
+
/** Allow a selected button to be deselected. */
|
|
36
|
+
allowDeselect?: boolean;
|
|
24
37
|
/** @private @internal @ignore */
|
|
25
38
|
"data-component"?: string;
|
|
26
39
|
}
|
|
27
40
|
export declare const ButtonToggle: {
|
|
28
|
-
({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children,
|
|
41
|
+
({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, disabled, onBlur, onFocus, onClick, pressed, size, value, "data-component": dataComponent, ...rest }: ButtonToggleProps): React.JSX.Element;
|
|
29
42
|
displayName: string;
|
|
30
43
|
};
|
|
31
44
|
export default ButtonToggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as n}from"react";import r from"invariant";import o from"./button-toggle.style.js";import l from"../../__internal__/utils/helpers/guid/index.js";import{useButtonToggleGroupContext as i}from"./button-toggle-group/__internal__/button-toggle-group.context.js";import a from"../../__internal__/utils/helpers/tags/tags.js";import u from"../icon/icon.component.js";import c from"../button/__next__/__internal__/utils/is-icon-only.js";function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function b(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){s(e,t,n[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const d=s=>{var{"aria-label":d,"aria-labelledby":f,buttonIcon:m,buttonIconSize:y,children:g,disabled:O,onBlur:j,onFocus:h,onClick:_,pressed:v,size:w,value:P,"data-component":x}=s,I=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(s,["aria-label","aria-labelledby","buttonIcon","buttonIconSize","children","disabled","onBlur","onFocus","onClick","pressed","size","value","data-component"]);const D=n(null),S=n(l()),{handleKeyDown:k,pressedButtonValue:z,onChange:B,allowDeselect:C,isDisabled:E,firstButton:$,childButtonCallbackRef:F,hintTextId:K,size:N,fullWidth:T}=i(),W=z===P||v,R=D.current===$,V=W||!z&&R,q=w||N,A=m&&!g||c(g);return r(!(!g&&!m),"Either prop `buttonIcon` must be defined, or this node must have children"),r(!(A&&"small"===q),"Cannot render an icon-only button in small size."),e(o,p(b(p(b({className:"button-toggle","data-button-toggle-internal":!0,"aria-label":d,"aria-labelledby":f,"aria-describedby":K,"aria-pressed":!!W,disabled:O||E,id:S.current,$size:q,$active:!!W,$iconOnly:A,$fullWidth:T,value:P,onFocus:h,onBlur:j,onClick:function(e){null==_||_(e),null==B||B(e,C&&z===P?void 0:P)},onKeyDown:k},V?{tabIndex:0}:{tabIndex:-1}),{ref:e=>{D.current=e,null==F||F(e)}}),I,a(x||"button-toggle",I)),{children:[m&&"small"!==q&&t(u,{"aria-hidden":!0,type:m}),g]}))};d.displayName="ButtonToggle";export{d as ButtonToggle,d as default};
|
|
@@ -1,41 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
export type ButtonToggleIconSizes = "small" | "large";
|
|
3
|
-
export declare const heightConfig: {
|
|
4
|
-
small: number;
|
|
5
|
-
medium: number;
|
|
6
|
-
large: number;
|
|
7
|
-
};
|
|
8
|
-
export declare const fontSizeConfig: {
|
|
9
|
-
small: number;
|
|
10
|
-
medium: number;
|
|
11
|
-
large: number;
|
|
12
|
-
};
|
|
13
|
-
export declare const paddingConfig: {
|
|
14
|
-
small: number;
|
|
15
|
-
medium: number;
|
|
16
|
-
large: number;
|
|
17
|
-
};
|
|
18
|
-
declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
|
-
export interface StyledButtonToggleProps {
|
|
20
|
-
/** The icon to be rendered inside of the button */
|
|
21
|
-
buttonIcon?: IconType;
|
|
22
|
-
/** Sets the size of the buttonIcon (eg. large) */
|
|
23
|
-
buttonIconSize?: ButtonToggleIconSizes;
|
|
24
|
-
/** Disable all user interaction. */
|
|
1
|
+
interface StyledButtonToggleProps {
|
|
25
2
|
disabled?: boolean;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
3
|
+
$size: "small" | "medium" | "large";
|
|
4
|
+
$active?: boolean;
|
|
5
|
+
$iconOnly?: boolean;
|
|
6
|
+
$fullWidth?: boolean;
|
|
30
7
|
}
|
|
31
8
|
declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, {
|
|
32
9
|
theme: object;
|
|
33
10
|
} & StyledButtonToggleProps, "theme">;
|
|
34
|
-
export
|
|
35
|
-
/** Sets the size of the buttonIcon (eg. large) */
|
|
36
|
-
buttonIconSize?: ButtonToggleIconSizes;
|
|
37
|
-
hasContent?: boolean;
|
|
38
|
-
}
|
|
39
|
-
declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
|
|
40
|
-
declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
41
|
-
export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };
|
|
11
|
+
export default StyledButtonToggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a,{css as o}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import t from"../../style/utils/add-focus-styling.js";const e={small:{size:"var(--global-size-xs)",padding:"var(--global-space-comp-2-xs) var(--global-space-comp-s)",borderRadius:"12px"},medium:{size:"var(--global-size-s)",padding:"var(--global-space-comp-xs) var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-l)"},large:{size:"var(--global-size-m)",padding:"var(--global-space-comp-s) var(--global-space-comp-l)",borderRadius:"var(--global-radius-action-xl)"}},r=a.button.attrs(l).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-c4bff221-0"})(["",""],(({$active:a,$size:l,disabled:r,$iconOnly:i,$fullWidth:s})=>o(["display:inline-flex;justify-content:center;align-items:center;flex-wrap:nowrap;white-space:nowrap;cursor:pointer;gap:var(--global-space-comp-s);height:",";"," "," "," border-radius:",";border:none;background-color:transparent;color:var(--button-typical-toggle-label-default);font:var(--global-font-static-comp-medium-m);text-align:center;"," "," ",""],e[l].size,!i&&o(["padding:",";"],e[l].padding),i&&o(["width:",";"],e[l].size),s&&o(["flex:1 1 auto;"]),e[l].borderRadius,a&&o(["background:var(--button-typical-toggle-bg-active);color:var(--button-typical-toggle-label-active);"]),r&&o(["cursor:not-allowed;color:var(--button-typical-toggle-label-disabled);",""],a&&o(["background:var(--button-typical-toggle-bg-active-disabled);color:var(--button-typical-toggle-label-active-disabled);"])),!r&&o(["&:focus{","}&:hover{background:var(--button-typical-toggle-bg-hover);color:var(--button-typical-toggle-label-hover);}"],t()))));export{r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as s,getNavigator as l}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],f),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-
|
|
1
|
+
import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as s,getNavigator as l}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],f),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-f9838ea5-0"})(["",""],(({theme:o,color:r,bg:f,isInteractive:g,bgSize:h,bgShape:u,type:b,fontSize:y,disabled:v,tabIndex:_,inverse:j})=>{let k=j?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",x="transparent";const S=s(),z=l(),C=h?m.backgroundSize[h]:void 0;if(v)k="var(--colorsYin030)";else if(r){const{color:t}=n({color:r,theme:o});k=t}if(f){const{backgroundColor:t}=n({bg:f,theme:o});x=t}return t(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],k,x,C,C,u?`border-radius: ${m.backgroundShape[u]}`:"",g&&t(["&:not(:focus):hover{filter:brightness(0.9);}"]),d[b],y&&t(["font-size:",";line-height:",";"],m.iconSize[y],m.iconSize[y]),S&&"services"===b&&c(S)&&t(["margin-top:",";"],"small"===y?"-7px":"-8px"),z&&S&&"services"===b&&a(z)&&!c(S)&&t(["margin-top:-6px;"]),void 0!==_&&`\n :focus {\n ${i()}\n }\n `,e,p)}));export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o,useCallback as r}from"react";import n from"../../../../__internal__/utils/helpers/guid/index.js";import p from"../../../../hooks/__internal__/useLocale/useLocale.js";import{ButtonToggle as c}from"../../../button-toggle/button-toggle.component.js";import l from"../../../button-toggle/button-toggle-group/button-toggle-group.component.js";function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function u(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){i(e,t,o[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const g=({size:i,onChange:g,toggleValue:s,disabled:m,toggleProps:b})=>{const f=p(),O=f.time.amText(),j=f.time.pmText(),y=o(n()),{wrapperProps:d,amToggleProps:P,pmToggleProps:h}=b||{},w=r((e=>{const t=e.target.value;t!==s&&g(t)}),[s,g]);return e(l,a(u({},d),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:y.current,onChange:w,value:s,disabled:m,children:[t(c,a(u({},P),{"data-component":"am-button-toggle",value:"AM",
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as o,useCallback as r}from"react";import n from"../../../../__internal__/utils/helpers/guid/index.js";import p from"../../../../hooks/__internal__/useLocale/useLocale.js";import{ButtonToggle as c}from"../../../button-toggle/button-toggle.component.js";import l from"../../../button-toggle/button-toggle-group/button-toggle-group.component.js";function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function u(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},r=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),r.forEach((function(t){i(e,t,o[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t}(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})),e}const g=({size:i,onChange:g,toggleValue:s,disabled:m,toggleProps:b})=>{const f=p(),O=f.time.amText(),j=f.time.pmText(),y=o(n()),{wrapperProps:d,amToggleProps:P,pmToggleProps:h}=b||{},w=r((e=>{const t=e.target.value;t!==s&&g(t)}),[s,g]);return e(l,a(u({},d),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:y.current,onChange:w,value:s,disabled:m,size:i,children:[t(c,a(u({},P),{"data-component":"am-button-toggle",value:"AM",children:O})),t(c,a(u({},h),{"data-component":"pm-button-toggle",value:"PM",children:j}))]}))};g.displayName="Toggle";export{g as default};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
type ButtonToggleGroupContextType = {
|
|
2
|
-
onButtonClick: (value: string) => void;
|
|
3
2
|
handleKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
4
3
|
pressedButtonValue?: string;
|
|
5
4
|
onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
|
|
6
5
|
allowDeselect: boolean;
|
|
7
|
-
isInGroup: boolean;
|
|
8
6
|
isDisabled: boolean;
|
|
9
7
|
firstButton?: HTMLButtonElement;
|
|
10
8
|
childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
|
|
11
9
|
/** Identifier for the hint text, if it exists, that is rendered by ButtonToggleGroup */
|
|
12
10
|
hintTextId?: string;
|
|
11
|
+
size: "small" | "medium" | "large";
|
|
12
|
+
fullWidth?: boolean;
|
|
13
13
|
};
|
|
14
14
|
declare const ButtonToggleGroupProvider: import("react").Provider<ButtonToggleGroupContextType | null>, useButtonToggleGroupContext: () => ButtonToggleGroupContextType;
|
|
15
15
|
export { ButtonToggleGroupProvider, useButtonToggleGroupContext };
|
package/lib/components/button-toggle/button-toggle-group/__internal__/button-toggle-group.context.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../../../__internal__/utils/createStrictContext/createStrictContext.js");const[t,o]=e.default({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{
|
|
1
|
+
"use strict";var e=require("../../../../__internal__/utils/createStrictContext/createStrictContext.js");const[t,o]=e.default({name:"ButtonToggleGroupContext",errorMessage:"Carbon ButtonToggleGroup: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",defaultValue:{handleKeyDown:()=>{},pressedButtonValue:void 0,allowDeselect:!1,isDisabled:!1,size:"medium"}});exports.ButtonToggleGroupProvider=t,exports.useButtonToggleGroupContext=o;
|
|
@@ -2,29 +2,47 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../../__internal__/utils/helpers/tags";
|
|
4
4
|
export interface ButtonToggleGroupProps extends MarginProps, TagProps {
|
|
5
|
-
/** Unique id for the root element of the component */
|
|
5
|
+
/** Unique id for the root element of the component. */
|
|
6
6
|
id: string;
|
|
7
7
|
/** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
|
-
/** aria-label for the group
|
|
9
|
+
/** Sets an aria-label for the group, must be provided if there is no visible label. */
|
|
10
10
|
"aria-label"?: string;
|
|
11
|
-
/**
|
|
11
|
+
/** Visible label for the group. */
|
|
12
12
|
label?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* [Legacy] Text for the label's help tooltip.
|
|
15
|
+
* @deprecated Help tooltips are no longer supported, please use the `inputHint` prop instead.
|
|
16
|
+
*/
|
|
14
17
|
labelHelp?: React.ReactNode;
|
|
15
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8),
|
|
20
|
+
* @deprecated Custom label spacing is no longer supported for this component.
|
|
21
|
+
*/
|
|
16
22
|
labelSpacing?: 1 | 2;
|
|
17
23
|
/** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
|
|
18
24
|
inputHint?: React.ReactNode;
|
|
19
25
|
/** The percentage width of the ButtonToggleGroup. */
|
|
20
26
|
inputWidth?: number | string;
|
|
21
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* [Legacy] The text for the field help.
|
|
29
|
+
* @deprecated `fieldHelp` is no longer supported, please use `inputHint` instead.
|
|
30
|
+
*/
|
|
22
31
|
fieldHelp?: string;
|
|
23
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* [Legacy] Sets the field help to inline.
|
|
34
|
+
* @deprecated `fieldHelpInline` is no longer supported.
|
|
35
|
+
*/
|
|
24
36
|
fieldHelpInline?: boolean;
|
|
25
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* [Legacy] Sets the label to be inline.
|
|
39
|
+
* @deprecated Inline labels are no longer supported.
|
|
40
|
+
*/
|
|
26
41
|
labelInline?: boolean;
|
|
27
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* [Legacy] The percentage width of the label.
|
|
44
|
+
* @deprecated `labelWidth` is no longer supported.
|
|
45
|
+
*/
|
|
28
46
|
labelWidth?: number;
|
|
29
47
|
/** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
|
|
30
48
|
fullWidth?: boolean;
|
|
@@ -32,17 +50,22 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
|
|
|
32
50
|
onChange: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
|
|
33
51
|
/** Determines which child button is selected */
|
|
34
52
|
value: string;
|
|
35
|
-
/**
|
|
53
|
+
/**
|
|
54
|
+
* [Legacy] Aria label for rendered help component.
|
|
55
|
+
* @deprecated Help tooltips are no longer supported.
|
|
56
|
+
*/
|
|
36
57
|
helpAriaLabel?: string;
|
|
37
|
-
/** Allow buttons within the group to be deselected
|
|
58
|
+
/** Allow selected buttons within the group to be deselected. */
|
|
38
59
|
allowDeselect?: boolean;
|
|
39
|
-
/** Disable
|
|
60
|
+
/** Disable the group. */
|
|
40
61
|
disabled?: boolean;
|
|
62
|
+
/** Size of the ButtonToggleGroup */
|
|
63
|
+
size?: "small" | "medium" | "large";
|
|
41
64
|
/** @private @internal @ignore */
|
|
42
65
|
"data-component"?: string;
|
|
43
66
|
}
|
|
44
67
|
declare const ButtonToggleGroup: {
|
|
45
|
-
({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
|
|
68
|
+
({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, size, "data-component": dataComponent, ...props }: ButtonToggleGroupProps): React.JSX.Element;
|
|
46
69
|
displayName: string;
|
|
47
70
|
};
|
|
48
71
|
export default ButtonToggleGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../../__internal__/utils/helpers/tags/tags.js"),r=require("./button-toggle-group.style.js");require("../../../style/utils/filter-styled-system-padding-props.js");var n=require("../../../style/utils/filter-styled-system-margin-props.js"),i=require("../../../__internal__/utils/helpers/events/events.js"),o=require("./__internal__/button-toggle-group.context.js"),a=require("../../../__internal__/label/label.component.js"),u=require("../../../__internal__/hint-text/hint-text.component.js");function s(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function d(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),r.forEach((function(t){s(e,t,l[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const p=s=>{var{children:p,fieldHelp:b,fieldHelpInline:f,"aria-label":g,label:y,labelHelp:h,labelSpacing:j,inputHint:O,inputWidth:v,fullWidth:m=!1,labelInline:_,labelWidth:w,onChange:x,value:P,helpAriaLabel:S,id:D,allowDeselect:q=!1,disabled:W=!1,size:H="medium","data-component":$}=s,z=function(e,t){if(null==e)return{};var l,r,n=function(e,t){if(null==e)return{};var l,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}(s,["children","fieldHelp","fieldHelpInline","aria-label","label","labelHelp","labelSpacing","inputHint","inputWidth","fullWidth","labelInline","labelWidth","onChange","value","helpAriaLabel","id","allowDeselect","disabled","size","data-component"]);const B=t.useRef(null),T=O||h,I=y?`${D}-label`:void 0,E=T?`${D}-hint`:void 0,k=()=>{var e;return null===(e=B.current)||void 0===e?void 0:e.querySelectorAll("[data-button-toggle-internal]")},[A,C]=t.useState();return e.jsxs(r.StyledButtonToggleGroup,c(d(c(d({id:D,role:"group"},y&&{"aria-labelledby":I}),{"aria-label":g,$size:H,$fullWidth:m,$width:v}),n.default(z),l.default($||"button-toggle-group",z)),{children:[(y||T)&&e.jsxs(r.StyledLabelWrapper,{children:[y&&e.jsx(a.default,{id:I,size:H,disabled:W,children:y}),T&&e.jsx(u.HintText,{id:E,disabled:W,size:H,children:T})]}),e.jsx(r.StyledButtonToggleWrapper,{"data-role":"button-toggle-group-wrapper",ref:B,$size:H,$isDisabled:W,$fullWidth:m,children:e.jsx(o.ButtonToggleGroupProvider,{value:{handleKeyDown:e=>{const t=k();if(!t||!document.activeElement)return;const l=Array.from(t).indexOf(document.activeElement);let r;i.default.isLeftKey(e)?(e.preventDefault(),r=t[0===l?t.length-1:l-1]):i.default.isRightKey(e)&&(e.preventDefault(),r=t[(l+1)%t.length]),null==r||r.focus()},pressedButtonValue:P,onChange:x,allowDeselect:q,isDisabled:W,firstButton:A,childButtonCallbackRef:e=>{setTimeout((()=>{if(e){const t=k();t?e===t[0]&&C(e):C(void 0)}}),0)},hintTextId:O?E:void 0,size:H,fullWidth:m},children:p})})]}))};p.displayName="ButtonToggleGroup",exports.default=p;
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
interface StyledButtonToggle {
|
|
2
|
+
$size: "small" | "medium" | "large";
|
|
3
|
+
$fullWidth?: boolean;
|
|
4
|
+
$width?: number | string;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledButtonToggleGroup: import("styled-components").StyledComponent<"div", any, {
|
|
4
7
|
theme: object;
|
|
5
|
-
} &
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
} & StyledButtonToggle, "theme">;
|
|
9
|
+
export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
interface StyledButtonToggleWrapper {
|
|
11
|
+
$size: "small" | "medium" | "large";
|
|
12
|
+
$isDisabled?: boolean;
|
|
13
|
+
$fullWidth?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapper, never>;
|
|
16
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";var e=require("styled-components"),l=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js");function a(e){return e&&e.__esModule?e:{default:e}}var o=a(e);const r={small:{gap:"var(--global-space-comp-xs)",borderRadius:"var(--global-radius-action-l)"},medium:{gap:"var(--global-space-comp-s)",borderRadius:"var(--global-radius-action-xl)"},large:{gap:"var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-2-xl)"}},s=o.default.div.attrs(t.default).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-9691d771-0"})([""," ",""],(({$size:l,$fullWidth:t,$width:a})=>e.css(["display:flex;flex-direction:column;gap:",";"," ",""],r[l].gap,t&&e.css(["width:100%;"]),a&&e.css(["width:","%;"],a))),l.margin),d=o.default.div.withConfig({displayName:"button-toggle-group.style__StyledLabelWrapper",componentId:"sc-9691d771-1"})(["display:flex;flex-direction:column;"]),i=o.default.div.withConfig({displayName:"button-toggle-group.style__StyledButtonToggleWrapper",componentId:"sc-9691d771-2"})(["",""],(({$size:l,$isDisabled:t,$fullWidth:a})=>e.css(["display:flex;flex-wrap:wrap;padding:var(--global-space-comp-xs);align-items:center;gap:var(--global-space-comp-s);"," border-radius:",";border:var(--global-borderwidth-xs) solid var(--button-typical-toggle-border-default);",""],!a&&e.css(["width:fit-content;"]),r[l].borderRadius,t&&e.css(["border-color:var(--button-typical-toggle-border-disabled);"]))));exports.StyledButtonToggleGroup=s,exports.StyledButtonToggleWrapper=i,exports.StyledLabelWrapper=d;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { StyledButtonToggleProps } from "./button-toggle.style";
|
|
3
2
|
import { TagProps } from "../../__internal__/utils/helpers/tags";
|
|
4
|
-
|
|
3
|
+
import { IconType } from "../icon";
|
|
4
|
+
export interface ButtonToggleProps extends TagProps {
|
|
5
5
|
/** Prop to specify the aria-label of the component */
|
|
6
6
|
"aria-label"?: string;
|
|
7
7
|
/** Prop to specify the aria-labelledby property of the component */
|
|
8
8
|
"aria-labelledby"?: string;
|
|
9
|
-
/**
|
|
9
|
+
/** Content to display within the button. */
|
|
10
10
|
children?: React.ReactNode;
|
|
11
11
|
/** Callback triggered by blur event on the button. */
|
|
12
12
|
onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
|
|
@@ -15,17 +15,30 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps>, Tag
|
|
|
15
15
|
/** Callback triggered by click event on the button. */
|
|
16
16
|
onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
|
|
17
17
|
/**
|
|
18
|
-
* Set the pressed state of the toggle button
|
|
19
|
-
* @deprecated
|
|
18
|
+
* Set the pressed state of the toggle button.
|
|
19
|
+
* @deprecated Please control the state of selected buttons through ButtonToggleGroup.
|
|
20
20
|
* */
|
|
21
21
|
pressed?: boolean;
|
|
22
|
-
/** An optional string by which to identify the button in
|
|
22
|
+
/** An optional string by which to identify the button in an onChange handler on the parent ButtonToggleGroup. */
|
|
23
23
|
value?: string;
|
|
24
|
+
/** Icon rendered within the button. Will not be rendered if size is small. */
|
|
25
|
+
buttonIcon?: IconType;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the size of the buttonIcon
|
|
28
|
+
* @deprecated `buttonIconSize` is no longer supported.
|
|
29
|
+
*/
|
|
30
|
+
buttonIconSize?: "small" | "large";
|
|
31
|
+
/** Disable the ButtonToggle. */
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** ButtonToggle size */
|
|
34
|
+
size?: "small" | "medium" | "large";
|
|
35
|
+
/** Allow a selected button to be deselected. */
|
|
36
|
+
allowDeselect?: boolean;
|
|
24
37
|
/** @private @internal @ignore */
|
|
25
38
|
"data-component"?: string;
|
|
26
39
|
}
|
|
27
40
|
export declare const ButtonToggle: {
|
|
28
|
-
({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children,
|
|
41
|
+
({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, disabled, onBlur, onFocus, onClick, pressed, size, value, "data-component": dataComponent, ...rest }: ButtonToggleProps): React.JSX.Element;
|
|
29
42
|
displayName: string;
|
|
30
43
|
};
|
|
31
44
|
export default ButtonToggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("invariant"),r=require("./button-toggle.style.js"),o=require("../../__internal__/utils/helpers/guid/index.js"),l=require("./button-toggle-group/__internal__/button-toggle-group.context.js"),u=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("../icon/icon.component.js"),a=require("../button/__next__/__internal__/utils/is-icon-only.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(n);function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){b(e,t,n[t])}))}return e}function f(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const p=n=>{var{"aria-label":s,"aria-labelledby":b,buttonIcon:p,buttonIconSize:g,children:y,disabled:O,onBlur:j,onFocus:_,onClick:h,pressed:m,size:v,value:x,"data-component":w}=n,P=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["aria-label","aria-labelledby","buttonIcon","buttonIconSize","children","disabled","onBlur","onFocus","onClick","pressed","size","value","data-component"]);const q=t.useRef(null),B=t.useRef(o.default()),{handleKeyDown:I,pressedButtonValue:D,onChange:S,allowDeselect:k,isDisabled:z,firstButton:C,childButtonCallbackRef:E,hintTextId:T,size:$,fullWidth:F}=l.useButtonToggleGroupContext(),R=D===x||m,K=q.current===C,M=R||!D&&K,N=v||$,W=p&&!y||a.default(y);return c.default(!(!y&&!p),"Either prop `buttonIcon` must be defined, or this node must have children"),c.default(!(W&&"small"===N),"Cannot render an icon-only button in small size."),e.jsxs(r.default,f(d(f(d({className:"button-toggle","data-button-toggle-internal":!0,"aria-label":s,"aria-labelledby":b,"aria-describedby":T,"aria-pressed":!!R,disabled:O||z,id:B.current,$size:N,$active:!!R,$iconOnly:W,$fullWidth:F,value:x,onFocus:_,onBlur:j,onClick:function(e){null==h||h(e),null==S||S(e,k&&D===x?void 0:x)},onKeyDown:I},M?{tabIndex:0}:{tabIndex:-1}),{ref:e=>{q.current=e,null==E||E(e)}}),P,u.default(w||"button-toggle",P)),{children:[p&&"small"!==N&&e.jsx(i.default,{"aria-hidden":!0,type:p}),y]}))};p.displayName="ButtonToggle",exports.ButtonToggle=p,exports.default=p;
|
|
@@ -1,41 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
export type ButtonToggleIconSizes = "small" | "large";
|
|
3
|
-
export declare const heightConfig: {
|
|
4
|
-
small: number;
|
|
5
|
-
medium: number;
|
|
6
|
-
large: number;
|
|
7
|
-
};
|
|
8
|
-
export declare const fontSizeConfig: {
|
|
9
|
-
small: number;
|
|
10
|
-
medium: number;
|
|
11
|
-
large: number;
|
|
12
|
-
};
|
|
13
|
-
export declare const paddingConfig: {
|
|
14
|
-
small: number;
|
|
15
|
-
medium: number;
|
|
16
|
-
large: number;
|
|
17
|
-
};
|
|
18
|
-
declare const StyledButtonToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
|
-
export interface StyledButtonToggleProps {
|
|
20
|
-
/** The icon to be rendered inside of the button */
|
|
21
|
-
buttonIcon?: IconType;
|
|
22
|
-
/** Sets the size of the buttonIcon (eg. large) */
|
|
23
|
-
buttonIconSize?: ButtonToggleIconSizes;
|
|
24
|
-
/** Disable all user interaction. */
|
|
1
|
+
interface StyledButtonToggleProps {
|
|
25
2
|
disabled?: boolean;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
3
|
+
$size: "small" | "medium" | "large";
|
|
4
|
+
$active?: boolean;
|
|
5
|
+
$iconOnly?: boolean;
|
|
6
|
+
$fullWidth?: boolean;
|
|
30
7
|
}
|
|
31
8
|
declare const StyledButtonToggle: import("styled-components").StyledComponent<"button", any, {
|
|
32
9
|
theme: object;
|
|
33
10
|
} & StyledButtonToggleProps, "theme">;
|
|
34
|
-
export
|
|
35
|
-
/** Sets the size of the buttonIcon (eg. large) */
|
|
36
|
-
buttonIconSize?: ButtonToggleIconSizes;
|
|
37
|
-
hasContent?: boolean;
|
|
38
|
-
}
|
|
39
|
-
declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
|
|
40
|
-
declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
41
|
-
export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };
|
|
11
|
+
export default StyledButtonToggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/add-focus-styling.js");function t(a){return a&&a.__esModule?a:{default:a}}const o={small:{size:"var(--global-size-xs)",padding:"var(--global-space-comp-2-xs) var(--global-space-comp-s)",borderRadius:"12px"},medium:{size:"var(--global-size-s)",padding:"var(--global-space-comp-xs) var(--global-space-comp-m)",borderRadius:"var(--global-radius-action-l)"},large:{size:"var(--global-size-m)",padding:"var(--global-space-comp-s) var(--global-space-comp-l)",borderRadius:"var(--global-radius-action-xl)"}},s=t(a).default.button.attrs(e.default).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-c4bff221-0"})(["",""],(({$active:e,$size:t,disabled:s,$iconOnly:r,$fullWidth:c})=>a.css(["display:inline-flex;justify-content:center;align-items:center;flex-wrap:nowrap;white-space:nowrap;cursor:pointer;gap:var(--global-space-comp-s);height:",";"," "," "," border-radius:",";border:none;background-color:transparent;color:var(--button-typical-toggle-label-default);font:var(--global-font-static-comp-medium-m);text-align:center;"," "," ",""],o[t].size,!r&&a.css(["padding:",";"],o[t].padding),r&&a.css(["width:",";"],o[t].size),c&&a.css(["flex:1 1 auto;"]),o[t].borderRadius,e&&a.css(["background:var(--button-typical-toggle-bg-active);color:var(--button-typical-toggle-label-active);"]),s&&a.css(["cursor:not-allowed;color:var(--button-typical-toggle-label-disabled);",""],e&&a.css(["background:var(--button-typical-toggle-bg-active-disabled);color:var(--button-typical-toggle-label-active-disabled);"])),!s&&a.css(["&:focus{","}&:hover{background:var(--button-typical-toggle-bg-hover);color:var(--button-typical-toggle-label-hover);}"],l.default()))));exports.default=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),s=require("../../__internal__/utils/helpers/browser-type-check/index.js"),l=require("./icon-config.js"),a=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),s=require("../../__internal__/utils/helpers/browser-type-check/index.js"),l=require("./icon-config.js"),a=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var d=u(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],c.StyledButton),g=d.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-f9838ea5-0"})(["",""],(({theme:o,color:c,bg:u,isInteractive:d,bgSize:g,bgShape:m,type:b,fontSize:h,disabled:y,tabIndex:v,inverse:p})=>{let _=p?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",j="transparent";const q=n.getWindow(),x=n.getNavigator(),S=g?l.default.backgroundSize[g]:void 0;if(y)_="var(--colorsYin030)";else if(c){const{color:e}=i.default({color:c,theme:o});_=e}if(u){const{backgroundColor:e}=i.default({bg:u,theme:o});j=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],_,j,S,S,m?`border-radius: ${l.default.backgroundShape[m]}`:"",d&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),a.default[b],h&&e.css(["font-size:",";line-height:",";"],l.default.iconSize[h],l.default.iconSize[h]),q&&"services"===b&&s.default(q)&&e.css(["margin-top:",";"],"small"===h?"-7px":"-8px"),x&&q&&"services"===b&&s.isSafari(x)&&!s.default(q)&&e.css(["margin-top:-6px;"]),void 0!==v&&`\n :focus {\n ${r.default()}\n }\n `,t.margin,f)}));exports.default=g;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/helpers/guid/index.js"),o=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../button-toggle/button-toggle.component.js"),u=require("../../../button-toggle/button-toggle-group/button-toggle-group.component.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){l(e,t,r[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../__internal__/utils/helpers/guid/index.js"),o=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../../button-toggle/button-toggle.component.js"),u=require("../../../button-toggle/button-toggle-group/button-toggle-group.component.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){l(e,t,r[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g=({size:l,onChange:g,toggleValue:i,disabled:s,toggleProps:p})=>{const b=o.default(),f=b.time.amText(),d=b.time.pmText(),j=t.useRef(r.default()),{wrapperProps:m,amToggleProps:O,pmToggleProps:y}=p||{},P=t.useCallback((e=>{const t=e.target.value;t!==i&&g(t)}),[i,g]);return e.jsxs(u.default,a(c({},m),{"data-component":"time-button-toggle-group",m:"0px 0px 0px 16px",id:j.current,onChange:P,value:i,disabled:s,size:l,children:[e.jsx(n.ButtonToggle,a(c({},O),{"data-component":"am-button-toggle",value:"AM",children:f})),e.jsx(n.ButtonToggle,a(c({},y),{"data-component":"pm-button-toggle",value:"PM",children:d}))]}))};g.displayName="Toggle",exports.default=g;
|
package/package.json
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyledButtonToggleIconProps } from "./button-toggle.style";
|
|
3
|
-
import { IconType } from "../icon";
|
|
4
|
-
export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
|
|
5
|
-
/**
|
|
6
|
-
* <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
|
|
7
|
-
*
|
|
8
|
-
* buttonIcon to render.
|
|
9
|
-
*/
|
|
10
|
-
buttonIcon: IconType;
|
|
11
|
-
/** Sets the icon in the disabled state */
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
}
|
|
14
|
-
declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => React.JSX.Element;
|
|
15
|
-
export default ButtonToggleIcon;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import"react";import{StyledButtonToggleIcon as o}from"./button-toggle.style.js";import n from"../icon/icon.component.js";const e=({buttonIcon:e,buttonIconSize:i,disabled:r,hasContent:a})=>t(o,{buttonIconSize:i,hasContent:a,"data-role":"button-toggle-icon",children:t(n,{"aria-hidden":!0,type:e,fontSize:i,disabled:r})});export{e as default};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyledButtonToggleIconProps } from "./button-toggle.style";
|
|
3
|
-
import { IconType } from "../icon";
|
|
4
|
-
export interface ButtonToggleIconProps extends StyledButtonToggleIconProps {
|
|
5
|
-
/**
|
|
6
|
-
* <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
|
|
7
|
-
*
|
|
8
|
-
* buttonIcon to render.
|
|
9
|
-
*/
|
|
10
|
-
buttonIcon: IconType;
|
|
11
|
-
/** Sets the icon in the disabled state */
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
}
|
|
14
|
-
declare const ButtonToggleIcon: ({ buttonIcon, buttonIconSize, disabled, hasContent, }: ButtonToggleIconProps) => React.JSX.Element;
|
|
15
|
-
export default ButtonToggleIcon;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./button-toggle.style.js"),o=require("../icon/icon.component.js");exports.default=({buttonIcon:n,buttonIconSize:r,disabled:i,hasContent:u})=>e.jsx(t.StyledButtonToggleIcon,{buttonIconSize:r,hasContent:u,"data-role":"button-toggle-icon",children:e.jsx(o.default,{"aria-hidden":!0,type:n,fontSize:r,disabled:i})});
|