@elliemae/ds-button-v2 3.54.0-beta.1 → 3.54.0-next.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/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/styles.js +40 -33
- package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/types/parts/SharedButtonBaseline/styles.d.ts +1 -0
- package/package.json +6 -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
|
}
|
|
@@ -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
|
}
|
|
@@ -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
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,6 +5,7 @@ export interface StyledButtonPropsT {
|
|
|
5
5
|
shape: DSButtonT.ButtonShapesT;
|
|
6
6
|
isV3: DSButtonT.RequiredProps['isV3'];
|
|
7
7
|
}
|
|
8
|
+
export declare const StyledPseudoBorder: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
8
9
|
export declare const RawButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
|
9
10
|
export declare const DefaultButton: import("styled-components").StyledComponent<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>, import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>>, never>;
|
|
10
11
|
export declare const FilledButton: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>, import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>>, never>, import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>, import("@elliemae/ds-system").Theme, StyledButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, DSButtonT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>>, never>>, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.54.0-
|
|
3
|
+
"version": "3.54.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -36,16 +36,16 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.54.0-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.54.0-next.2",
|
|
40
|
+
"@elliemae/ds-typescript-helpers": "3.54.0-next.2",
|
|
41
|
+
"@elliemae/ds-system": "3.54.0-next.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
45
45
|
"jest": "~29.7.0",
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
47
|
+
"@elliemae/ds-test-utils": "3.54.0-next.2",
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.54.0-next.2"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^18.3.1",
|