carbon-react 112.0.1 → 112.0.3

package/esm/components/pages/page/page.component.d.ts

@@ -5,11 +5,13 @@ export interface PageProps extends PaddingProps {
     title: React.ReactNode;
     /** This component supports children. */
     children: React.ReactNode;
+    /** The ARIA role to be applied to the component */
+    role?: string;
     /** @ignore @private */
     transitionName?: () => string;
 }
 declare const Page: {
-    ({ title, children, ...rest }: PageProps): JSX.Element;
+    ({ role, title, children, ...rest }: PageProps): JSX.Element;
     displayName: string;
 };
 export default Page;

package/esm/components/pages/page/page.component.js

@@ -10,6 +10,7 @@ import { StyledPage, StyledPageContent } from "./page.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 const Page = ({
+  role,
   title,
   children,
   ...rest
@@ -30,7 +31,8 @@ const Page = ({
   }, {
     nodeRef: styledPageNodeRef
   }, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
-    ref: styledPageNodeRef
+    ref: styledPageNodeRef,
+    role: role
   }), /*#__PURE__*/React.createElement(FullScreenHeading, {
     hasContent: true
   }, title), /*#__PURE__*/React.createElement(StyledPageContent, _extends({
@@ -201,6 +203,7 @@ Page.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "role": PropTypes.string,
   "title": PropTypes.node,
   "transitionName": PropTypes.func
 };

package/esm/components/pages/page/page.style.d.ts

@@ -1,3 +1,3 @@
-declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
+declare const StyledPage: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledPage, StyledPageContent };

package/esm/components/pages/page/page.style.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { padding } from "styled-system";
 import BaseTheme from "../../../style/themes/base";
-const StyledPage = styled.article`
+const StyledPage = styled.div`
   width: 100%;
   height: 100%;
 `;

package/esm/components/textbox/__internal__/prefix.style.d.ts

@@ -1,2 +1,5 @@
-declare const StyledPrefix: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { TextboxProps } from "../textbox.component";
+declare const StyledPrefix: import("styled-components").StyledComponent<"span", any, {
+    size: NonNullable<TextboxProps["size"]>;
+}, never>;
 export default StyledPrefix;

package/esm/components/textbox/__internal__/prefix.style.js

@@ -1,7 +1,14 @@
 import styled from "styled-components";
+import InputSizes from "../../../__internal__/input/input-sizes.style";
 const StyledPrefix = styled.span`
   align-self: center;
   font-weight: 900;
-  margin-right: 8px;
+  margin-left: ${({
+  size
+}) => InputSizes[size].horizontalPadding}; // margin must match the original component padding
+
+  && + input {
+    padding-left: var(--spacing100);
+  }
 `;
 export default StyledPrefix;

package/esm/components/textbox/textbox.component.js

@@ -114,7 +114,8 @@ const Textbox = ({
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
-    "data-element": "textbox-prefix"
+    "data-element": "textbox-prefix",
+    size: size
   }, prefix), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
     required
   }, {

package/lib/components/pages/page/page.component.d.ts

@@ -5,11 +5,13 @@ export interface PageProps extends PaddingProps {
     title: React.ReactNode;
     /** This component supports children. */
     children: React.ReactNode;
+    /** The ARIA role to be applied to the component */
+    role?: string;
     /** @ignore @private */
     transitionName?: () => string;
 }
 declare const Page: {
-    ({ title, children, ...rest }: PageProps): JSX.Element;
+    ({ role, title, children, ...rest }: PageProps): JSX.Element;
     displayName: string;
 };
 export default Page;

package/lib/components/pages/page/page.component.js

@@ -30,6 +30,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const Page = ({
+  role,
   title,
   children,
   ...rest
@@ -50,7 +51,8 @@ const Page = ({
   }, {
     nodeRef: styledPageNodeRef
   }, rest), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", rest), {
-    ref: styledPageNodeRef
+    ref: styledPageNodeRef,
+    role: role
   }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
     hasContent: true
   }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
@@ -221,6 +223,7 @@ Page.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "role": _propTypes.default.string,
   "title": _propTypes.default.node,
   "transitionName": _propTypes.default.func
 };

package/lib/components/pages/page/page.style.d.ts

@@ -1,3 +1,3 @@
-declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
+declare const StyledPage: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledPage, StyledPageContent };

package/lib/components/pages/page/page.style.js

@@ -13,7 +13,7 @@ var _base = _interopRequireDefault(require("../../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledPage = _styledComponents.default.article`
+const StyledPage = _styledComponents.default.div`
   width: 100%;
   height: 100%;
 `;

package/lib/components/textbox/__internal__/prefix.style.d.ts

@@ -1,2 +1,5 @@
-declare const StyledPrefix: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { TextboxProps } from "../textbox.component";
+declare const StyledPrefix: import("styled-components").StyledComponent<"span", any, {
+    size: NonNullable<TextboxProps["size"]>;
+}, never>;
 export default StyledPrefix;

package/lib/components/textbox/__internal__/prefix.style.js

@@ -7,12 +7,20 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _inputSizes = _interopRequireDefault(require("../../../__internal__/input/input-sizes.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledPrefix = _styledComponents.default.span`
   align-self: center;
   font-weight: 900;
-  margin-right: 8px;
+  margin-left: ${({
+  size
+}) => _inputSizes.default[size].horizontalPadding}; // margin must match the original component padding
+
+  && + input {
+    padding-left: var(--spacing100);
+  }
 `;
 var _default = StyledPrefix;
 exports.default = _default;

package/lib/components/textbox/textbox.component.js

@@ -144,7 +144,8 @@ const Textbox = ({
     positionedChildren: positionedChildren,
     hasIcon: hasIconInside
   }, leftChildren, prefix && /*#__PURE__*/_react.default.createElement(_prefix.default, {
-    "data-element": "textbox-prefix"
+    "data-element": "textbox-prefix",
+    size: size
   }, prefix), /*#__PURE__*/_react.default.createElement(_input.Input, _extends({}, required && {
     required
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "112.0.1",
+  "version": "112.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",