@elliemae/ds-button-v2 3.70.0-next.52 → 3.70.0-next.54
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/DSButtonV2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/DSButtonV3/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/parts/SharedButtonBaseline/styles.js +8 -7
- package/dist/cjs/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/dist/esm/parts/DSButtonV2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSButtonV3/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/SharedButtonBaseline/styles.js +9 -8
- package/dist/esm/parts/SharedButtonBaseline/styles.js.map +2 -2
- package/package.json +7 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButtonV2/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV2PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV2DataTestId.ROOT),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,kDAAqB,IAAI;AACjH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSButtonV3/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV3PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV3DataTestId.ROOT),\n} as DSPropTypesSchema<DSButtonV3T.Props>;\n\nexport const DSButtonV3PropTypesSchema = DSButtonV3PropTypes as unknown as ValidationMap<DSButtonV3T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,mCAAkC;AAClC,mCAAqC;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,kDAAqB,IAAI;AACjH;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n export interface OptionalProps
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;
|
|
4
|
+
"sourcesContent": ["import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSButtonName,\n typeof DSButtonSlots\n > {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description(\n 'Focusable-but-locked state. Emits aria-disabled=\"true\" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAYO;AACP,iCAAgE;AA4DzD,MAAM,eAAuC;AAAA,EAClD,MAAM,8BAAa;AAAA,EACnB,YAAY,8BAAa;AAAA,EACzB,OAAO,+BAAc;AAAA,EACrB,eAAe,8CAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,oBAAoB;AAAA,EAC/B,OAAG,kDAAyB,yCAAc,wCAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,QAAQ,kCAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,MAAM,uCAAsB,EAC/C,YAAY,wCAAuB,EACnC,aAAa,8BAAa,MAAM;AAAA,EACnC,OAAO,kCAAU,MAAM,wCAAuB,EAC3C,YAAY,yCAAwB,EACpC,aAAa,+BAAc,OAAO;AAAA,EACrC,MAAM,kCAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,kCAAU,MAAM,uCAAsB,EACzC;AAAA,IACC,GAAG,wCAAuB;AAAA,EAC5B,EACC,aAAa,8BAAa,CAAC;AAAA,EAC9B,SAAS,kCAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,8CAAmB,IAAI;AAAA,EAC7G,yBAAyB,kCAAU,MAAM,wCAAuB,EAAE;AAAA,IAChE,iDAAiD,oDAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,9 +41,8 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
41
41
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
42
42
|
var import_constants = require("../../constants.js");
|
|
43
43
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
${({ $isV3 }) => $isV3 ? b1Variant : ""}
|
|
44
|
+
const typographyBase = import_ds_system.css`
|
|
45
|
+
${({ $isV3 }) => $isV3 ? import_ds_typography.typographyFontFamily : ""}
|
|
47
46
|
`;
|
|
48
47
|
const StyledPseudoBorder = (0, import_ds_system.styled)("span")`
|
|
49
48
|
display: none;
|
|
@@ -107,10 +106,12 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
107
106
|
`;
|
|
108
107
|
const defaultButtonStyles = import_ds_system.css`
|
|
109
108
|
${resetButtonStyles}
|
|
110
|
-
//
|
|
111
|
-
//
|
|
112
|
-
//
|
|
113
|
-
|
|
109
|
+
// Apply the shared font-family (PUI-18721) as the text styling base for V3
|
|
110
|
+
// buttons. font-weight (below), font-size (fontSizeSettings), and line-height
|
|
111
|
+
// (below) are declared AFTER this and win the cascade unconditionally, so
|
|
112
|
+
// button height/line-height/font-size/font-weight are all unaffected —
|
|
113
|
+
// only font-family changes.
|
|
114
|
+
${typographyBase}
|
|
114
115
|
display: inline-grid;
|
|
115
116
|
grid-gap: 0.615rem;
|
|
116
117
|
position: relative;
|
|
@@ -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 { VARIANTS_CSS_BODY, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\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\n// The b1 variant CSS is typed for the typography styled props (it reads\n// props.fontSize / props.lineHeight, both optional \u2192 literal fallback, and theme).\n// None of those conflict with the button at runtime; cast so it composes inside\n// the button's own styled template without widening its prop inference.\nconst b1Variant = VARIANTS_CSS_BODY[TYPOGRAPHY_VARIANTS.B1] as unknown as ReturnType<typeof css>;\n\n// Apply the b1 base ONLY to V3 buttons. V3 already overrides line-height/weight\n// below, so rendering is unchanged. V2 never set line-height, so applying b1 there\n// would shift it \u2014 scoping to V3 keeps V2 byte-for-byte identical.\nconst b1Base = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? b1Variant : '')}\n`;\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 ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\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\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Reuse the b1 typography variant as the text styling base. Button-specific\n // rules below (font-weight, line-height, fontSizeSettings) come AFTER and\n // override it, so rendering is unchanged \u2014 this is source reuse, not a restyle.\n ${b1Base}\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: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\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 DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAgD;AAChD,
|
|
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 { typographyFontFamily } from '@elliemae/ds-typography';\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\n// PUI-18721 / PUI-18210 follow-up: only font-family is taken from the shared\n// typography tokens here, scoped to V3 only (V2 never set font-family \u2014 applying\n// it there would be a visible change). Per-size font-weight/line-height\n// (b3/b1/h4-strong per the Button [Filled Variant] design spec v3.0.0) are\n// intentionally deferred to a future iteration \u2014 this fix keeps font-weight,\n// line-height, and font-size exactly as they were for every size.\nconst typographyBase = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? typographyFontFamily : '')}\n`;\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 ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\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\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Apply the shared font-family (PUI-18721) as the text styling base for V3\n // buttons. font-weight (below), font-size (fontSizeSettings), and line-height\n // (below) are declared AFTER this and win the cascade unconditionally, so\n // button height/line-height/font-size/font-weight are all unaffected \u2014\n // only font-family changes.\n ${typographyBase}\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: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\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 DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV2/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV2DataTestId } from './DSButtonV2Definitions.js';\n\nexport namespace DSButtonV2T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV2PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV2DataTestId.ROOT),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,qBAAqB,IAAI;AACjH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSButtonV3/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSButtonT } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonPropTypes } from '../SharedButtonBaseline/react-desc-prop-types.js';\nimport { DSButtonV3DataTestId } from './DSButtonV3Definitions.js';\n\nexport namespace DSButtonV3T {\n export interface DefaultProps extends DSButtonT.DefaultProps {}\n\n export interface OptionalProps extends DSButtonT.OptionalProps {}\n\n export interface RequiredProps extends Omit<DSButtonT.RequiredProps, 'isV3'> {}\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const DSButtonV3PropTypes = {\n ...DSButtonPropTypes,\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonV3DataTestId.ROOT),\n} as DSPropTypesSchema<DSButtonV3T.Props>;\n\nexport const DSButtonV3PropTypesSchema = DSButtonV3PropTypes as unknown as ValidationMap<DSButtonV3T.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AA0B9B,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,qBAAqB,IAAI;AACjH;AAEO,MAAM,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n export interface OptionalProps
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { RefCallback } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_SHAPES,\n ButtonSizesValuesArray,\n ButtonInteractionStates,\n ButtonSizesValuesString,\n ButtonInteractionStatesValuesString,\n ButtonTypesValuesArray,\n ButtonTypesValuesString,\n ButtonShapesValuesArray,\n ButtonShapesValuesString,\n} from '../../constants.js';\nimport { DSButtonDataTestId, DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\n\nexport declare namespace DSButtonT {\n export type HTMLButtonTypeProp = 'button' | 'submit' | 'reset';\n\n export type ButtonSizesT = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];\n\n export type ButtonTypesT = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\n\n export type ButtonShapesT = (typeof BUTTON_SHAPES)[keyof typeof BUTTON_SHAPES];\n\n export type ButtonInteractionStatesT = (typeof ButtonInteractionStates)[number];\n\n export interface DefaultProps {\n 'data-testid': string;\n size: ButtonSizesT;\n type: HTMLButtonTypeProp;\n buttonType: ButtonTypesT;\n onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n shape: ButtonShapesT;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSButtonName,\n typeof DSButtonSlots\n > {\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement>;\n }\n export interface RequiredProps {\n children: React.ReactNode | React.ReactNode[];\n isV3: boolean;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface StyledButtonInheritedDrilledProps\n extends\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {\n type: DefaultProps['type'];\n innerRef?: OptionalProps['innerRef'];\n onClick: DefaultProps['onClick'];\n }\n}\n\nexport const defaultProps: DSButtonT.DefaultProps = {\n size: BUTTON_SIZES.M,\n buttonType: BUTTON_TYPES.FILLED,\n shape: BUTTON_SHAPES.DEFAULT,\n 'data-testid': DSButtonDataTestId.ROOT,\n type: 'button',\n onClick: () => {},\n applyAriaDisabled: false,\n readOnly: false,\n};\n\nexport const DSButtonPropTypes = {\n ...getPropsPerSlotPropTypes(DSButtonName, DSButtonSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).description(\n 'String, Number and/or Dimsum Icon.',\n ).isRequired,\n buttonType: PropTypes.oneOf(ButtonTypesValuesArray)\n .description(ButtonTypesValuesString)\n .defaultValue(BUTTON_TYPES.FILLED),\n shape: PropTypes.oneOf(ButtonShapesValuesArray)\n .description(ButtonShapesValuesString)\n .defaultValue(BUTTON_SHAPES.DEFAULT),\n type: PropTypes.string.description('Html \"type\" props.').defaultValue('button'),\n size: PropTypes.oneOf(ButtonSizesValuesArray)\n .description(\n `${ButtonSizesValuesString}. Size \"s\" will be deprecated in the future, so its use is not recommended.`,\n )\n .defaultValue(BUTTON_SIZES.M),\n onClick: PropTypes.func\n .description('Function executed when the button is activated (via keyboard \"space\" or enter OR via mouse).')\n .signature('(( e: React.SyntheticEvent ) => void )')\n .defaultValue(() => {}),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n 'data-testid': PropTypes.string.description('Root element data-testid.').defaultValue(DSButtonDataTestId.ROOT),\n 'data-testemulatestate': PropTypes.oneOf(ButtonInteractionStates).description(\n `Emulates button states. Useful for e2e tests. ${ButtonInteractionStatesValuesString}`,\n ),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description(\n 'Focusable-but-locked state. Emits aria-disabled=\"true\" (buttons are not valid hosts for readonly/aria-readonly, so neither is rendered) and prevents the main action, mirroring applyAriaDisabled. CAN STILL RECEIVE FOCUS.',\n )\n .defaultValue(false),\n} as ValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,cAAc,qBAAqB;AA4DzD,MAAM,eAAuC;AAAA,EAClD,MAAM,aAAa;AAAA,EACnB,YAAY,aAAa;AAAA,EACzB,OAAO,cAAc;AAAA,EACrB,eAAe,mBAAmB;AAAA,EAClC,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,oBAAoB;AAAA,EAC/B,GAAG,yBAAyB,cAAc,aAAa;AAAA,EACvD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,QAAQ,UAAU,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM,sBAAsB,EAC/C,YAAY,uBAAuB,EACnC,aAAa,aAAa,MAAM;AAAA,EACnC,OAAO,UAAU,MAAM,uBAAuB,EAC3C,YAAY,wBAAwB,EACpC,aAAa,cAAc,OAAO;AAAA,EACrC,MAAM,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,QAAQ;AAAA,EAC9E,MAAM,UAAU,MAAM,sBAAsB,EACzC;AAAA,IACC,GAAG,uBAAuB;AAAA,EAC5B,EACC,aAAa,aAAa,CAAC;AAAA,EAC9B,SAAS,UAAU,KAChB,YAAY,8FAA8F,EAC1G,UAAU,wCAAwC,EAClD,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,mBAAmB,IAAI;AAAA,EAC7G,yBAAyB,UAAU,MAAM,uBAAuB,EAAE;AAAA,IAChE,iDAAiD,mCAAmC;AAAA,EACtF;AAAA,EACA,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
-
import {
|
|
3
|
+
import { typographyFontFamily } from "@elliemae/ds-typography";
|
|
4
4
|
import { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from "../../constants.js";
|
|
5
5
|
import { DSButtonName, DSButtonSlots } from "./DSButtonDefinitions.js";
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
${({ $isV3 }) => $isV3 ? b1Variant : ""}
|
|
6
|
+
const typographyBase = css`
|
|
7
|
+
${({ $isV3 }) => $isV3 ? typographyFontFamily : ""}
|
|
9
8
|
`;
|
|
10
9
|
const StyledPseudoBorder = styled("span")`
|
|
11
10
|
display: none;
|
|
@@ -69,10 +68,12 @@ const RawButton = styled("button", {
|
|
|
69
68
|
`;
|
|
70
69
|
const defaultButtonStyles = css`
|
|
71
70
|
${resetButtonStyles}
|
|
72
|
-
//
|
|
73
|
-
//
|
|
74
|
-
//
|
|
75
|
-
|
|
71
|
+
// Apply the shared font-family (PUI-18721) as the text styling base for V3
|
|
72
|
+
// buttons. font-weight (below), font-size (fontSizeSettings), and line-height
|
|
73
|
+
// (below) are declared AFTER this and win the cascade unconditionally, so
|
|
74
|
+
// button height/line-height/font-size/font-weight are all unaffected —
|
|
75
|
+
// only font-family changes.
|
|
76
|
+
${typographyBase}
|
|
76
77
|
display: inline-grid;
|
|
77
78
|
grid-gap: 0.615rem;
|
|
78
79
|
position: relative;
|
|
@@ -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 { VARIANTS_CSS_BODY, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\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\n// The b1 variant CSS is typed for the typography styled props (it reads\n// props.fontSize / props.lineHeight, both optional \u2192 literal fallback, and theme).\n// None of those conflict with the button at runtime; cast so it composes inside\n// the button's own styled template without widening its prop inference.\nconst b1Variant = VARIANTS_CSS_BODY[TYPOGRAPHY_VARIANTS.B1] as unknown as ReturnType<typeof css>;\n\n// Apply the b1 base ONLY to V3 buttons. V3 already overrides line-height/weight\n// below, so rendering is unchanged. V2 never set line-height, so applying b1 there\n// would shift it \u2014 scoping to V3 keeps V2 byte-for-byte identical.\nconst b1Base = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? b1Variant : '')}\n`;\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 ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\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\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Reuse the b1 typography variant as the text styling base. Button-specific\n // rules below (font-weight, line-height, fontSizeSettings) come AFTER and\n // override it, so rendering is unchanged \u2014 this is source reuse, not a restyle.\n ${b1Base}\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: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\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 DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,
|
|
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 { typographyFontFamily } from '@elliemae/ds-typography';\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\n// PUI-18721 / PUI-18210 follow-up: only font-family is taken from the shared\n// typography tokens here, scoped to V3 only (V2 never set font-family \u2014 applying\n// it there would be a visible change). Per-size font-weight/line-height\n// (b3/b1/h4-strong per the Button [Filled Variant] design spec v3.0.0) are\n// intentionally deferred to a future iteration \u2014 this fix keeps font-weight,\n// line-height, and font-size exactly as they were for every size.\nconst typographyBase = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? typographyFontFamily : '')}\n`;\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 ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\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\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Apply the shared font-family (PUI-18721) as the text styling base for V3\n // buttons. font-weight (below), font-size (fontSizeSettings), and line-height\n // (below) are declared AFTER this and win the cascade unconditionally, so\n // button height/line-height/font-size/font-weight are all unaffected \u2014\n // only font-family changes.\n ${typographyBase}\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: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\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 DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\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
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.54",
|
|
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-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-typography": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
39
|
+
"@elliemae/ds-system": "3.70.0-next.54",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.54",
|
|
41
|
+
"@elliemae/ds-typography": "3.70.0-next.54",
|
|
42
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.54"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"jest": "^30.0.0",
|
|
46
46
|
"styled-components": "~5.3.9",
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
48
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.54",
|
|
48
|
+
"@elliemae/ds-test-utils": "3.70.0-next.54"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^18.3.1",
|