@surveycake/rc 3.0.0-alpha.50 → 3.0.0-alpha.51

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.0-alpha.51](https://fox.25sprout.com/surveycake/sdk/rc/compare/v3.0.0-alpha.50...v3.0.0-alpha.51) (2022-05-23)
+
+
+### Features
+
+* V1 Typography supports align setting - [SUR-673] ([80d160c](https://fox.25sprout.com/surveycake/sdk/rc/commit/80d160c647992065646108f3675110f31aad5d04))
+
 ## [3.0.0-alpha.50](https://fox.25sprout.com/surveycake/sdk/rc/compare/v3.0.0-alpha.49...v3.0.0-alpha.50) (2022-05-23)
 
 

package/dist/Typography/index.d.ts

@@ -21,6 +21,7 @@ export interface TypographyProps extends Omit<HTMLAttributes<TypographyElement>,
      * If `true`, the text will not wrap, but instead will truncate with an ellipsis.
      */
     noWrap?: boolean;
+    align?: 'C' | 'R' | '';
 }
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<TypographyElement>>;
 export default Typography;

package/dist/rc.cjs.development.js

@@ -2821,6 +2821,10 @@ function resolveThemeColorProp(theme, color) {
   return typeof color === 'function' ? color(theme) : resolveThemeColorByPath(theme, color);
 }
 
+var ALIGN_MAP = {
+  C: 'center',
+  R: 'right'
+};
 var useStyles$2 =
 /*#__PURE__*/
 makeStyles([['typography', function (theme, _ref) {
@@ -2828,13 +2832,15 @@ makeStyles([['typography', function (theme, _ref) {
       color = _ref[1],
       weight = _ref[2],
       gutterBottom = _ref[3],
-      noWrap = _ref[4];
+      noWrap = _ref[4],
+      align = _ref[5];
   var fontSize = theme.typography.fontSize[variant];
   var fontWeight = theme.typography.fontWeight[weight];
-  var lineHeight = fontSize + 8; // On IE11, it's height may be strange when inserted an image children whose width > height.
+  var lineHeight = fontSize + 8;
+  var textAlign = ALIGN_MAP[align]; // On IE11, it's height may be strange when inserted an image children whose width > height.
   // The solution is to add min-height 0.01px. I don't know how it works.
 
-  return ["\n\t\t\t\tcolor: " + (resolveThemeColorProp(theme, color) || 'inherit') + ";\n\t\t\t\tfont-weight: " + fontWeight + ";\n\t\t\t\tfont-size: " + fontSize + "px;\n\t\t\t\tline-height: " + lineHeight + "px;\n\t\t\t\tmin-height: 0.01px;\n\t\t\t\tmargin: 0;\n\t\t\t\tmargin-bottom: " + (gutterBottom ? '0.35em' : 0) + ";\n\t\t\t", noWrap && "\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t"];
+  return ["\n\t\t\t\tcolor: " + (resolveThemeColorProp(theme, color) || 'inherit') + ";\n\t\t\t\tfont-weight: " + fontWeight + ";\n\t\t\t\tfont-size: " + fontSize + "px;\n\t\t\t\tline-height: " + lineHeight + "px;\n\t\t\t\tmin-height: 0.01px;\n\t\t\t\tmargin: 0;\n\t\t\t\tmargin-bottom: " + (gutterBottom ? '0.35em' : 0) + ";\n\t\t\t", noWrap && "\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t", textAlign && "text-align: " + textAlign];
 }]]);
 
 var Typography$1 =
@@ -2847,9 +2853,10 @@ React.forwardRef(function (_ref, ref) {
       weight = _ref.weight,
       gutterBottom = _ref.gutterBottom,
       noWrap = _ref.noWrap,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant", "color", "weight", "gutterBottom", "noWrap"]);
+      align = _ref.align,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant", "color", "weight", "gutterBottom", "noWrap", "align"]);
 
-  var styles = useStyles$2([Vari, color, weight, gutterBottom, noWrap]);
+  var styles = useStyles$2([Vari, color, weight, gutterBottom, noWrap, align]);
   return React__default.createElement(Vari, Object.assign({}, props, {
     className: className ? emotion.cx(styles.typography, className) : styles.typography,
     ref: ref