@spaced-out/ui-design-system 0.1.103 → 0.1.104

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.
 
+### [0.1.104](https://github.com/spaced-out/ui-design-system/compare/v0.1.103...v0.1.104) (2024-07-04)
+
+
+### Bug Fixes
+
+* 🪛 text wrap fix for text based shimmer ([#234](https://github.com/spaced-out/ui-design-system/issues/234)) ([50d4e6c](https://github.com/spaced-out/ui-design-system/commit/50d4e6c424b0675d1e761553cd8f2f652dd0f48e))
+
 ### [0.1.103](https://github.com/spaced-out/ui-design-system/compare/v0.1.102...v0.1.103) (2024-07-03)
 
 

package/lib/components/Shimmer/Shimmer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
+exports.ShimmerWrapper = exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _border = require("../../styles/variables/_border");
 var _size = require("../../styles/variables/_size");
@@ -28,7 +28,23 @@ const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
   rectangular: _border.borderRadiusNone
 });
 exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = SHIMMER_TYPE_TO_BORDER_RADIUS_MAP;
-const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+const ShimmerWrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", null, children);
+};
+exports.ShimmerWrapper = ShimmerWrapper;
+const Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     show = true,
@@ -37,7 +53,7 @@ const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width = _size.size40,
     height = _size.sizeFluid,
     borderRadius
-  } = _ref;
+  } = _ref2;
   if (!show) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
@@ -54,10 +70,10 @@ const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 exports.Shimmer = Shimmer;
-const KPIShimmer = _ref2 => {
+const KPIShimmer = _ref3 => {
   let {
     textWidth = 150
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: _ShimmerModule.default.kpiBox
   }, /*#__PURE__*/React.createElement("div", {

package/lib/components/Shimmer/Shimmer.js.flow

@@ -43,6 +43,23 @@ export type ShimmerProps = {
   children?: React.Node,
 };
 
+export type ShimmerWrapperProps = {
+  children?: React.Node,
+};
+
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+export const ShimmerWrapper = ({
+  children,
+}: ShimmerWrapperProps): React$Element<'span'> => <span>{children}</span>;
+
 export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
   React.forwardRef<ShimmerProps, HTMLSpanElement>(
     (

package/lib/components/Shimmer/Shimmer.module.css

@@ -1,5 +1,5 @@
 @value (colorFillPrimary, colorNeutralLightest, colorNeutralLight, colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (spaceXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
+@value (spaceXSmall,spaceXXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
 @value (sizeFluid, size40, size252) from '../../styles/variables/_size.css';
 @value (borderRadiusXSmall, borderRadiusMedium) from '../../styles/variables/_border.css';
 @value (opacity20, opacity40, opacity60) from '../../styles/variables/_opacity.css';
@@ -13,7 +13,6 @@
   --width: size40;
   --border-radius: borderRadiusXSmall;
   --height: sizeFluid;
-  display: flex;
   height: var(--height);
   width: var(--width);
   border-radius: var(--border-radius);
@@ -26,10 +25,12 @@
   background-size: backgroundSizeInitial sizeFluid;
   animation: shimmer motionDuration infinite linear;
   vertical-align: middle;
-}
 
-.text {
-  margin: spaceNone spaceXSmall;
+  &.text {
+    margin-right: spaceXXSmall;
+    width: initial;
+    padding-left: var(--width);
+  }
 }
 
 .kpiBox {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.103",
+  "version": "0.1.104",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {