@spaced-out/ui-design-system 0.1.105 → 0.1.107

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.107](https://github.com/spaced-out/ui-design-system/compare/v0.1.106...v0.1.107) (2024-07-09)
+
+
+### Bug Fixes
+
+* 🔒 disabled state fix ([#236](https://github.com/spaced-out/ui-design-system/issues/236)) ([4774285](https://github.com/spaced-out/ui-design-system/commit/4774285ed6b1c59d9a774873314a0303c0efe579))
+
+### [0.1.106](https://github.com/spaced-out/ui-design-system/compare/v0.1.105...v0.1.106) (2024-07-08)
+
+
+### Bug Fixes
+
+* 🔘 kpi shimmer css change ([9c847f5](https://github.com/spaced-out/ui-design-system/commit/9c847f51637956b33758f97c3e0f97b09e26f4a4))
+
 ### [0.1.105](https://github.com/spaced-out/ui-design-system/compare/v0.1.104...v0.1.105) (2024-07-08)
 
 

package/lib/components/Checkbox/Checkbox.js

@@ -90,7 +90,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     size: "small",
     type: "regular"
   }))), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_CheckboxModule.default.checkboxLabel, classNames?.label)
+    className: (0, _classify.default)(_CheckboxModule.default.checkboxLabel, {
+      [_CheckboxModule.default.labelDisabled]: disabled
+    }, classNames?.label)
   }, children));
 });
 exports.Checkbox = Checkbox;

package/lib/components/Checkbox/Checkbox.js.flow

@@ -146,7 +146,13 @@ export const Checkbox: React$AbstractComponent<
           </span>
         </span>
         {React.Children.count(children) > 0 && (
-          <div className={classify(css.checkboxLabel, classNames?.label)}>
+          <div
+            className={classify(
+              css.checkboxLabel,
+              {[css.labelDisabled]: disabled},
+              classNames?.label,
+            )}
+          >
             {children}
           </div>
         )}

package/lib/components/Checkbox/Checkbox.module.css

@@ -12,7 +12,8 @@
   colorDanger,
   colorFocusPrimary,
   colorFocusDanger,
-  colorBackgroundTertiary
+  colorBackgroundTertiary,
+  colorTextDisabled
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -163,3 +164,7 @@ input[type='checkbox']:checked + .error {
   composes: formLabelMedium from '../../styles/typography.module.css';
   composes: secondary from '../../styles/typography.module.css';
 }
+
+.labelDisabled {
+  color: colorTextDisabled;
+}

package/lib/components/RadioButton/RadioButton.js

@@ -74,7 +74,9 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     "aria-label": ariaLabel || children
   }, props)), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     color: "secondary",
-    className: (0, _classify.default)(_RadioButtonModule.default.radioLabel, classNames?.label)
+    className: (0, _classify.default)(_RadioButtonModule.default.radioLabel, {
+      [_RadioButtonModule.default.labelDisabled]: disabled
+    }, classNames?.label)
   }, children));
 });
 exports.RadioButton = RadioButton;

package/lib/components/RadioButton/RadioButton.js.flow

@@ -115,7 +115,11 @@ export const RadioButton: React$AbstractComponent<
         {React.Children.count(children) > 0 && (
           <div
             color="secondary"
-            className={classify(css.radioLabel, classNames?.label)}
+            className={classify(
+              css.radioLabel,
+              {[css.labelDisabled]: disabled},
+              classNames?.label,
+            )}
           >
             {children}
           </div>

package/lib/components/RadioButton/RadioButton.module.css

@@ -12,7 +12,8 @@
   colorFillPrimary,
   colorFillDisabled,
   colorFocusPrimary,
-  colorFocusDanger
+  colorFocusDanger,
+  colorTextDisabled
 ) from '../../styles/variables/_color.css';
 
 @value (
@@ -100,6 +101,10 @@
   composes: secondary from '../../styles/typography.module.css';
 }
 
+.labelDisabled {
+  color: colorTextDisabled;
+}
+
 .horizontalRadioButton {
   flex: 1 0 size160; /*  grow, don't shrink, start with size160 width */
 }

package/lib/components/Shimmer/Shimmer.js

@@ -82,13 +82,13 @@ const KPIShimmer = _ref3 => {
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ShimmerModule.default.kpiBox, classNames?.wrapper)
   }, hasIcon && /*#__PURE__*/React.createElement("div", {
-    className: _ShimmerModule.default.section
+    className: (0, _classify.default)(_ShimmerModule.default.section, _ShimmerModule.default.iconSection, classNames?.icon)
   }, /*#__PURE__*/React.createElement(Shimmer, {
     type: "rounded",
     width: 60,
     height: 60
   })), /*#__PURE__*/React.createElement("div", {
-    className: _ShimmerModule.default.section
+    className: (0, _classify.default)(_ShimmerModule.default.section, classNames?.text)
   }, hasTopContent && /*#__PURE__*/React.createElement(Shimmer, {
     type: "text",
     width: textWidth,

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

@@ -96,7 +96,11 @@ export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
     },
   );
 
-type KPIShimmerClassNames = $ReadOnly<{wrapper?: string}>;
+type KPIShimmerClassNames = $ReadOnly<{
+  wrapper?: string,
+  icon?: string,
+  text?: string,
+}>;
 
 export type KPIShimmerProps = {
   textWidth?: number | string,
@@ -117,12 +121,12 @@ export const KPIShimmer = ({
 }: KPIShimmerProps): React.Node => (
   <div className={classify(css.kpiBox, classNames?.wrapper)}>
     {hasIcon && (
-      <div className={css.section}>
+      <div className={classify(css.section, css.iconSection, classNames?.icon)}>
         <Shimmer type="rounded" width={60} height={60}></Shimmer>
       </div>
     )}
 
-    <div className={css.section}>
+    <div className={classify(css.section, classNames?.text)}>
       {hasTopContent && (
         <Shimmer type="text" width={textWidth} height={15}></Shimmer>
       )}

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

@@ -54,6 +54,10 @@
   align-items: center;
 }
 
+.iconSection {
+  width: initial;
+}
+
 @keyframes shimmer {
   from {
     background-position: backgroundSizeInitial spaceNone;

package/package.json

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