fix(button): add partially disabled support to button variants (#2139)

.changeset/pretty-ears-run.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+fix(button): add partially disabled support to button variants

src/components/ebay-button/button.stories.ts

@@ -107,7 +107,7 @@ export default {
             },
             type: { category: "Options" },
         },
-        "partially-disabled": {
+        partiallyDisabled: {
             description:
                 "programmatically disabled, but remains keyboard focusable",
             table: {
@@ -127,7 +127,7 @@ export default {
                 category: "Toggles",
             },
         },
-        "fixed-height": {
+        fixedHeight: {
             description: "fixes the height based on `size`",
             table: {
                 defaultValue: {
@@ -138,7 +138,7 @@ export default {
         },
         truncate: {
             description:
-                "used in conjunction with `fixed-height`; truncates text to single line with ellipsis when text overflows",
+                "used in conjunction with `fixedHeight`; truncates text to single line with ellipsis when text overflows",
             table: {
                 defaultValue: {
                     summary: "false",
@@ -207,9 +207,9 @@ Standard.args = {
     size: null,
     disabled: false,
     priority: null,
-    "partially-disabled": false,
+    partiallyDisabled: false,
     transparent: false,
-    "fixed-height": false,
+    fixedHeight: false,
     truncate: false,
 };
 

src/components/ebay-button/index.marko

@@ -19,9 +19,9 @@ export interface ButtonInput extends Omit<Marko.Input<"button">, `on${string}`>
     fluid?: boolean;
     borderless?: boolean;
     disabled?: boolean;
-    "partially-disabled"?: boolean;
+    partiallyDisabled?: boolean;
     transparent?: boolean;
-    "fixed-height"?: boolean;
+    fixedHeight?: boolean;
     truncate?: boolean;
     split?: string;
     "a11y-text"?: AttrString;

src/components/ebay-icon-button/component-browser.ts

@@ -1,13 +1,14 @@
 import type { AttrString } from "marko/tags-html";
 import * as eventUtils from "../../common/event-utils";
 import type { WithNormalizedProps } from "../../global";
+import type { Input as ButtonInput } from "../ebay-button/index.marko";
 
 interface IconButtonInput extends Omit<Marko.Input<"button">, `on${string}`> {
     "badge-number"?: number | string;
     href?: string;
     transparent?: boolean;
     size?: "small" | "large";
-    "partially-disabled"?: boolean;
+    partiallyDisabled?: ButtonInput["partiallyDisabled"];
     "badge-aria-label"?: AttrString;
     "on-click"?: (event: { originalEvent: MouseEvent }) => void;
     "on-escape"?: (event: { originalEvent: KeyboardEvent }) => void;

src/components/ebay-menu-button/component.ts

@@ -27,6 +27,7 @@ interface MenuButtonInput
     "prefix-id"?: string;
     variant?: "overflow" | "form" | "button" | "icon";
     borderless?: boolean;
+    partiallyDisabled?: EbayButtonInput["partiallyDisabled"];
     priority?: "primary" | "secondary" | "tertiary" | "delete" | "none";
     size?: EbayButtonInput["size"];
     transparent?: boolean;

src/components/ebay-menu-button/index.marko

@@ -14,6 +14,7 @@ $ const {
     fixWidth,
     borderless,
     size,
+    partiallyDisabled,
     priority: inputPriority,
     disabled,
     variant: inputVariant,
@@ -78,6 +79,7 @@ $ {
         aria-labelledby=(labelId && `${prefixId} ${labelId}`)
         split=(isButtonVariant ? split : undefined)
         disabled=disabled
+        partiallyDisabled=partiallyDisabled
         on-escape("handleButtonEscape")
         key="button">
         <if(isOverflowVariant)>

src/components/ebay-menu-button/marko-tag.json

@@ -21,6 +21,7 @@
     "@fix-width": "boolean",
     "@borderless": "boolean",
     "@size": "string",
+    "@partially-disabled": "boolean",
     "@priority": "string",
     "@prefix-id": "string",
     "@prefix-label": "string",

src/components/ebay-menu-button/menu-button.stories.ts

@@ -108,6 +108,16 @@ export default {
             description:
                 'Will collapse whole menu when an item is selected in menu. Typically used in `type="radio"`',
         },
+        partiallyDisabled: {
+            description:
+                "programmatically disabled, but remains keyboard focusable",
+            control: { type: "boolean" },
+            table: {
+                defaultValue: {
+                    summary: "false",
+                },
+            },
+        },
         prefixId: {
             control: { type: "text" },
             description:

src/components/ebay-split-button/component.ts

@@ -6,6 +6,7 @@ interface SplitButtonInput extends Omit<MenuButtonInput, `on${string}`> {
     size?: ButtonInput["size"];
     disabled?: ButtonInput["disabled"];
     priority?: ButtonInput["priority"];
+    partiallyDisabled?: ButtonInput["partiallyDisabled"];
     "body-state"?: ButtonInput["bodyState"];
     href?: ButtonInput["href"];
     "a11y-button-loading-text"?: ButtonInput["a11yText"];

src/components/ebay-split-button/index.marko

@@ -5,6 +5,7 @@ $ const {
     bodyState,
     disabled,
     href,
+    partiallyDisabled,
     priority,
     renderBody,
     size,
@@ -27,6 +28,7 @@ $ const {
         bodyState=bodyState
         href=href
         a11yText=a11yButtonLoadingText
+        partiallyDisabled=partiallyDisabled
     >
         <span.btn__cell><span.btn__text><${renderBody}/></span></span>
     </ebay-button>
@@ -43,6 +45,7 @@ $ const {
         transparent=transparent
         reverse
         variant='button'
+        partiallyDisabled=partiallyDisabled
         ...menuButtonInput
     />
 </span>

src/components/ebay-split-button/split-button.stories.ts

@@ -98,7 +98,7 @@ export default {
                 },
             },
         },
-        "partially-disabled": {
+        partiallyDisabled: {
             description:
                 "programmatically disabled, but remains keyboard focusable",
             control: { type: "boolean" },