@spaced-out/ui-design-system 0.2.6-beta.0 → 0.2.7

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.2.7](https://github.com/spaced-out/ui-design-system/compare/v0.2.6...v0.2.7) (2024-10-22)
+
+
+### Bug Fixes
+
+* updated color ([#278](https://github.com/spaced-out/ui-design-system/issues/278)) ([2a83623](https://github.com/spaced-out/ui-design-system/commit/2a83623a45bada08a78cdb9dda88645518b56cef))
+
+### [0.2.6](https://github.com/spaced-out/ui-design-system/compare/v0.2.6-beta.0...v0.2.6) (2024-10-22)
+
+
+### Bug Fixes
+
+* disabled button tab styling ([#281](https://github.com/spaced-out/ui-design-system/issues/281)) ([f99fdf9](https://github.com/spaced-out/ui-design-system/commit/f99fdf9115836ed99df6d72c2ed6068af16ec720))
+
 ### [0.2.6-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.5...v0.2.6-beta.0) (2024-10-21)
 
 

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js

@@ -30,7 +30,7 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props, {
     disabled: disabled,
     size: size,
-    type: id === selectedButtonTabId ? 'tertiary' : 'ghost',
+    type: "tertiary",
     ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_ButtonTabModule.default.buttonTabWrapper, {
@@ -38,7 +38,6 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_ButtonTabModule.default.smallButtonTab]: size === 'small',
         [_ButtonTabModule.default.onlyIcon]: iconName && !children,
         [_ButtonTabModule.default.isSelected]: id === selectedButtonTabId,
-        [_ButtonTabModule.default.isUnSelected]: id !== selectedButtonTabId,
         [_ButtonTabModule.default.disabled]: disabled,
         [_ButtonTabModule.default.leftCurved]: isLeftCurved,
         [_ButtonTabModule.default.rightCurved]: isRightCurved

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -54,7 +54,7 @@ export const ButtonTab: React$AbstractComponent<
       {...props}
       disabled={disabled}
       size={size}
-      type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
+      type="tertiary"
       ref={ref}
       classNames={{
         wrapper: classify(
@@ -64,7 +64,6 @@ export const ButtonTab: React$AbstractComponent<
             [css.smallButtonTab]: size === 'small',
             [css.onlyIcon]: iconName && !children,
             [css.isSelected]: id === selectedButtonTabId,
-            [css.isUnSelected]: id !== selectedButtonTabId,
             [css.disabled]: disabled,
             [css.leftCurved]: isLeftCurved,
             [css.rightCurved]: isRightCurved,

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -10,7 +10,9 @@
   size34
 ) from '../../../styles/variables/_size.css';
 @value (
-  spaceSmall
+  spaceNone,
+  spaceSmall,
+  spaceMedium
 ) from '../../../styles/variables/_space.css';
 @value (
   borderWidthPrimary,
@@ -18,72 +20,68 @@
   borderRadiusNone,
   borderRadiusMedium
 ) from '../../../styles/variables/_border.css';
+@value (elevationCard) from '../../../styles/variables/_elevation.css';
 
 .buttonTabWrapper {
-  padding-left: spaceSmall;
-  padding-right: spaceSmall;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusNone;
+  border-right-width: borderWidthNone;
+  text-align: left;
+  min-width: initial;
+  padding: spaceNone spaceMedium;
   height: size42;
   color: colorTextSecondary;
-  min-width: initial;
-  text-align: left;
-}
 
-.buttonTabWrapper .icon {
-  color: colorTextSecondary;
-}
+  &.mediumButtonTab {
+    height: size42;
+  }
 
-.buttonTabWrapper:hover {
-  color: colorTextPrimary;
-  background-color: initial;
-}
+  &.smallButtonTab {
+    height: size34;
+  }
 
-.buttonTabWrapper:hover .icon {
-  color: colorTextPrimary;
-}
+  &.rightCurved {
+    border-right-width: borderWidthPrimary;
+    border-top-right-radius: borderRadiusMedium;
+    border-bottom-right-radius: borderRadiusMedium;
+  }
 
-.buttonTabWrapper.mediumButtonTab {
-  height: size42;
-}
+  &.leftCurved {
+    border-top-left-radius: borderRadiusMedium;
+    border-bottom-left-radius: borderRadiusMedium;
+  }
 
-.buttonTabWrapper.smallButtonTab {
-  height: size34;
-}
+  &.disabled {
+    color: colorTextDisabled;
+    border: borderWidthPrimary solid colorBorderPrimary;
+    border-right-width: borderWidthNone;
+  }
 
-.onlyIcon {
-  color: colorTextSecondary;
-  padding-left: initial;
-  padding-right: initial;
-}
+  &:hover {
+    color: colorTextPrimary;
+    background-color: initial;
+  }
 
-.mediumButtonTab.onlyIcon {
-  max-width: size42;
-}
+  &:focus {
+    z-index: elevationCard;
+  }
 
-.smallButtonTab.onlyIcon {
-  max-width: size34;
+  &.icon {
+    color: colorTextSecondary;
+  }
 }
 
-.buttonTabWrapper.isSelected {
-  background-color: colorFillSecondary;
+.buttonTabWrapper:hover .icon {
   color: colorTextPrimary;
-  border-top-width: borderWidthPrimary;
-  border-right-width: borderWidthPrimary;
-  border-bottom-width: borderWidthPrimary;
-  border-style: solid;
-  border-color: colorBorderPrimary;
-}
-
-.buttonTabWrapper.leftCurved {
-  border-radius: borderRadiusMedium borderRadiusNone borderRadiusNone
-    borderRadiusMedium;
 }
 
-.buttonTabWrapper.rightCurved {
-  border-radius: borderRadiusNone borderRadiusMedium borderRadiusMedium
-    borderRadiusNone;
+.onlyIcon {
+  color: colorTextSecondary;
+  padding: spaceNone spaceSmall;
 }
 
-.buttonTabWrapper.isSelected:hover {
+.buttonTabWrapper.isSelected {
+  color: colorTextPrimary;
   background-color: colorFillSecondary;
 }
 
@@ -91,15 +89,6 @@
   color: colorTextPrimary;
 }
 
-.buttonTabWrapper.disabled {
-  color: colorTextDisabled;
-}
-
 .buttonTabWrapper.disabled .icon {
   color: colorTextDisabled;
 }
-
-.buttonTabWrapper.isUnSelected {
-  padding-left: spaceSmall;
-  padding-right: spaceSmall;
-}

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -49,23 +49,17 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } = child.props;
       const isFirst = index === 0;
       const isLast = index === unwrappedNodes.length - 1;
-      const isSingleChild = unwrappedNodes.length === 1;
       return /*#__PURE__*/React.cloneElement(child, {
         ...child.props,
         isFluid,
         size,
-        isLeftCurved: isFirst && !isSingleChild,
-        isRightCurved: isLast && !isSingleChild,
+        isLeftCurved: isFirst,
+        isRightCurved: isLast,
         disabled: disabledChild || disabled,
         selectedButtonTabId,
         onButtonTabSelect,
         classNames: {
-          wrapper: (0, _classify.default)(_ButtonTabsModule.default.buttonTab, {
-            [_ButtonTabsModule.default.firstChild]: isFirst && !isSingleChild,
-            [_ButtonTabsModule.default.lastChild]: isLast && !isSingleChild,
-            [_ButtonTabsModule.default.children]: !isFirst && !isLast,
-            [_ButtonTabsModule.default.singleChild]: isSingleChild
-          }, classNamesChild?.wrapper)
+          wrapper: classNamesChild?.wrapper
         }
       });
     }

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -77,28 +77,18 @@ export const ButtonTabs: React$AbstractComponent<
           child.props;
         const isFirst = index === 0;
         const isLast = index === unwrappedNodes.length - 1;
-        const isSingleChild = unwrappedNodes.length === 1;
 
         return React.cloneElement(child, {
           ...child.props,
           isFluid,
           size,
-          isLeftCurved: isFirst && !isSingleChild,
-          isRightCurved: isLast && !isSingleChild,
+          isLeftCurved: isFirst,
+          isRightCurved: isLast,
           disabled: disabledChild || disabled,
           selectedButtonTabId,
           onButtonTabSelect,
           classNames: {
-            wrapper: classify(
-              css.buttonTab,
-              {
-                [css.firstChild]: isFirst && !isSingleChild,
-                [css.lastChild]: isLast && !isSingleChild,
-                [css.children]: !isFirst && !isLast,
-                [css.singleChild]: isSingleChild,
-              },
-              classNamesChild?.wrapper,
-            ),
+            wrapper: classNamesChild?.wrapper,
           },
         });
       }

package/lib/components/ButtonTabs/ButtonTabs.module.css

@@ -1,6 +1,5 @@
 @value (
-  colorBackgroundTertiary,
-  colorBorderPrimary
+  colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 @value (
   size42, 
@@ -8,10 +7,7 @@
   sizeFluid
 ) from '../../styles/variables/_size.css';
 @value (
-  borderWidthNone,
-  borderWidthPrimary,
-  borderRadiusMedium,
-  borderRadiusNone
+  borderRadiusMedium
 ) from '../../styles/variables/_border.css';
 
 .buttonTabsWrapper {
@@ -19,8 +15,6 @@
   background-color: colorBackgroundTertiary;
   align-items: center;
   width: fit-content;
-  composes: borderTopPrimary from '../../styles/border.module.css';
-  composes: borderBottomPrimary from '../../styles/border.module.css';
   border-radius: borderRadiusMedium;
 }
 
@@ -35,19 +29,3 @@
 .buttonTabsWrapper.isFluid {
   width: sizeFluid;
 }
-
-.buttonTab {
-  border-color: colorBorderPrimary;
-  border-width: borderWidthNone borderWidthPrimary;
-  border-style: none solid;
-  border-radius: borderRadiusNone;
-}
-
-.children,
-.lastChild {
-  border-left-width: borderWidthNone;
-}
-
-.singleChild {
-  border-radius: borderRadiusMedium;
-}

package/lib/components/WeekdayPicker/WeekdayPicker.module.css

@@ -8,8 +8,10 @@
   colorButtonFillPrimaryHovered,
   colorTextDisabled,
   colorFillDisabled,
-  colorFocusPrimary
-) from '  ../../styles/variables/_color.css';
+  colorFocusPrimary,
+  colorBackgroundSecondary,
+  colorGrayLightest
+) from '../../styles/variables/_color.css';
 
 @value (spaceXXSmall,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
 @value (size42,size34) from '../../styles/variables/_size.css';
@@ -33,14 +35,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: colorFillSecondary;
+  background-color: colorBackgroundSecondary;
   color: colorTextSecondary;
   padding: spaceXSmall spaceSmall;
   border-radius: borderRadiusSmall;
 
   &:hover,
   &:focus-visible {
-    background-color: colorButtonFillTertiaryHovered;
+    background-color: colorGrayLightest;
     color: colorTextPrimary;
     cursor: pointer;
   }

package/package.json

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