@elliemae/ds-pills 3.1.4-rc.2 → 3.1.4
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.
|
@@ -36,7 +36,7 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
36
36
|
var import_ds_system2 = require("@elliemae/ds-system");
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_ds_button = require("@elliemae/ds-button");
|
|
39
|
-
const borderOutside = (color, size = 1,
|
|
39
|
+
const borderOutside = (color, size = 1, borderRadius = "12px") => import_ds_system2.css`
|
|
40
40
|
:after {
|
|
41
41
|
content: ' ';
|
|
42
42
|
position: absolute;
|
|
@@ -50,7 +50,6 @@ const borderOutside = (color, size = 1, zIndex, borderRadius = "12px") => import
|
|
|
50
50
|
border-bottom-left-radius: ${borderRadius};
|
|
51
51
|
border-bottom-right-radius: ${borderRadius};
|
|
52
52
|
pointer-events: none;
|
|
53
|
-
z-index: ${zIndex ? zIndex : ""};
|
|
54
53
|
}
|
|
55
54
|
`;
|
|
56
55
|
const commonPillWrapperCss = import_ds_system2.css`
|
|
@@ -226,7 +225,7 @@ const StyledPillButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV
|
|
|
226
225
|
border-radius: 12px;
|
|
227
226
|
|
|
228
227
|
:focus {
|
|
229
|
-
${(props) => borderOutside(props.theme.colors.brand[700], 2,
|
|
228
|
+
${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
|
|
230
229
|
}
|
|
231
230
|
|
|
232
231
|
cursor: pointer;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,wBAAoB;AACpB,qBAAqB;AACrB,uBAA2B;AAa3B,MAAM,gBAAgB,CAAC,OAAe,OAAO,GAAG,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside(theme.colors.danger[900]);\n return borderOutside(theme.colors.brand[500]);\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n }\n\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { styled } from "@elliemae/ds-system";
|
|
|
3
3
|
import { css } from "@elliemae/ds-system";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
6
|
-
const borderOutside = (color, size = 1,
|
|
6
|
+
const borderOutside = (color, size = 1, borderRadius = "12px") => css`
|
|
7
7
|
:after {
|
|
8
8
|
content: ' ';
|
|
9
9
|
position: absolute;
|
|
@@ -17,7 +17,6 @@ const borderOutside = (color, size = 1, zIndex, borderRadius = "12px") => css`
|
|
|
17
17
|
border-bottom-left-radius: ${borderRadius};
|
|
18
18
|
border-bottom-right-radius: ${borderRadius};
|
|
19
19
|
pointer-events: none;
|
|
20
|
-
z-index: ${zIndex ? zIndex : ""};
|
|
21
20
|
}
|
|
22
21
|
`;
|
|
23
22
|
const commonPillWrapperCss = css`
|
|
@@ -193,7 +192,7 @@ const StyledPillButton = styled(DSButtonV2)`
|
|
|
193
192
|
border-radius: 12px;
|
|
194
193
|
|
|
195
194
|
:focus {
|
|
196
|
-
${(props) => borderOutside(props.theme.colors.brand[700], 2,
|
|
195
|
+
${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
|
|
197
196
|
}
|
|
198
197
|
|
|
199
198
|
cursor: pointer;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1,
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAaA,MAAM,gBAAgB,CAAC,OAAe,OAAO,GAAG,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\ninterface InputPillWrapperProps {\n value: string;\n inputWidth: number;\n inputHasFocus: boolean;\n hasError: boolean;\n}\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<InputPillWrapperProps>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ theme, hasError }) => {\n if (hasError) return borderOutside(theme.colors.danger[900]);\n return borderOutside(theme.colors.brand[500]);\n }}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n }\n\n cursor: pointer;\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-pills",
|
|
3
|
-
"version": "3.1.4
|
|
3
|
+
"version": "3.1.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills",
|
|
6
6
|
"files": [
|
|
@@ -147,20 +147,20 @@
|
|
|
147
147
|
"indent": 4
|
|
148
148
|
},
|
|
149
149
|
"dependencies": {
|
|
150
|
-
"@elliemae/ds-button": "3.1.4
|
|
151
|
-
"@elliemae/ds-classnames": "3.1.4
|
|
152
|
-
"@elliemae/ds-common": "3.1.4
|
|
153
|
-
"@elliemae/ds-dropdownmenu": "3.1.4
|
|
154
|
-
"@elliemae/ds-form": "3.1.4
|
|
155
|
-
"@elliemae/ds-grid": "3.1.4
|
|
156
|
-
"@elliemae/ds-icons": "3.1.4
|
|
157
|
-
"@elliemae/ds-modal": "3.1.4
|
|
158
|
-
"@elliemae/ds-popover": "3.1.4
|
|
159
|
-
"@elliemae/ds-shared": "3.1.4
|
|
160
|
-
"@elliemae/ds-system": "3.1.4
|
|
161
|
-
"@elliemae/ds-tooltip": "3.1.4
|
|
162
|
-
"@elliemae/ds-truncated-tooltip-text": "3.1.4
|
|
163
|
-
"@elliemae/ds-utilities": "3.1.4
|
|
150
|
+
"@elliemae/ds-button": "3.1.4",
|
|
151
|
+
"@elliemae/ds-classnames": "3.1.4",
|
|
152
|
+
"@elliemae/ds-common": "3.1.4",
|
|
153
|
+
"@elliemae/ds-dropdownmenu": "3.1.4",
|
|
154
|
+
"@elliemae/ds-form": "3.1.4",
|
|
155
|
+
"@elliemae/ds-grid": "3.1.4",
|
|
156
|
+
"@elliemae/ds-icons": "3.1.4",
|
|
157
|
+
"@elliemae/ds-modal": "3.1.4",
|
|
158
|
+
"@elliemae/ds-popover": "3.1.4",
|
|
159
|
+
"@elliemae/ds-shared": "3.1.4",
|
|
160
|
+
"@elliemae/ds-system": "3.1.4",
|
|
161
|
+
"@elliemae/ds-tooltip": "3.1.4",
|
|
162
|
+
"@elliemae/ds-truncated-tooltip-text": "3.1.4",
|
|
163
|
+
"@elliemae/ds-utilities": "3.1.4",
|
|
164
164
|
"prop-types": "~15.8.1",
|
|
165
165
|
"uid": "~2.0.0"
|
|
166
166
|
},
|