carbon-react 155.5.4 → 155.5.5
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/switch/switch.component.d.ts +3 -1
- package/esm/components/switch/switch.component.js +1 -1
- package/esm/components/switch/switch.style.d.ts +1 -0
- package/esm/components/switch/switch.style.js +1 -1
- package/lib/components/switch/switch.component.d.ts +3 -1
- package/lib/components/switch/switch.component.js +1 -1
- package/lib/components/switch/switch.style.d.ts +1 -0
- package/lib/components/switch/switch.style.js +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
|
|
|
7
7
|
adaptiveLabelBreakpoint?: number;
|
|
8
8
|
/** Set the default value of the Switch if component is meant to be used as uncontrolled */
|
|
9
9
|
defaultChecked?: boolean;
|
|
10
|
-
/**
|
|
10
|
+
/** When true label is inline */
|
|
11
11
|
labelInline?: boolean;
|
|
12
12
|
/** Triggers loading animation */
|
|
13
13
|
loading?: boolean;
|
|
@@ -23,6 +23,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
|
|
|
23
23
|
isDarkBackground?: boolean;
|
|
24
24
|
/** Render the ValidationMessage above the Switch input when validationRedesignOptIn flag is set */
|
|
25
25
|
validationMessagePositionTop?: boolean;
|
|
26
|
+
/** Label width, as a percentage, when labelInline is true */
|
|
27
|
+
labelWidth?: number;
|
|
26
28
|
}
|
|
27
29
|
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
28
30
|
export default Switch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as o,useRef as t,useState as a,useCallback as l}from"react";import{Box as d}from"../box/box.component.js";import s from"../../__internal__/checkable-input/checkable-input.component.js";import c from"../../__internal__/label/label.component.js";import{TooltipProvider as p}from"../../__internal__/tooltip-provider/index.js";import u from"../carbon-provider/__internal__/new-validation.context.js";import b from"../../__internal__/utils/logger/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import
|
|
1
|
+
import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as o,useRef as t,useState as a,useCallback as l}from"react";import{Box as d}from"../box/box.component.js";import s from"../../__internal__/checkable-input/checkable-input.component.js";import c from"../../__internal__/label/label.component.js";import{TooltipProvider as p}from"../../__internal__/tooltip-provider/index.js";import u from"../carbon-provider/__internal__/new-validation.context.js";import b from"../../__internal__/utils/logger/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import g from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import f,{ErrorBorder as h}from"./switch.style.js";import v from"./__internal__/switch-slider.component.js";import k from"../../__internal__/utils/helpers/guid/index.js";import{HintText as w}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";function _(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){_(e,r,n[r])}))}return e}function j(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let B=!1;const D=i.forwardRef(((i,_)=>{var{autoFocus:D,id:P,label:x,onChange:I,onBlur:S,onFocus:H,value:L,checked:F,defaultChecked:z,disabled:C,loading:q,reverse:A=!0,required:T,isOptional:$,validationOnLabel:M=!1,labelInline:R=!1,labelSpacing:W,labelHelp:E,labelWidth:U,fieldHelpInline:Y,size:N="small",name:V,adaptiveLabelBreakpoint:G,tooltipPosition:J,error:K,warning:Q,info:X,"data-element":Z,"data-role":ee,helpAriaLabel:re,isDarkBackground:ne=!1,validationMessagePositionTop:ie=!0}=i,oe=function(e,r){if(null==e)return{};var n,i,o=function(e,r){if(null==e)return{};var n,i,o={},t=Object.keys(e);for(i=0;i<t.length;i++)n=t[i],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(i=0;i<t.length;i++)n=t[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(i,["autoFocus","id","label","onChange","onBlur","onFocus","value","checked","defaultChecked","disabled","loading","reverse","required","isOptional","validationOnLabel","labelInline","labelSpacing","labelHelp","labelWidth","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground","validationMessagePositionTop"]);const te=void 0!==F,{validationRedesignOptIn:ae}=o(u),le=t(`${k()}-label`),de=t(`${k()}-hint`),se=t(`${k()}-message`),[ce,pe]=a(z||!1);B||I||(B=!0,b.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const ue=l((e=>{q?e.preventDefault():(pe(e.target.checked),null==I||I(e))}),[pe,I,q]),be=g(G);let me=R;G&&(me=be);const ge=!(!R||A)||M,fe=y(oe),he=O({"data-component":"switch","data-role":ee,"data-element":Z,checked:te?F:ce,isDarkBackground:ne,fieldHelpInline:Y,labelInline:me,labelSpacing:W,reverse:!A,size:N},fe),ve={checked:te?F:ce,disabled:C,loading:q,isDarkBackground:ne,size:N,error:K,warning:Q,info:X,useValidationIcon:!ae&&!ge&&!C},ke=j(O({autoFocus:D,error:K,warning:Q,info:X,disabled:C,loading:q,checked:te?F:ce,label:x,labelHelp:E,labelWidth:U,fieldHelpInline:Y,labelInline:me,labelSpacing:W,onBlur:S,isDarkBackground:ne,onFocus:H,onChange:te?I:ue,id:P,name:V,value:L,type:"checkbox",role:"switch",reverse:!A,validationOnLabel:ge&&!C,ref:_,required:T,isOptional:$},oe),{"data-component":void 0}),we=O({"data-component":"switch","data-role":ee,"data-element":Z,checked:te?F:ce,labelInline:me,isDarkBackground:ne,size:N,reverse:!A,validationRedesignOptIn:ae},fe),ye={checked:te?F:ce,disabled:C,loading:q,isDarkBackground:ne,size:N,error:K,warning:Q},_e=O({autoFocus:D,error:!!K,warning:Q,disabled:C,loading:q,checked:te?F:ce,onBlur:S,isDarkBackground:ne,onFocus:H,onChange:te?I:ue,id:P,name:V,value:L,type:"checkbox",role:"switch",ref:_,required:T,isOptional:$},oe),Oe=K||Q,je=[E&&de.current,Oe&&se.current].filter(Boolean).join(" ");if(!ae)return e(r,{children:e(p,{helpAriaLabel:re,tooltipPosition:J,children:e(f,j(O({},he),{children:e(s,j(O({},ke),{children:e(v,O({},ve))}))}))})});const Be=K||Q?R?3:0:R?1:0,De=R?"row":"column",Pe=R?"row-reverse":"column",xe=!R||K||Q||X?"":"center";return n(r,{children:[e(f,j(O({},we),{children:n(d,{"data-role":"field-reverse-wrapper",display:"flex",alignItems:K||Q?"flex-start":void 0,flexDirection:A?De:Pe,width:R?"100%":"auto",children:[n(d,j(O({"data-role":"label-wrapper",alignSelf:xe},U&&{width:`${U}%`}),{children:[e(c,{isDarkBackground:ne,labelId:le.current,disabled:C,isRequired:T,optional:$,children:x}),E&&e(d,{"data-role":"hint-text-wrapper",mb:R?0:1,children:e(w,{"data-role":"hint-text",fontWeight:"400",id:de.current,isDarkBackground:ne,marginTop:"8px",children:E})})]})),n(d,{ml:A?Be:0,mr:A?0:Be,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[ie&&n(r,{children:[e(m,{error:K,warning:Q,validationId:se.current,isDarkBackground:ne,validationMessagePositionTop:ie,"data-role":"validation-message-top"}),Oe&&e(h,{"data-role":"error-border",warning:!(K||!Q),reverse:!A,isDarkBackground:ne})]}),e(s,j(O({ariaLabelledBy:`${x&&le.current}`,ariaDescribedBy:je},_e),{fieldHelp:R?void 0:oe.fieldHelp,children:e(v,O({},ye))})),!ie&&n(r,{children:[e(m,{error:K,warning:Q,validationId:se.current,isDarkBackground:ne,validationMessagePositionTop:ie,"data-role":"validation-message-bottom"}),Oe&&e(h,{"data-role":"error-border",warning:!(K||!Q),reverse:!A,isDarkBackground:ne})]})]})]})})),R&&oe.fieldHelp&&e(d,{color:ne?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:oe.fieldHelp})]})}));D.displayName="Switch";export{D as Switch,D as default};
|
|
@@ -2,6 +2,7 @@ import type { ThemeObject } from "../../style/themes/theme.types";
|
|
|
2
2
|
import { SwitchProps } from "./switch.component";
|
|
3
3
|
interface StyledSwitchProps extends Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size"> {
|
|
4
4
|
theme: ThemeObject;
|
|
5
|
+
validationRedesignOptIn?: boolean;
|
|
5
6
|
}
|
|
6
7
|
export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
|
|
7
8
|
reverse: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as i}from"styled-components";import{margin as e}from"styled-system";import{StyledCheckableInput as n}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import r from"../../__internal__/field-help/field-help.style.js";import{FieldLineStyle as l}from"../../__internal__/form-field/form-field.style.js";import{StyledLabelContainer as a}from"../../__internal__/label/label.style.js";import
|
|
1
|
+
import t,{css as i}from"styled-components";import{margin as e}from"styled-system";import{StyledCheckableInput as n}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import r from"../../__internal__/field-help/field-help.style.js";import{FieldLineStyle as l}from"../../__internal__/form-field/form-field.style.js";import{StyledLabelContainer as a}from"../../__internal__/label/label.style.js";import m from"../../__internal__/validations/validation-icon.style.js";import p from"../../style/themes/apply-base-theme.js";import s from"../../style/utils/add-focus-styling.js";import{StyledSwitchSlider as d}from"./__internal__/switch-slider.style.js";const f=t.span.withConfig({displayName:"switch.style__ErrorBorder",componentId:"sc-e7781d44-0"})(["",""],(({reverse:t,warning:e,isDarkBackground:n})=>i(["position:absolute;z-index:6;width:2px;background-color:",";",":-12px;bottom:-4px;top:2px;"],e?"var(--colorsSemanticCaution500)":n?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",t?"right":"left"))),c=t.div.attrs(p).withConfig({displayName:"switch.style__StyledSwitch",componentId:"sc-e7781d44-1"})(["",""],(({fieldHelpInline:t,labelInline:p,reverse:f,size:c,validationRedesignOptIn:g})=>i(["margin-bottom:var(--fieldSpacing);"," ","{flex-flow:",";","}display:flex;flex-flow:",";",",","{border:none;box-sizing:border-box;height:24px;flex-basis:100%;margin-left:0;}","{width:100%;}","{width:min-content;}",":not([disabled]){&:focus ~ ","{","}}","{margin-left:0;}","{",";margin-bottom:8px;","{position:relative;display:inline-block;}}"," "," "," ",""],e,l,p?"row wrap":"column wrap",!p&&t&&i(["display:grid;grid-template-columns:max-content max-content;"]),p?"row wrap":"column wrap",n,o,o,n,o,d,s(),r,a,!p&&i(["padding:0;"]),m,t&&i(["","{margin:0;}"],r),f&&i(["",""],!p&&i(["","{margin-top:8px;}",""],a,t&&i(["","{margin-top:8px;}"],r))),p&&i(["","{flex-basis:auto;}","{","}","{margin-bottom:0;}","{margin-bottom:0;margin-top:0;}"," ",""],n,l,f&&g&&i(["justify-content:flex-end;"]),a,r,f&&i(["","{margin-left:0;margin-top:0;}",""],n,!t&&i(["","{margin-left:60px;}"],r)),t&&i([""," ","{margin-right:10px;}","{margin-left:0;align-self:center;}"],!f&&`\n ${n} {\n margin-left: 10px;\n }\n `,a,r)),"large"===c&&i(["",",",",","{height:44px;min-width:fit-content;}"," ",""],n,o,d,p&&!t&&f&&i(["","{padding:10px 0;}"],r),p&&i(["","{margin-top:1px;padding-top:10px;padding-bottom:10px;}",""],a,!t&&f&&i(["","{margin-left:78px;}"],r))))));export{f as ErrorBorder,c as default};
|
|
@@ -7,7 +7,7 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
|
|
|
7
7
|
adaptiveLabelBreakpoint?: number;
|
|
8
8
|
/** Set the default value of the Switch if component is meant to be used as uncontrolled */
|
|
9
9
|
defaultChecked?: boolean;
|
|
10
|
-
/**
|
|
10
|
+
/** When true label is inline */
|
|
11
11
|
labelInline?: boolean;
|
|
12
12
|
/** Triggers loading animation */
|
|
13
13
|
loading?: boolean;
|
|
@@ -23,6 +23,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
|
|
|
23
23
|
isDarkBackground?: boolean;
|
|
24
24
|
/** Render the ValidationMessage above the Switch input when validationRedesignOptIn flag is set */
|
|
25
25
|
validationMessagePositionTop?: boolean;
|
|
26
|
+
/** Label width, as a percentage, when labelInline is true */
|
|
27
|
+
labelWidth?: number;
|
|
26
28
|
}
|
|
27
29
|
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
28
30
|
export default Switch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),n=require("../box/box.component.js"),a=require("../../__internal__/checkable-input/checkable-input.component.js"),t=require("../../__internal__/label/label.component.js"),i=require("../../__internal__/tooltip-provider/index.js"),l=require("../carbon-provider/__internal__/new-validation.context.js"),o=require("../../__internal__/utils/logger/index.js"),s=require("../../__internal__/validation-message/validation-message.component.js"),d=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),c=require("./switch.style.js"),u=require("./__internal__/switch-slider.component.js"),p=require("../../__internal__/utils/helpers/guid/index.js"),b=require("../../__internal__/hint-text/hint-text.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var f=require("../../style/utils/filter-styled-system-margin-props.js");function g(e){return e&&e.__esModule?e:{default:e}}function h(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),n=require("../box/box.component.js"),a=require("../../__internal__/checkable-input/checkable-input.component.js"),t=require("../../__internal__/label/label.component.js"),i=require("../../__internal__/tooltip-provider/index.js"),l=require("../carbon-provider/__internal__/new-validation.context.js"),o=require("../../__internal__/utils/logger/index.js"),s=require("../../__internal__/validation-message/validation-message.component.js"),d=require("../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),c=require("./switch.style.js"),u=require("./__internal__/switch-slider.component.js"),p=require("../../__internal__/utils/helpers/guid/index.js"),b=require("../../__internal__/hint-text/hint-text.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var f=require("../../style/utils/filter-styled-system-margin-props.js");function g(e){return e&&e.__esModule?e:{default:e}}function h(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function v(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(r){h(e,r,n[r])}))}return e}function j(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let k=!1;const m=g(r).default.forwardRef(((g,h)=>{var{autoFocus:m,id:x,label:_,onChange:w,onBlur:y,onFocus:O,value:B,checked:P,defaultChecked:q,disabled:D,loading:I,reverse:S=!0,required:F,isOptional:H,validationOnLabel:L=!1,labelInline:C=!1,labelSpacing:R,labelHelp:T,labelWidth:z,fieldHelpInline:M,size:A="small",name:E,adaptiveLabelBreakpoint:$,tooltipPosition:W,error:U,warning:Y,info:N,"data-element":V,"data-role":G,helpAriaLabel:J,isDarkBackground:K=!1,validationMessagePositionTop:Q=!0}=g,X=function(e,r){if(null==e)return{};var n,a,t=function(e,r){if(null==e)return{};var n,a,t={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(g,["autoFocus","id","label","onChange","onBlur","onFocus","value","checked","defaultChecked","disabled","loading","reverse","required","isOptional","validationOnLabel","labelInline","labelSpacing","labelHelp","labelWidth","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground","validationMessagePositionTop"]);const Z=void 0!==P,{validationRedesignOptIn:ee}=r.useContext(l.default),re=r.useRef(`${p.default()}-label`),ne=r.useRef(`${p.default()}-hint`),ae=r.useRef(`${p.default()}-message`),[te,ie]=r.useState(q||!1);k||w||(k=!0,o.default.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const le=r.useCallback((e=>{I?e.preventDefault():(ie(e.target.checked),null==w||w(e))}),[ie,w,I]),oe=d.default($);let se=C;$&&(se=oe);const de=!(!C||S)||L,ce=f.default(X),ue=v({"data-component":"switch","data-role":G,"data-element":V,checked:Z?P:te,isDarkBackground:K,fieldHelpInline:M,labelInline:se,labelSpacing:R,reverse:!S,size:A},ce),pe={checked:Z?P:te,disabled:D,loading:I,isDarkBackground:K,size:A,error:U,warning:Y,info:N,useValidationIcon:!ee&&!de&&!D},be=j(v({autoFocus:m,error:U,warning:Y,info:N,disabled:D,loading:I,checked:Z?P:te,label:_,labelHelp:T,labelWidth:z,fieldHelpInline:M,labelInline:se,labelSpacing:R,onBlur:y,isDarkBackground:K,onFocus:O,onChange:Z?w:le,id:x,name:E,value:B,type:"checkbox",role:"switch",reverse:!S,validationOnLabel:de&&!D,ref:h,required:F,isOptional:H},X),{"data-component":void 0}),fe=v({"data-component":"switch","data-role":G,"data-element":V,checked:Z?P:te,labelInline:se,isDarkBackground:K,size:A,reverse:!S,validationRedesignOptIn:ee},ce),ge={checked:Z?P:te,disabled:D,loading:I,isDarkBackground:K,size:A,error:U,warning:Y},he=v({autoFocus:m,error:!!U,warning:Y,disabled:D,loading:I,checked:Z?P:te,onBlur:y,isDarkBackground:K,onFocus:O,onChange:Z?w:le,id:x,name:E,value:B,type:"checkbox",role:"switch",ref:h,required:F,isOptional:H},X),ve=U||Y,je=[T&&ne.current,ve&&ae.current].filter(Boolean).join(" ");if(!ee)return e.jsx(e.Fragment,{children:e.jsx(i.TooltipProvider,{helpAriaLabel:J,tooltipPosition:W,children:e.jsx(c.default,j(v({},ue),{children:e.jsx(a.default,j(v({},be),{children:e.jsx(u.default,v({},pe))}))}))})});const ke=U||Y?C?3:0:C?1:0,me=C?"row":"column",xe=C?"row-reverse":"column",_e=!C||U||Y||N?"":"center";return e.jsxs(e.Fragment,{children:[e.jsx(c.default,j(v({},fe),{children:e.jsxs(n.Box,{"data-role":"field-reverse-wrapper",display:"flex",alignItems:U||Y?"flex-start":void 0,flexDirection:S?me:xe,width:C?"100%":"auto",children:[e.jsxs(n.Box,j(v({"data-role":"label-wrapper",alignSelf:_e},z&&{width:`${z}%`}),{children:[e.jsx(t.default,{isDarkBackground:K,labelId:re.current,disabled:D,isRequired:F,optional:H,children:_}),T&&e.jsx(n.Box,{"data-role":"hint-text-wrapper",mb:C?0:1,children:e.jsx(b.HintText,{"data-role":"hint-text",fontWeight:"400",id:ne.current,isDarkBackground:K,marginTop:"8px",children:T})})]})),e.jsxs(n.Box,{ml:S?ke:0,mr:S?0:ke,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[Q&&e.jsxs(e.Fragment,{children:[e.jsx(s.default,{error:U,warning:Y,validationId:ae.current,isDarkBackground:K,validationMessagePositionTop:Q,"data-role":"validation-message-top"}),ve&&e.jsx(c.ErrorBorder,{"data-role":"error-border",warning:!(U||!Y),reverse:!S,isDarkBackground:K})]}),e.jsx(a.default,j(v({ariaLabelledBy:`${_&&re.current}`,ariaDescribedBy:je},he),{fieldHelp:C?void 0:X.fieldHelp,children:e.jsx(u.default,v({},ge))})),!Q&&e.jsxs(e.Fragment,{children:[e.jsx(s.default,{error:U,warning:Y,validationId:ae.current,isDarkBackground:K,validationMessagePositionTop:Q,"data-role":"validation-message-bottom"}),ve&&e.jsx(c.ErrorBorder,{"data-role":"error-border",warning:!(U||!Y),reverse:!S,isDarkBackground:K})]})]})]})})),C&&X.fieldHelp&&e.jsx(n.Box,{color:K?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:X.fieldHelp})]})}));m.displayName="Switch",exports.Switch=m,exports.default=m;
|
|
@@ -2,6 +2,7 @@ import type { ThemeObject } from "../../style/themes/theme.types";
|
|
|
2
2
|
import { SwitchProps } from "./switch.component";
|
|
3
3
|
interface StyledSwitchProps extends Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size"> {
|
|
4
4
|
theme: ThemeObject;
|
|
5
|
+
validationRedesignOptIn?: boolean;
|
|
5
6
|
}
|
|
6
7
|
export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
|
|
7
8
|
reverse: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),l=require("../../__internal__/checkable-input/checkable-input.style.js"),i=require("../../__internal__/checkable-input/hidden-checkable-input.style.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),l=require("../../__internal__/checkable-input/checkable-input.style.js"),i=require("../../__internal__/checkable-input/hidden-checkable-input.style.js"),n=require("../../__internal__/field-help/field-help.style.js"),a=require("../../__internal__/form-field/form-field.style.js"),r=require("../../__internal__/label/label.style.js"),s=require("../../__internal__/validations/validation-icon.style.js"),d=require("../../style/themes/apply-base-theme.js"),o=require("../../style/utils/add-focus-styling.js"),c=require("./__internal__/switch-slider.style.js");function p(e){return e&&e.__esModule?e:{default:e}}var u=p(e);const f=u.default.span.withConfig({displayName:"switch.style__ErrorBorder",componentId:"sc-e7781d44-0"})(["",""],(({reverse:t,warning:l,isDarkBackground:i})=>{const n=i?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)";return e.css(["position:absolute;z-index:6;width:2px;background-color:",";",":-12px;bottom:-4px;top:2px;"],l?"var(--colorsSemanticCaution500)":n,t?"right":"left")})),m=u.default.div.attrs(d.default).withConfig({displayName:"switch.style__StyledSwitch",componentId:"sc-e7781d44-1"})(["",""],(({fieldHelpInline:d,labelInline:p,reverse:u,size:f,validationRedesignOptIn:m})=>e.css(["margin-bottom:var(--fieldSpacing);"," ","{flex-flow:",";","}display:flex;flex-flow:",";",",","{border:none;box-sizing:border-box;height:24px;flex-basis:100%;margin-left:0;}","{width:100%;}","{width:min-content;}",":not([disabled]){&:focus ~ ","{","}}","{margin-left:0;}","{",";margin-bottom:8px;","{position:relative;display:inline-block;}}"," "," "," ",""],t.margin,a.FieldLineStyle,p?"row wrap":"column wrap",!p&&d&&e.css(["display:grid;grid-template-columns:max-content max-content;"]),p?"row wrap":"column wrap",l.StyledCheckableInput,i.default,i.default,l.StyledCheckableInput,i.default,c.StyledSwitchSlider,o.default(),n.default,r.StyledLabelContainer,!p&&e.css(["padding:0;"]),s.default,d&&e.css(["","{margin:0;}"],n.default),u&&e.css(["",""],!p&&e.css(["","{margin-top:8px;}",""],r.StyledLabelContainer,d&&e.css(["","{margin-top:8px;}"],n.default))),p&&e.css(["","{flex-basis:auto;}","{","}","{margin-bottom:0;}","{margin-bottom:0;margin-top:0;}"," ",""],l.StyledCheckableInput,a.FieldLineStyle,u&&m&&e.css(["justify-content:flex-end;"]),r.StyledLabelContainer,n.default,u&&e.css(["","{margin-left:0;margin-top:0;}",""],l.StyledCheckableInput,!d&&e.css(["","{margin-left:60px;}"],n.default)),d&&e.css([""," ","{margin-right:10px;}","{margin-left:0;align-self:center;}"],!u&&`\n ${l.StyledCheckableInput} {\n margin-left: 10px;\n }\n `,r.StyledLabelContainer,n.default)),"large"===f&&e.css(["",",",",","{height:44px;min-width:fit-content;}"," ",""],l.StyledCheckableInput,i.default,c.StyledSwitchSlider,p&&!d&&u&&e.css(["","{padding:10px 0;}"],n.default),p&&e.css(["","{margin-top:1px;padding-top:10px;padding-bottom:10px;}",""],r.StyledLabelContainer,!d&&u&&e.css(["","{margin-left:78px;}"],n.default))))));exports.ErrorBorder=f,exports.default=m;
|