@elliemae/ds-button-v2 3.52.1 → 3.53.0-alpha.2
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/cjs/parts/SharedButtonBaseline/DSButton.js +6 -2
- package/dist/cjs/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js +4 -3
- package/dist/cjs/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/config/useValidateProps.js +1 -2
- package/dist/cjs/parts/SharedButtonBaseline/config/useValidateProps.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/styles.js +40 -33
- package/dist/cjs/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js +7 -3
- package/dist/esm/parts/SharedButtonBaseline/DSButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js +4 -3
- package/dist/esm/parts/SharedButtonBaseline/config/useButton.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/config/useValidateProps.js +1 -2
- package/dist/esm/parts/SharedButtonBaseline/config/useValidateProps.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/styles.js +40 -33
- package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/types/parts/DSButtonV2/react-desc-prop-types.d.ts +0 -1
- package/dist/types/parts/DSButtonV3/react-desc-prop-types.d.ts +2 -453
- package/dist/types/parts/SharedButtonBaseline/react-desc-prop-types.d.ts +0 -1
- package/dist/types/parts/SharedButtonBaseline/styles.d.ts +1 -0
- package/dist/types/tests/DSButtonV3.type-submit-with-form.test.d.ts +1 -0
- package/package.json +7 -6
|
@@ -38,6 +38,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
38
38
|
var import_useButton = require("./config/useButton.js");
|
|
39
39
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
40
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
41
|
+
var import_styles = require("./styles.js");
|
|
41
42
|
const DSButton = (props) => {
|
|
42
43
|
const {
|
|
43
44
|
propsWithDefault,
|
|
@@ -53,7 +54,7 @@ const DSButton = (props) => {
|
|
|
53
54
|
const { disabled, ...restGlobalProps } = globalProps;
|
|
54
55
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
55
56
|
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
56
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
57
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
57
58
|
ButtonRenderer,
|
|
58
59
|
{
|
|
59
60
|
"aria-disabled": disabled || applyAriaDisabled ? "true" : false,
|
|
@@ -71,7 +72,10 @@ const DSButton = (props) => {
|
|
|
71
72
|
onKeyDown: handleOnKeyDown,
|
|
72
73
|
onClick: handleOnClick,
|
|
73
74
|
onMouseDown: handleOnMouseDown,
|
|
74
|
-
children
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPseudoBorder, { className: "pseudo-border", "aria-hidden": "true" }),
|
|
77
|
+
children
|
|
78
|
+
]
|
|
75
79
|
}
|
|
76
80
|
);
|
|
77
81
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/DSButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled || applyAriaDisabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { StyledPseudoBorder } from './styles.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled || applyAriaDisabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAxBJ,8BAAgE;AAChE,uBAA0B;AAE1B,mCAAkC;AAClC,iCAA6B;AAC7B,oBAAmC;AAEnC,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AACnB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,OAAO,MAAM,kBAAkB,IAAI;AACvF,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,uBAAmB,uCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,YAAY,oBAAoB,SAAS;AAAA,MACvD,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,oDAAC,oCAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,7 +44,8 @@ const useButton = (props) => {
|
|
|
44
44
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
45
45
|
const { disabled } = globalProps;
|
|
46
46
|
const ButtonRenderer = (0, import_useButtonRenderer.useButtonRenderer)(propsWithDefault);
|
|
47
|
-
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;
|
|
47
|
+
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
48
|
+
const standardizedType = String(type).toLowerCase();
|
|
48
49
|
const handleOnKeyDown = import_react.default.useCallback(
|
|
49
50
|
(e) => {
|
|
50
51
|
const { key } = e;
|
|
@@ -53,12 +54,12 @@ const useButton = (props) => {
|
|
|
53
54
|
return;
|
|
54
55
|
}
|
|
55
56
|
onKeyDown?.(e);
|
|
56
|
-
if (["Space", " ", "Enter"].includes(key)) {
|
|
57
|
+
if (standardizedType !== "submit" && ["Space", " ", "Enter"].includes(key)) {
|
|
57
58
|
e.preventDefault();
|
|
58
59
|
onClick(e);
|
|
59
60
|
}
|
|
60
61
|
},
|
|
61
|
-
[disabled, applyAriaDisabled,
|
|
62
|
+
[disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick]
|
|
62
63
|
);
|
|
63
64
|
const handleOnClick = import_react.default.useCallback(
|
|
64
65
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/SharedButtonBaseline/config/useButton.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAGzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,gDAAmE,gBAAgB;AACvG,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;\n\n // html allows any caps combination, we don't want to re-render on case change and our checks to care about case-sensitivity\n const standardizedType = String(type).toLowerCase();\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (standardizedType !== 'submit' && ['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AAGzF,mCAAgD;AAChD,8BAAiC;AACjC,+BAAkC;AAa3B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,gDAAiB,OAAO,8CAAiB;AAIzC,QAAM,kBAAc,gDAAmE,gBAAgB;AACvG,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,qBAAiB,4CAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,mBAAmB,KAAK,IAAI;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiE,aAAAA,QAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgB,aAAAA,QAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,8 +36,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
36
36
|
var import_DSButtonDefinitions = require("../DSButtonDefinitions.js");
|
|
37
37
|
const useValidateProps = (props, propTypes) => {
|
|
38
38
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_DSButtonDefinitions.DSButtonName);
|
|
39
|
-
if (props.size === "s")
|
|
39
|
+
if (props.size === "s")
|
|
40
40
|
console.warn("[DSButton] Size 's' will be deprecated in the future, so its use is not recommended.");
|
|
41
|
-
}
|
|
42
41
|
};
|
|
43
42
|
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/SharedButtonBaseline/config/useValidateProps.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSButtonName } from '../DSButtonDefinitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSButtonName);\n\n if (props.size === 's')
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,iCAA6B;AAGtB,MAAM,mBAAmB,CAAC,OAAwB,cAA4C;AAEnG,8DAA+B,OAAO,WAAW,uCAAY;AAE7D,MAAI,MAAM,SAAS
|
|
4
|
+
"sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSButtonName } from '../DSButtonDefinitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSButtonName);\n\n if (props.size === 's')\n // eslint-disable-next-line no-console\n console.warn(\"[DSButton] Size 's' will be deprecated in the future, so its use is not recommended.\");\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,iCAA6B;AAGtB,MAAM,mBAAmB,CAAC,OAAwB,cAA4C;AAEnG,8DAA+B,OAAO,WAAW,uCAAY;AAE7D,MAAI,MAAM,SAAS;AAEjB,YAAQ,KAAK,sFAAsF;AACvG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ __export(styles_exports, {
|
|
|
32
32
|
FilledButton: () => FilledButton,
|
|
33
33
|
OutlineButton: () => OutlineButton,
|
|
34
34
|
RawButton: () => RawButton,
|
|
35
|
+
StyledPseudoBorder: () => StyledPseudoBorder,
|
|
35
36
|
TextButton: () => TextButton
|
|
36
37
|
});
|
|
37
38
|
module.exports = __toCommonJS(styles_exports);
|
|
@@ -39,9 +40,12 @@ var React = __toESM(require("react"));
|
|
|
39
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
41
|
var import_constants = require("../../constants.js");
|
|
41
42
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
43
|
+
const StyledPseudoBorder = (0, import_ds_system.styled)("span")`
|
|
44
|
+
display: none;
|
|
45
|
+
position: absolute;
|
|
46
|
+
`;
|
|
42
47
|
const pseudoBorder = import_ds_system.css`
|
|
43
48
|
position: absolute;
|
|
44
|
-
content: '';
|
|
45
49
|
border-style: solid;
|
|
46
50
|
border-width: ${({ size, buttonType }) => size === import_constants.BUTTON_SIZES.S && buttonType === import_constants.BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
47
51
|
${({ buttonType, shape, theme }) => {
|
|
@@ -146,24 +150,6 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
146
150
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
147
151
|
&:focus,
|
|
148
152
|
&[data-testemulatestate='focus'] {
|
|
149
|
-
&[aria-disabled='true'],
|
|
150
|
-
&[disabled],
|
|
151
|
-
&:hover[aria-disabled='true'],
|
|
152
|
-
&:hover[disabled],
|
|
153
|
-
&:active[aria-disabled='true'],
|
|
154
|
-
&:active[disabled],
|
|
155
|
-
&[data-testemulatestate='hover'][aria-disabled='true'],
|
|
156
|
-
&[data-testemulatestate='hover'][disabled],
|
|
157
|
-
&[data-testemulatestate='active'][aria-disabled='true'],
|
|
158
|
-
&[data-testemulatestate='active'][disabled] {
|
|
159
|
-
&:after {
|
|
160
|
-
${pseudoBorder}
|
|
161
|
-
border-color: neutral-100;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
&:after {
|
|
165
|
-
${pseudoBorder}
|
|
166
|
-
}
|
|
167
153
|
border-color: brand-700;
|
|
168
154
|
}
|
|
169
155
|
& svg {
|
|
@@ -196,6 +182,27 @@ const FilledButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
196
182
|
border-color: brand-700;
|
|
197
183
|
}
|
|
198
184
|
}
|
|
185
|
+
&:focus .pseudo-border,
|
|
186
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
187
|
+
display: block;
|
|
188
|
+
${pseudoBorder}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Mostrar pseudo-border en focus + disabled */
|
|
192
|
+
&[aria-disabled='true']:focus .pseudo-border,
|
|
193
|
+
&[disabled]:focus .pseudo-border,
|
|
194
|
+
&[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,
|
|
195
|
+
&[disabled][data-testemulatestate='focus'] .pseudo-border,
|
|
196
|
+
&:hover[aria-disabled='true']:focus .pseudo-border,
|
|
197
|
+
&:hover[disabled]:focus .pseudo-border,
|
|
198
|
+
&:active[aria-disabled='true']:focus .pseudo-border,
|
|
199
|
+
&:active[disabled]:focus .pseudo-border,
|
|
200
|
+
&[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,
|
|
201
|
+
&[data-testemulatestate='hover'][disabled]:focus .pseudo-border,
|
|
202
|
+
&[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,
|
|
203
|
+
&[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {
|
|
204
|
+
border-color: neutral-100;
|
|
205
|
+
}
|
|
199
206
|
`;
|
|
200
207
|
const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
201
208
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
@@ -205,13 +212,6 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
205
212
|
border-color: neutral-400;
|
|
206
213
|
color: brand-600;
|
|
207
214
|
border-width: 1px;
|
|
208
|
-
&:focus,
|
|
209
|
-
&[data-testemulatestate='focus'] {
|
|
210
|
-
&:after {
|
|
211
|
-
${pseudoBorder}
|
|
212
|
-
border-color: brand-700;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
215
|
& svg {
|
|
216
216
|
fill: brand-600;
|
|
217
217
|
}
|
|
@@ -242,6 +242,13 @@ const OutlineButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
242
242
|
fill: neutral-500;
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
+
|
|
246
|
+
&:focus .pseudo-border,
|
|
247
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
248
|
+
display: block;
|
|
249
|
+
${pseudoBorder}
|
|
250
|
+
border-color: brand-700;
|
|
251
|
+
}
|
|
245
252
|
`;
|
|
246
253
|
const TextButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
247
254
|
name: import_DSButtonDefinitions.DSButtonName,
|
|
@@ -250,13 +257,6 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
250
257
|
border-color: transparent;
|
|
251
258
|
background-color: transparent;
|
|
252
259
|
border-width: 1px;
|
|
253
|
-
&:focus,
|
|
254
|
-
&[data-testemulatestate='focus'] {
|
|
255
|
-
&:after {
|
|
256
|
-
${pseudoBorder}
|
|
257
|
-
border-color: brand-700;
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
260
|
color: brand-700;
|
|
261
261
|
& svg {
|
|
262
262
|
fill: brand-700;
|
|
@@ -290,5 +290,12 @@ const TextButton = (0, import_ds_system.styled)(DefaultButton, {
|
|
|
290
290
|
fill: neutral-500;
|
|
291
291
|
}
|
|
292
292
|
}
|
|
293
|
+
|
|
294
|
+
&:focus .pseudo-border,
|
|
295
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
296
|
+
display: block;
|
|
297
|
+
${pseudoBorder}
|
|
298
|
+
border-color: brand-700;
|
|
299
|
+
}
|
|
293
300
|
`;
|
|
294
301
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAgD;AAChD,uBAA8E;AAC9E,iCAA4C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n size: DSButtonT.ButtonSizesT;\n buttonType: DSButtonT.ButtonTypesT;\n shape: DSButtonT.ButtonShapesT;\n isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ size, buttonType }) =>\n size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${({ buttonType, shape, theme }) => {\n if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, size, buttonType }) => {\n switch (size) {\n case BUTTON_SIZES.S:\n if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<DSButtonT.Props>`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const DefaultButton = styled(RawButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ buttonType, isV3 }) =>\n isV3 === false ||\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ isV3, theme }) => {\n if (isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, buttonType, size, isV3 }) =>\n buttonType === BUTTON_TYPES.ICON ||\n buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : isV3 === false\n ? `0 ${theme.space.xs};`\n : size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : size === BUTTON_SIZES.M && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : size === BUTTON_SIZES.L && (buttonType === BUTTON_TYPES.OUTLINE || buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ size, isV3 }) => (isV3 ? `min-height: ${mobileSizes[size]};` : `height: ${mobileSizes[size]};`)}\n min-width: ${({ size }) => mobileSizes[size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ size, isV3 }) => (isV3 ? `min-height: ${sizes[size]};` : `height: ${sizes[size]};`)}\n min-width: ${({ size }) => sizes[size]};\n }\n border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n ${fontSizeSettings}\n ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled(DefaultButton, {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { describe, useGetGlobalAttributes, useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useButton } from "./config/useButton.js";
|
|
5
5
|
import { DSButtonPropTypes } from "./react-desc-prop-types.js";
|
|
6
6
|
import { DSButtonName } from "./DSButtonDefinitions.js";
|
|
7
|
+
import { StyledPseudoBorder } from "./styles.js";
|
|
7
8
|
const DSButton = (props) => {
|
|
8
9
|
const {
|
|
9
10
|
propsWithDefault,
|
|
@@ -19,7 +20,7 @@ const DSButton = (props) => {
|
|
|
19
20
|
const { disabled, ...restGlobalProps } = globalProps;
|
|
20
21
|
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
21
22
|
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
22
|
-
return /* @__PURE__ */
|
|
23
|
+
return /* @__PURE__ */ jsxs(
|
|
23
24
|
ButtonRenderer,
|
|
24
25
|
{
|
|
25
26
|
"aria-disabled": disabled || applyAriaDisabled ? "true" : false,
|
|
@@ -37,7 +38,10 @@ const DSButton = (props) => {
|
|
|
37
38
|
onKeyDown: handleOnKeyDown,
|
|
38
39
|
onClick: handleOnClick,
|
|
39
40
|
onMouseDown: handleOnMouseDown,
|
|
40
|
-
children
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx(StyledPseudoBorder, { className: "pseudo-border", "aria-hidden": "true" }),
|
|
43
|
+
children
|
|
44
|
+
]
|
|
41
45
|
}
|
|
42
46
|
);
|
|
43
47
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/DSButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled || applyAriaDisabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useButton } from './config/useButton.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\nimport { DSButtonPropTypes } from './react-desc-prop-types.js';\nimport { DSButtonName } from './DSButtonDefinitions.js';\nimport { StyledPseudoBorder } from './styles.js';\n\nconst DSButton: React.ComponentType<DSButtonT.Props> = (props) => {\n const {\n propsWithDefault,\n tabIndex,\n handleOnMouseDown,\n globalProps,\n xstyledProps,\n handleOnKeyDown,\n handleOnClick,\n ButtonRenderer,\n } = useButton(props);\n const { size, buttonType, innerRef, children, type, shape, isV3, applyAriaDisabled } = propsWithDefault;\n const { disabled, ...restGlobalProps } = globalProps;\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return (\n <ButtonRenderer\n aria-disabled={disabled || applyAriaDisabled ? 'true' : false}\n {...restGlobalProps}\n {...xstyledProps}\n {...globalAttributes}\n {...ownerPropsConfig}\n shape={shape}\n type={type}\n buttonType={buttonType}\n tabIndex={tabIndex}\n size={size}\n isV3={isV3}\n innerRef={innerRef}\n onKeyDown={handleOnKeyDown}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n >\n <StyledPseudoBorder className=\"pseudo-border\" aria-hidden=\"true\" />\n {children}\n </ButtonRenderer>\n );\n};\n\nDSButton.displayName = DSButtonName;\nconst DSButtonWithSchema = describe(DSButton);\nDSButtonWithSchema.propTypes = DSButtonPropTypes;\n\nexport { DSButton, DSButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBnB,SAiBE,KAjBF;AAxBJ,SAAS,UAAU,wBAAwB,qBAAqB;AAChE,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAEnC,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AACnB,QAAM,EAAE,MAAM,YAAY,UAAU,UAAU,MAAM,OAAO,MAAM,kBAAkB,IAAI;AACvF,QAAM,EAAE,UAAU,GAAG,gBAAgB,IAAI;AACzC,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe,YAAY,oBAAoB,SAAS;AAAA,MACvD,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MAEb;AAAA,4BAAC,sBAAmB,WAAU,iBAAgB,eAAY,QAAO;AAAA,QAChE;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,8 @@ const useButton = (props) => {
|
|
|
11
11
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
12
12
|
const { disabled } = globalProps;
|
|
13
13
|
const ButtonRenderer = useButtonRenderer(propsWithDefault);
|
|
14
|
-
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;
|
|
14
|
+
const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;
|
|
15
|
+
const standardizedType = String(type).toLowerCase();
|
|
15
16
|
const handleOnKeyDown = React2.useCallback(
|
|
16
17
|
(e) => {
|
|
17
18
|
const { key } = e;
|
|
@@ -20,12 +21,12 @@ const useButton = (props) => {
|
|
|
20
21
|
return;
|
|
21
22
|
}
|
|
22
23
|
onKeyDown?.(e);
|
|
23
|
-
if (["Space", " ", "Enter"].includes(key)) {
|
|
24
|
+
if (standardizedType !== "submit" && ["Space", " ", "Enter"].includes(key)) {
|
|
24
25
|
e.preventDefault();
|
|
25
26
|
onClick(e);
|
|
26
27
|
}
|
|
27
28
|
},
|
|
28
|
-
[disabled, applyAriaDisabled,
|
|
29
|
+
[disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick]
|
|
29
30
|
);
|
|
30
31
|
const handleOnClick = React2.useCallback(
|
|
31
32
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/SharedButtonBaseline/config/useButton.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled } = propsWithDefault;\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSButtonPropTypes } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useButtonRenderer } from './useButtonRenderer.js';\n\nexport interface ButtonV2Configuration {\n propsWithDefault: DSButtonT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n ButtonRenderer: ReturnType<typeof useButtonRenderer>;\n handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;\n tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const useButton = (props: DSButtonT.Props): ButtonV2Configuration => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSButtonT.InternalProps>(props, defaultProps);\n useValidateProps(props, DSButtonPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSButtonT.InternalProps, HTMLButtonElement>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { disabled } = globalProps;\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const ButtonRenderer = useButtonRenderer(propsWithDefault);\n const { onKeyDown, onClick, onMouseDown, applyAriaDisabled, type } = propsWithDefault;\n\n // html allows any caps combination, we don't want to re-render on case change and our checks to care about case-sensitivity\n const standardizedType = String(type).toLowerCase();\n\n const handleOnKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (['Space', ' ', 'Enter'].includes(key) && (disabled || applyAriaDisabled)) {\n e.preventDefault();\n return;\n }\n\n onKeyDown?.(e);\n if (standardizedType !== 'submit' && ['Space', ' ', 'Enter'].includes(key)) {\n e.preventDefault();\n onClick(e);\n }\n },\n [disabled, applyAriaDisabled, onKeyDown, standardizedType, onClick],\n );\n\n const handleOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled || applyAriaDisabled) {\n return;\n }\n\n onClick?.(e);\n },\n [disabled, applyAriaDisabled, onClick],\n );\n\n const handleOnMouseDown: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n (e) => {\n if (disabled) {\n e.preventDefault();\n return;\n }\n onMouseDown?.(e);\n },\n [disabled, onMouseDown],\n );\n\n const tabIndex = globalProps.disabled ? -1 : globalProps.tabIndex;\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n ButtonRenderer,\n handleOnKeyDown,\n handleOnClick,\n tabIndex,\n handleOnMouseDown,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oBAAoB,oCAAoC;AAGzF,SAAS,cAAc,yBAAyB;AAChD,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAa3B,MAAM,YAAY,CAAC,UAAkD;AAI1E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,mBAAiB,OAAO,iBAAiB;AAIzC,QAAM,cAAc,uBAAmE,gBAAgB;AACvG,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,SAAS,IAAI;AAIrB,QAAM,iBAAiB,kBAAkB,gBAAgB;AACzD,QAAM,EAAE,WAAW,SAAS,aAAa,mBAAmB,KAAK,IAAI;AAGrE,QAAM,mBAAmB,OAAO,IAAI,EAAE,YAAY;AAElD,QAAM,kBAAiEA,OAAM;AAAA,IAC3E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,MAAM,YAAY,oBAAoB;AAC5E,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,kBAAY,CAAC;AACb,UAAI,qBAAqB,YAAY,CAAC,SAAS,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1E,UAAE,eAAe;AACjB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,WAAW,kBAAkB,OAAO;AAAA,EACpE;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAoF;AACnF,UAAI,YAAY,mBAAmB;AACjC;AAAA,MACF;AAEA,gBAAU,CAAC;AAAA,IACb;AAAA,IACA,CAAC,UAAU,mBAAmB,OAAO;AAAA,EACvC;AAEA,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,UAAI,UAAU;AACZ,UAAE,eAAe;AACjB;AAAA,MACF;AACA,oBAAc,CAAC;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,WAAW,YAAY,WAAW,KAAK,YAAY;AAEzD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -3,9 +3,8 @@ import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
|
3
3
|
import { DSButtonName } from "../DSButtonDefinitions.js";
|
|
4
4
|
const useValidateProps = (props, propTypes) => {
|
|
5
5
|
useValidateTypescriptPropTypes(props, propTypes, DSButtonName);
|
|
6
|
-
if (props.size === "s")
|
|
6
|
+
if (props.size === "s")
|
|
7
7
|
console.warn("[DSButton] Size 's' will be deprecated in the future, so its use is not recommended.");
|
|
8
|
-
}
|
|
9
8
|
};
|
|
10
9
|
export {
|
|
11
10
|
useValidateProps
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/SharedButtonBaseline/config/useValidateProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSButtonName } from '../DSButtonDefinitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSButtonName);\n\n if (props.size === 's')
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AACnE,SAAS,oBAAoB;AAGtB,MAAM,mBAAmB,CAAC,OAAwB,cAA4C;AAEnG,iCAA+B,OAAO,WAAW,YAAY;AAE7D,MAAI,MAAM,SAAS
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSButtonName } from '../DSButtonDefinitions.js';\nimport type { DSButtonT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSButtonT.Props, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSButtonName);\n\n if (props.size === 's')\n // eslint-disable-next-line no-console\n console.warn(\"[DSButton] Size 's' will be deprecated in the future, so its use is not recommended.\");\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AACnE,SAAS,oBAAoB;AAGtB,MAAM,mBAAmB,CAAC,OAAwB,cAA4C;AAEnG,iCAA+B,OAAO,WAAW,YAAY;AAE7D,MAAI,MAAM,SAAS;AAEjB,YAAQ,KAAK,sFAAsF;AACvG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,12 @@ import * as React from "react";
|
|
|
2
2
|
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from "../../constants.js";
|
|
4
4
|
import { DSButtonName, DSButtonSlots } from "./DSButtonDefinitions.js";
|
|
5
|
+
const StyledPseudoBorder = styled("span")`
|
|
6
|
+
display: none;
|
|
7
|
+
position: absolute;
|
|
8
|
+
`;
|
|
5
9
|
const pseudoBorder = css`
|
|
6
10
|
position: absolute;
|
|
7
|
-
content: '';
|
|
8
11
|
border-style: solid;
|
|
9
12
|
border-width: ${({ size, buttonType }) => size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? "1px" : "2px"};
|
|
10
13
|
${({ buttonType, shape, theme }) => {
|
|
@@ -109,24 +112,6 @@ const FilledButton = styled(DefaultButton, {
|
|
|
109
112
|
border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
|
|
110
113
|
&:focus,
|
|
111
114
|
&[data-testemulatestate='focus'] {
|
|
112
|
-
&[aria-disabled='true'],
|
|
113
|
-
&[disabled],
|
|
114
|
-
&:hover[aria-disabled='true'],
|
|
115
|
-
&:hover[disabled],
|
|
116
|
-
&:active[aria-disabled='true'],
|
|
117
|
-
&:active[disabled],
|
|
118
|
-
&[data-testemulatestate='hover'][aria-disabled='true'],
|
|
119
|
-
&[data-testemulatestate='hover'][disabled],
|
|
120
|
-
&[data-testemulatestate='active'][aria-disabled='true'],
|
|
121
|
-
&[data-testemulatestate='active'][disabled] {
|
|
122
|
-
&:after {
|
|
123
|
-
${pseudoBorder}
|
|
124
|
-
border-color: neutral-100;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
&:after {
|
|
128
|
-
${pseudoBorder}
|
|
129
|
-
}
|
|
130
115
|
border-color: brand-700;
|
|
131
116
|
}
|
|
132
117
|
& svg {
|
|
@@ -159,6 +144,27 @@ const FilledButton = styled(DefaultButton, {
|
|
|
159
144
|
border-color: brand-700;
|
|
160
145
|
}
|
|
161
146
|
}
|
|
147
|
+
&:focus .pseudo-border,
|
|
148
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
149
|
+
display: block;
|
|
150
|
+
${pseudoBorder}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Mostrar pseudo-border en focus + disabled */
|
|
154
|
+
&[aria-disabled='true']:focus .pseudo-border,
|
|
155
|
+
&[disabled]:focus .pseudo-border,
|
|
156
|
+
&[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,
|
|
157
|
+
&[disabled][data-testemulatestate='focus'] .pseudo-border,
|
|
158
|
+
&:hover[aria-disabled='true']:focus .pseudo-border,
|
|
159
|
+
&:hover[disabled]:focus .pseudo-border,
|
|
160
|
+
&:active[aria-disabled='true']:focus .pseudo-border,
|
|
161
|
+
&:active[disabled]:focus .pseudo-border,
|
|
162
|
+
&[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,
|
|
163
|
+
&[data-testemulatestate='hover'][disabled]:focus .pseudo-border,
|
|
164
|
+
&[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,
|
|
165
|
+
&[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {
|
|
166
|
+
border-color: neutral-100;
|
|
167
|
+
}
|
|
162
168
|
`;
|
|
163
169
|
const OutlineButton = styled(DefaultButton, {
|
|
164
170
|
name: DSButtonName,
|
|
@@ -168,13 +174,6 @@ const OutlineButton = styled(DefaultButton, {
|
|
|
168
174
|
border-color: neutral-400;
|
|
169
175
|
color: brand-600;
|
|
170
176
|
border-width: 1px;
|
|
171
|
-
&:focus,
|
|
172
|
-
&[data-testemulatestate='focus'] {
|
|
173
|
-
&:after {
|
|
174
|
-
${pseudoBorder}
|
|
175
|
-
border-color: brand-700;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
177
|
& svg {
|
|
179
178
|
fill: brand-600;
|
|
180
179
|
}
|
|
@@ -205,6 +204,13 @@ const OutlineButton = styled(DefaultButton, {
|
|
|
205
204
|
fill: neutral-500;
|
|
206
205
|
}
|
|
207
206
|
}
|
|
207
|
+
|
|
208
|
+
&:focus .pseudo-border,
|
|
209
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
210
|
+
display: block;
|
|
211
|
+
${pseudoBorder}
|
|
212
|
+
border-color: brand-700;
|
|
213
|
+
}
|
|
208
214
|
`;
|
|
209
215
|
const TextButton = styled(DefaultButton, {
|
|
210
216
|
name: DSButtonName,
|
|
@@ -213,13 +219,6 @@ const TextButton = styled(DefaultButton, {
|
|
|
213
219
|
border-color: transparent;
|
|
214
220
|
background-color: transparent;
|
|
215
221
|
border-width: 1px;
|
|
216
|
-
&:focus,
|
|
217
|
-
&[data-testemulatestate='focus'] {
|
|
218
|
-
&:after {
|
|
219
|
-
${pseudoBorder}
|
|
220
|
-
border-color: brand-700;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
222
|
color: brand-700;
|
|
224
223
|
& svg {
|
|
225
224
|
fill: brand-700;
|
|
@@ -253,12 +252,20 @@ const TextButton = styled(DefaultButton, {
|
|
|
253
252
|
fill: neutral-500;
|
|
254
253
|
}
|
|
255
254
|
}
|
|
255
|
+
|
|
256
|
+
&:focus .pseudo-border,
|
|
257
|
+
&[data-testemulatestate='focus'] .pseudo-border {
|
|
258
|
+
display: block;
|
|
259
|
+
${pseudoBorder}
|
|
260
|
+
border-color: brand-700;
|
|
261
|
+
}
|
|
256
262
|
`;
|
|
257
263
|
export {
|
|
258
264
|
DefaultButton,
|
|
259
265
|
FilledButton,
|
|
260
266
|
OutlineButton,
|
|
261
267
|
RawButton,
|
|
268
|
+
StyledPseudoBorder,
|
|
262
269
|
TextButton
|
|
263
270
|
};
|
|
264
271
|
//# sourceMappingURL=styles.js.map
|