carbon-react 152.3.1 → 152.4.0

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.
Files changed (11) hide show
  1. package/esm/components/dialog/dialog.component.d.ts +1 -0
  2. package/esm/components/dialog/dialog.component.js +2 -0
  3. package/esm/components/dialog/dialog.style.d.ts +1 -0
  4. package/esm/components/dialog/dialog.style.js +14 -0
  5. package/esm/components/tile/tile.style.d.ts +1 -1
  6. package/lib/components/dialog/dialog.component.d.ts +1 -0
  7. package/lib/components/dialog/dialog.component.js +2 -0
  8. package/lib/components/dialog/dialog.style.d.ts +1 -0
  9. package/lib/components/dialog/dialog.style.js +14 -0
  10. package/lib/components/tile/tile.style.d.ts +1 -1
  11. package/package.json +1 -1
package/esm/components/dialog/dialog.component.d.ts CHANGED
@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
46
46
  height?: string;
47
47
  /** Adds Help tooltip to Header */
48
48
  help?: string;
49
+ highlightVariant?: string;
49
50
  /** A custom close event handler */
50
51
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
51
52
  /** Determines if the close icon is shown */
package/esm/components/dialog/dialog.component.js CHANGED
@@ -31,6 +31,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
31
31
  bespokeFocusTrap,
32
32
  disableClose,
33
33
  help,
34
+ highlightVariant = "default",
34
35
  role = "dialog",
35
36
  contentPadding = {},
36
37
  greyBackground = false,
@@ -115,6 +116,7 @@ export const Dialog = /*#__PURE__*/forwardRef(({
115
116
  "aria-modal": isTopModal ? true : undefined,
116
117
  ref: containerRef
117
118
  }, dialogProps, {
119
+ highlightVariant: highlightVariant,
118
120
  role: role,
119
121
  tabIndex: -1
120
122
  }, contentPadding, {
package/esm/components/dialog/dialog.style.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
3
3
  declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
4
4
  dialogHeight?: string | undefined;
5
5
  backgroundColor: string;
6
+ highlightVariant?: string | undefined;
6
7
  } & ContentPaddingInterface, never>;
7
8
  declare type StyledDialogTitleProps = {
8
9
  showCloseIcon?: boolean;
package/esm/components/dialog/dialog.style.js CHANGED
@@ -51,6 +51,20 @@ const StyledDialog = styled.div`
51
51
  outline: none;
52
52
  }
53
53
 
54
+ ${({
55
+ highlightVariant
56
+ }) => highlightVariant === "ai" && `
57
+ &::before {
58
+ content: "";
59
+ position: absolute;
60
+ top: -8px;
61
+ height: 100px;
62
+ width: 100%;
63
+ z-index: -1;
64
+ background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
65
+ border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
66
+ }`}
67
+
54
68
  ${({
55
69
  backgroundColor
56
70
  }) => css`
package/esm/components/tile/tile.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SpaceProps } from "styled-system";
2
2
  import { TileProps } from "./tile.component";
3
- declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
3
+ declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
4
4
  isHorizontal?: boolean | undefined;
5
5
  } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
6
6
  export default StyledTile;
package/lib/components/dialog/dialog.component.d.ts CHANGED
@@ -46,6 +46,7 @@ export interface DialogProps extends ModalProps, TagProps {
46
46
  height?: string;
47
47
  /** Adds Help tooltip to Header */
48
48
  help?: string;
49
+ highlightVariant?: string;
49
50
  /** A custom close event handler */
50
51
  onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
51
52
  /** Determines if the close icon is shown */
package/lib/components/dialog/dialog.component.js CHANGED
@@ -40,6 +40,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
40
40
  bespokeFocusTrap,
41
41
  disableClose,
42
42
  help,
43
+ highlightVariant = "default",
43
44
  role = "dialog",
44
45
  contentPadding = {},
45
46
  greyBackground = false,
@@ -124,6 +125,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
124
125
  "aria-modal": isTopModal ? true : undefined,
125
126
  ref: containerRef
126
127
  }, dialogProps, {
128
+ highlightVariant: highlightVariant,
127
129
  role: role,
128
130
  tabIndex: -1
129
131
  }, contentPadding, {
package/lib/components/dialog/dialog.style.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const DialogPositioner: import("styled-components").StyledComponent<"div
3
3
  declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
4
4
  dialogHeight?: string | undefined;
5
5
  backgroundColor: string;
6
+ highlightVariant?: string | undefined;
6
7
  } & ContentPaddingInterface, never>;
7
8
  declare type StyledDialogTitleProps = {
8
9
  showCloseIcon?: boolean;
package/lib/components/dialog/dialog.style.js CHANGED
@@ -60,6 +60,20 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
60
60
  outline: none;
61
61
  }
62
62
 
63
+ ${({
64
+ highlightVariant
65
+ }) => highlightVariant === "ai" && `
66
+ &::before {
67
+ content: "";
68
+ position: absolute;
69
+ top: -8px;
70
+ height: 100px;
71
+ width: 100%;
72
+ z-index: -1;
73
+ background: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
74
+ border-radius: var(--borderRadius200) var(--borderRadius200) 0 0;
75
+ }`}
76
+
63
77
  ${({
64
78
  backgroundColor
65
79
  }) => (0, _styledComponents.css)`
package/lib/components/tile/tile.style.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SpaceProps } from "styled-system";
2
2
  import { TileProps } from "./tile.component";
3
- declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
3
+ declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
4
4
  isHorizontal?: boolean | undefined;
5
5
  } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
6
6
  export default StyledTile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "152.3.1",
3
+ "version": "152.4.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",