@servicetitan/anvil2 1.20.1 → 1.20.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +79 -15
- package/dist/Alert3.js +4 -6
- package/dist/Alert3.js.map +1 -1
- package/dist/Combobox2.js +7 -8
- package/dist/Combobox2.js.map +1 -1
- package/dist/EditCard.css +14 -14
- package/dist/EditCard.d.ts +3 -3
- package/dist/EditCard2.js +25 -18
- package/dist/EditCard2.js.map +1 -1
- package/dist/SearchField.css +8 -5
- package/dist/SearchField2.js +6 -4
- package/dist/SearchField2.js.map +1 -1
- package/dist/TextField.css +24 -21
- package/dist/TextField.module.js +10 -10
- package/dist/TextField.module.js.map +1 -1
- package/dist/Textarea.css +13 -14
- package/dist/Textarea2.js +7 -7
- package/dist/Textarea2.js.map +1 -1
- package/dist/anvil2.d.ts +3 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @servicetitan/anvil2
|
|
2
2
|
|
|
3
|
+
## 1.20.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#932](https://github.com/servicetitan/hammer/pull/932) [`61c9dde`](https://github.com/servicetitan/hammer/commit/61c9ddede8c10394e175efb49ce7cdac4aedd6b1) Thanks [@tounsoo](https://github.com/tounsoo)! - Fix inconsistant placeholder color between input components
|
|
8
|
+
|
|
9
|
+
- [#944](https://github.com/servicetitan/hammer/pull/944) [`af80dff`](https://github.com/servicetitan/hammer/commit/af80dff03043f6d7ba180d467072f45d6ee5c77e) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Refactor `Combobox.SelectTrigger` aria label usage
|
|
10
|
+
|
|
11
|
+
- [#943](https://github.com/servicetitan/hammer/pull/943) [`3ce0920`](https://github.com/servicetitan/hammer/commit/3ce0920ae2e315e4c12ce0ca7e1c3f7efaa4d595) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - Minor updates to `EditCard` to align with design
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [[`61c9dde`](https://github.com/servicetitan/hammer/commit/61c9ddede8c10394e175efb49ce7cdac4aedd6b1), [`af80dff`](https://github.com/servicetitan/hammer/commit/af80dff03043f6d7ba180d467072f45d6ee5c77e), [`3ce0920`](https://github.com/servicetitan/hammer/commit/3ce0920ae2e315e4c12ce0ca7e1c3f7efaa4d595)]:
|
|
14
|
+
- @servicetitan/hammer-react@1.23.2
|
|
15
|
+
|
|
3
16
|
## 1.20.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
<h1 align="center">
|
|
2
|
-
Anvil2
|
|
2
|
+
Anvil2 React Library
|
|
3
3
|
</h1>
|
|
4
4
|
|
|
5
5
|
Anvil2 contains reusable components, fonts, icons, and more for building ServiceTitan products.
|
|
6
6
|
|
|
7
|
+
## Hammer and Anvil2 Note
|
|
8
|
+
|
|
9
|
+
In this monorepo, there are both Hammer and Anvil2 packages. Hammer (e.g. `@servicetitan/hammer-react`), is the base library that the Anvil team maintains and `@servicetitan/anvil2` builds on top of.
|
|
10
|
+
|
|
11
|
+
Anvil2 is more opinionated and ServiceTitan-specific, and can also include more complex components and customizations of Hammer.
|
|
12
|
+
|
|
13
|
+
Much of the source code for Anvil2 components actually exists in the `packages/hammer-react` package in this monorepo. When releasing updates, making changes in Hammer will automatically propagate to Anvil2, as long as the component/function/type is exported from the `packages/anvil2` package as well.
|
|
14
|
+
|
|
7
15
|
# Getting Started
|
|
8
16
|
|
|
9
17
|
## Installation
|
|
@@ -14,45 +22,97 @@ We recommend installing Anvil2 by running the following `npm` command (or the eq
|
|
|
14
22
|
npm install @servicetitan/anvil2
|
|
15
23
|
```
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
### Note on versions with MFEs
|
|
26
|
+
|
|
27
|
+
If you are using a Micro Front End (MFE) with the light bundle, the version of `@servicetitan/anvil2` that is installed in the host app will be used when the MFE is loaded within the host app. If you need features or bug fixes from newer versions, update the version in the host app first.
|
|
18
28
|
|
|
19
29
|
## Usage
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
### Components
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
Components can be imported as named exports from the package root:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
24
36
|
import { Button, Icon } from "@servicetitan/anvil2";
|
|
25
37
|
```
|
|
26
38
|
|
|
27
|
-
|
|
39
|
+
### Icons
|
|
28
40
|
|
|
29
41
|
Anvil2 icons are expected to be used with the [SVGR](https://github.com/gregberge/svgr) library, which will import SVGs as React components. SVGR should already be part of the latest `@servicetitan/startup` Webpack configuration.
|
|
30
42
|
|
|
31
43
|
Importing and using an icon:
|
|
32
44
|
|
|
33
|
-
```
|
|
45
|
+
```tsx
|
|
34
46
|
import { Button, Icon } from "@servicetitan/anvil2";
|
|
35
47
|
|
|
36
48
|
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
|
|
37
|
-
import Star from
|
|
38
|
-
import LocalSettings from
|
|
49
|
+
import Star from "@servicetitan/anvil2/assets/icons/material/round/star.svg";
|
|
50
|
+
import LocalSettings from "@servicetitan/anvil2/assets/icons/st/local_settings.svg";
|
|
51
|
+
|
|
52
|
+
export const Example = () => (
|
|
53
|
+
<>
|
|
54
|
+
<Icon svg={Warning} size="large" />
|
|
55
|
+
<Button icon={Star} aria-label="Favorite" />
|
|
56
|
+
<Button icon={LocalSettings}>Settings</Button>
|
|
57
|
+
</>
|
|
58
|
+
);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### CSS Utils
|
|
62
|
+
|
|
63
|
+
A set of CSS Utils classes are available. See the [source code in our repo](https://github.com/servicetitan/hammer/blob/master/packages/anvil2/public/assets/css-utils) to see the full list.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { Card } from "@servicetitan/anvil2";
|
|
67
|
+
import "@servicetitan/anvil2/assets/css-utils/utils.css";
|
|
39
68
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
69
|
+
export const Example = () => (
|
|
70
|
+
<>
|
|
71
|
+
<Card className="m-inline-4">Card with inline margin</Card>
|
|
72
|
+
</>
|
|
73
|
+
);
|
|
43
74
|
```
|
|
44
75
|
|
|
45
|
-
|
|
76
|
+
#### NOTES
|
|
46
77
|
|
|
47
|
-
|
|
78
|
+
- If the `utils.css` file is already loaded by the host app, you might not need to import it.
|
|
79
|
+
- There is currently a known issue related to some temporary CSS overrides we've had to make to prevent some legacy CSS in the monolith from overriding Anvil2 component styles. If the CSS util you add doesn't work, and you see something like this in the browser inspector: `:not(.aXNw) [data-anv='text']`, you will need to instead add the styles you want in a custom `className`, and add an `@layer` around it:
|
|
48
80
|
|
|
81
|
+
```css
|
|
82
|
+
@layer application {
|
|
83
|
+
/* replaces .c-danger */
|
|
84
|
+
.custom-class {
|
|
85
|
+
color: var(--status-color-danger);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
49
88
|
```
|
|
89
|
+
|
|
90
|
+
> We are actively working on a long-term solution with the Front-End Platform team.
|
|
91
|
+
|
|
92
|
+
### `AnvilProvider`
|
|
93
|
+
|
|
94
|
+
When using the Anvil2 component library, we recommend wrapping the top level of your app in the `AnvilProvider` component, which also supports light/dark themes, localization, and `data-tracking-id` configurations:
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
50
97
|
import { AnvilProvider } from "@servicetitan/anvil2";
|
|
51
98
|
|
|
52
|
-
<AnvilProvider themeData={...} localizationData={...}>
|
|
99
|
+
<AnvilProvider themeData={...} localizationData={...} trackingIdData={...}>
|
|
53
100
|
...
|
|
54
101
|
</AnvilProvider>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Data Tracking IDs for FullStory
|
|
55
105
|
|
|
106
|
+
In order to enable consistent FullStory data tracking with Anvil2 components, a `data-tracking-id` is automatically generated for all **interactive** components. This id will only change if certain props change, which are determined on a per-component basis.
|
|
107
|
+
|
|
108
|
+
If your team or product already has a different strategy for tagging components in place, you can disable the auto-generated `data-tracking-id` tags using the `AnvilProvider.trackingIdData` or `TrackingProvider.optOut`:
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
// Using AnvilProvider
|
|
112
|
+
<AnvilProvider trackingIdData={{ optOut: true }}>...</AnvilProvider>
|
|
113
|
+
|
|
114
|
+
// Using TrackingProvider
|
|
115
|
+
<TrackingProvider scope="ST" optOut>...</TrackingProvider>
|
|
56
116
|
```
|
|
57
117
|
|
|
58
118
|
# Documentation
|
|
@@ -61,4 +121,8 @@ You can read the Anvil2 docs at: https://anvil.servicetitan.com/
|
|
|
61
121
|
|
|
62
122
|
# Contributing
|
|
63
123
|
|
|
64
|
-
We welcome contributions of all kinds from design to code
|
|
124
|
+
We welcome contributions of all kinds from design to code!
|
|
125
|
+
|
|
126
|
+
Please reach out to our team in [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) if you would like to make a contribution.
|
|
127
|
+
|
|
128
|
+
Check out the [root-level Contributing docs](../../README.md#contributing) for more details on making changes to this package.
|
package/dist/Alert3.js
CHANGED
|
@@ -34,9 +34,6 @@ const statusIconMap = {
|
|
|
34
34
|
warning: SvgWarning,
|
|
35
35
|
danger: SvgError
|
|
36
36
|
};
|
|
37
|
-
const getIcon = (status = "info") => {
|
|
38
|
-
return statusIconMap[status];
|
|
39
|
-
};
|
|
40
37
|
const Alert = forwardRef((props, ref) => {
|
|
41
38
|
const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
|
|
42
39
|
const {
|
|
@@ -45,6 +42,7 @@ const Alert = forwardRef((props, ref) => {
|
|
|
45
42
|
title,
|
|
46
43
|
status = "info",
|
|
47
44
|
style,
|
|
45
|
+
onClose,
|
|
48
46
|
...rest
|
|
49
47
|
} = componentProps;
|
|
50
48
|
const alertCx = cx(styles["alert"], className, {
|
|
@@ -73,19 +71,19 @@ const Alert = forwardRef((props, ref) => {
|
|
|
73
71
|
{
|
|
74
72
|
size: "large",
|
|
75
73
|
className: styles["status-icon"],
|
|
76
|
-
svg:
|
|
74
|
+
svg: statusIconMap[status ?? "info"]
|
|
77
75
|
}
|
|
78
76
|
),
|
|
79
77
|
title
|
|
80
78
|
] }),
|
|
81
|
-
!!
|
|
79
|
+
!!onClose && /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
|
|
82
80
|
Button,
|
|
83
81
|
{
|
|
84
82
|
icon: SvgClose,
|
|
85
83
|
size: "small",
|
|
86
84
|
appearance: "ghost",
|
|
87
85
|
className: styles["close-button"],
|
|
88
|
-
onClick: (e) =>
|
|
86
|
+
onClick: (e) => onClose(e),
|
|
89
87
|
"aria-label": `Dismiss ${status} alert`
|
|
90
88
|
}
|
|
91
89
|
) })
|
package/dist/Alert3.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert3.js","sources":["../../hammer-react/dist/Alert.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport cx from 'classnames';\nimport { Button } from './Button2.js';\nimport Close from '@servicetitan/hammer-icon/mdi/round/close.svg';\nimport Info from '@servicetitan/hammer-icon/mdi/round/info.svg';\nimport Warning from '@servicetitan/hammer-icon/mdi/round/warning.svg';\nimport Danger from '@servicetitan/hammer-icon/mdi/round/error.svg';\nimport Success from '@servicetitan/hammer-icon/mdi/round/check_circle.svg';\nimport { Icon } from './Icon.js';\nimport { useLayoutPropsUtil } from './useLayoutPropsUtil.js';\n\nimport './index.css';const alert = \"_alert_1885o_4\";\nconst content = \"_content_1885o_36\";\nconst top = \"_top_1885o_44\";\nconst success = \"_success_1885o_62\";\nconst warning = \"_warning_1885o_68\";\nconst danger = \"_danger_1885o_74\";\nconst styles = {\n\talert: alert,\n\t\"close-container\": \"_close-container_1885o_29\",\n\tcontent: content,\n\ttop: top,\n\t\"title-container\": \"_title-container_1885o_50\",\n\t\"status-icon\": \"_status-icon_1885o_58\",\n\tsuccess: success,\n\twarning: warning,\n\tdanger: danger,\n\t\"close-button\": \"_close-button_1885o_82\"\n};\n\nconst statusIconMap = {\n info: Info,\n success: Success,\n warning: Warning,\n danger: Danger\n};\nconst
|
|
1
|
+
{"version":3,"file":"Alert3.js","sources":["../../hammer-react/dist/Alert.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport cx from 'classnames';\nimport { Button } from './Button2.js';\nimport Close from '@servicetitan/hammer-icon/mdi/round/close.svg';\nimport Info from '@servicetitan/hammer-icon/mdi/round/info.svg';\nimport Warning from '@servicetitan/hammer-icon/mdi/round/warning.svg';\nimport Danger from '@servicetitan/hammer-icon/mdi/round/error.svg';\nimport Success from '@servicetitan/hammer-icon/mdi/round/check_circle.svg';\nimport { Icon } from './Icon.js';\nimport { useLayoutPropsUtil } from './useLayoutPropsUtil.js';\n\nimport './index.css';const alert = \"_alert_1885o_4\";\nconst content = \"_content_1885o_36\";\nconst top = \"_top_1885o_44\";\nconst success = \"_success_1885o_62\";\nconst warning = \"_warning_1885o_68\";\nconst danger = \"_danger_1885o_74\";\nconst styles = {\n\talert: alert,\n\t\"close-container\": \"_close-container_1885o_29\",\n\tcontent: content,\n\ttop: top,\n\t\"title-container\": \"_title-container_1885o_50\",\n\t\"status-icon\": \"_status-icon_1885o_58\",\n\tsuccess: success,\n\twarning: warning,\n\tdanger: danger,\n\t\"close-button\": \"_close-button_1885o_82\"\n};\n\nconst statusIconMap = {\n info: Info,\n success: Success,\n warning: Warning,\n danger: Danger\n};\nconst Alert = forwardRef((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n className,\n title,\n status = \"info\",\n style,\n onClose,\n ...rest\n } = componentProps;\n const alertCx = cx(styles[\"alert\"], className, {\n [styles[\"success\"]]: status === \"success\",\n [styles[\"warning\"]]: status === \"warning\",\n [styles[\"danger\"]]: status === \"danger\"\n });\n const styleCombined = {\n ...style,\n ...layoutStyles\n };\n return /* @__PURE__ */ jsxs(\n \"div\",\n {\n \"data-anv\": \"alert\",\n role: \"status\",\n className: alertCx,\n style: styleCombined,\n ...rest,\n ref,\n children: [\n /* @__PURE__ */ jsxs(\"div\", { className: styles[\"top\"], children: [\n /* @__PURE__ */ jsxs(\"span\", { className: styles[\"title-container\"], children: [\n /* @__PURE__ */ jsx(\n Icon,\n {\n size: \"large\",\n className: styles[\"status-icon\"],\n svg: statusIconMap[status ?? \"info\"]\n }\n ),\n title\n ] }),\n !!onClose && /* @__PURE__ */ jsx(\"span\", { className: styles[\"close-container\"], children: /* @__PURE__ */ jsx(\n Button,\n {\n icon: Close,\n size: \"small\",\n appearance: \"ghost\",\n className: styles[\"close-button\"],\n onClick: (e) => onClose(e),\n \"aria-label\": `Dismiss ${status} alert`\n }\n ) })\n ] }),\n children && /* @__PURE__ */ jsx(\"div\", { className: styles[\"content\"], children })\n ]\n }\n );\n});\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n//# sourceMappingURL=Alert.js.map\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":"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"}
|
package/dist/Combobox2.js
CHANGED
|
@@ -6409,7 +6409,6 @@ const ComboboxTrigger = ({
|
|
|
6409
6409
|
setIsReadOnly(readOnly);
|
|
6410
6410
|
}, [readOnly, setIsReadOnly]);
|
|
6411
6411
|
const labelUid = "label" + useId();
|
|
6412
|
-
const triggerId = id ?? labelUid;
|
|
6413
6412
|
const helperUid = "helper" + useId();
|
|
6414
6413
|
const placeholderUid = "placeholder" + useId();
|
|
6415
6414
|
const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
|
|
@@ -6491,7 +6490,7 @@ const ComboboxTrigger = ({
|
|
|
6491
6490
|
required,
|
|
6492
6491
|
moreInfo,
|
|
6493
6492
|
openMoreInfo,
|
|
6494
|
-
|
|
6493
|
+
id: labelUid
|
|
6495
6494
|
}),
|
|
6496
6495
|
children: label
|
|
6497
6496
|
}
|
|
@@ -6506,9 +6505,9 @@ const ComboboxTrigger = ({
|
|
|
6506
6505
|
disabled: isDisabled,
|
|
6507
6506
|
readOnly: isReadOnly,
|
|
6508
6507
|
ref: context.refs.setReference,
|
|
6509
|
-
id
|
|
6508
|
+
id,
|
|
6510
6509
|
"aria-describedby": ariaDescribedBy,
|
|
6511
|
-
"aria-labelledby":
|
|
6510
|
+
"aria-labelledby": labelUid
|
|
6512
6511
|
})
|
|
6513
6512
|
} : {
|
|
6514
6513
|
ref: context.refs.setReference,
|
|
@@ -6615,9 +6614,9 @@ const ComboboxTrigger = ({
|
|
|
6615
6614
|
readOnly: isReadOnly,
|
|
6616
6615
|
required,
|
|
6617
6616
|
autoComplete: "off",
|
|
6618
|
-
id
|
|
6617
|
+
id,
|
|
6619
6618
|
"aria-describedby": ariaDescribedBy,
|
|
6620
|
-
"aria-labelledby":
|
|
6619
|
+
"aria-labelledby": labelUid,
|
|
6621
6620
|
preventKeyAction: isOpen,
|
|
6622
6621
|
ref: inputRef
|
|
6623
6622
|
})
|
|
@@ -6628,9 +6627,9 @@ const ComboboxTrigger = ({
|
|
|
6628
6627
|
readOnly: isReadOnly,
|
|
6629
6628
|
required,
|
|
6630
6629
|
autoComplete: "off",
|
|
6631
|
-
id
|
|
6630
|
+
id,
|
|
6632
6631
|
"aria-describedby": ariaDescribedBy,
|
|
6633
|
-
"aria-labelledby":
|
|
6632
|
+
"aria-labelledby": labelUid,
|
|
6634
6633
|
ref: inputRef
|
|
6635
6634
|
}) : {}
|
|
6636
6635
|
}
|