@automattic/vip-design-system 2.13.5 → 2.13.6

package/build/system/Form/Checkbox/styles.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { baseControlBorderStyle, baseControlFocusStyle, inputBaseBackground, inputBaseText } from '../Input.styles';
+import { baseControlBorderStyle, baseControlFocusStyle, inputBaseBackground } from '../Input.styles';
 
 // The output willl be 16px because of the 1px border.
 var CHECKBOX_SIZE = 14;
@@ -27,7 +27,6 @@ export var checkboxStyle = function checkboxStyle(variant) {
     },
     '& ~ label': {
       fontWeight: 'regular',
-      color: inputBaseText,
       m: 0,
       ml: 2
     },

package/build/system/Form/Label.js

@@ -33,7 +33,10 @@ export var Label = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
   return _jsxs(Box, _extends({
     as: as,
     sx: _extends({
-      all: 'unset'
+      margin: 0,
+      padding: 0,
+      border: 0,
+      outline: 0
     }, baseLabelStyle, {
       display: 'block',
       mb: 2,

package/build/system/Form/Label.stories.d.ts

@@ -1,8 +1,8 @@
 /** @jsxImportSource theme-ui */
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react").JSX.Element;
-export declare const Required: () => import("react").JSX.Element;
+import { Label } from '..';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Default: Story;
+export declare const Required: Story;

package/build/system/Form/Label.stories.js

@@ -1,32 +1,53 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /** @jsxImportSource theme-ui */
 
-/**
- * Internal dependencies
- */
-import { Form, Label } from '..';
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { Fragment as _Fragment } from "theme-ui/jsx-runtime";
-export default {
-  title: 'Form/Label'
+import { Label } from '..';
+var meta = {
+  title: 'Form/Label',
+  component: Label,
+  parameters: {
+    docs: {
+      source: {
+        type: 'auto'
+      }
+    }
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      defaultValue: 'Label text',
+      description: 'The label content'
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Whether to show the required label'
+    },
+    clickable: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Whether the label should have pointer cursor'
+    },
+    sx: {
+      control: 'object',
+      description: 'Theme UI sx-style overrides'
+    },
+    as: {
+      control: 'select',
+      options: ['label', 'span', 'div'],
+      defaultValue: 'label',
+      description: 'The HTML element to render as'
+    }
+  }
 };
-var DefaultComponent = function DefaultComponent(props) {
-  return _jsx(Form.Root, {
-    children: _jsx(Label, _extends({}, props, {
-      children: "Label"
-    }))
-  });
+export default meta;
+export var Default = {
+  args: {
+    children: 'Label text'
+  }
 };
-export var Default = function Default() {
-  return _jsx(_Fragment, {
-    children: _jsx(DefaultComponent, {})
-  });
-};
-export var Required = function Required() {
-  var args = {
+export var Required = {
+  args: {
+    children: 'Label text',
     required: true
-  };
-  return _jsx(_Fragment, {
-    children: _jsx(DefaultComponent, _extends({}, args))
-  });
+  }
 };

package/build/system/theme/generated/valet-theme-dark.json

@@ -603,6 +603,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "#d7d4d3",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#d7d4d3",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#9b9796",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -665,6 +687,10 @@
         "type": "color",
         "value": "#e29101"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "#ff7b28"
+      },
       "info": {
         "type": "color",
         "value": "#30b5c4"

package/build/system/theme/generated/valet-theme-light.json

@@ -851,6 +851,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "#d7d4d3",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#d7d4d3",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#9b9796",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -913,6 +935,10 @@
         "type": "color",
         "value": "#b86e01"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "#e76205"
+      },
       "info": {
         "type": "color",
         "value": "#0190a0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.13.5",
+  "version": "2.13.6",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Form/Checkbox/styles.ts

@@ -4,7 +4,6 @@ import {
 	baseControlBorderStyle,
 	baseControlFocusStyle,
 	inputBaseBackground,
-	inputBaseText,
 } from '../Input.styles';
 
 // The output willl be 16px because of the 1px border.
@@ -36,7 +35,6 @@ export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => {
 		},
 		'& ~ label': {
 			fontWeight: 'regular',
-			color: inputBaseText,
 			m: 0,
 			ml: 2,
 		},

package/src/system/Form/Label.stories.tsx

@@ -1,36 +1,55 @@
 /** @jsxImportSource theme-ui */
 
-/**
- * Internal dependencies
- */
-import { Form, Label } from '..';
+import { Label } from '..';
 
-export default {
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta< typeof Label > = {
 	title: 'Form/Label',
+	component: Label,
+	parameters: { docs: { source: { type: 'auto' } } },
+	argTypes: {
+		children: {
+			control: 'text',
+			defaultValue: 'Label text',
+			description: 'The label content',
+		},
+		required: {
+			control: 'boolean',
+			defaultValue: false,
+			description: 'Whether to show the required label',
+		},
+		clickable: {
+			control: 'boolean',
+			defaultValue: false,
+			description: 'Whether the label should have pointer cursor',
+		},
+		sx: {
+			control: 'object',
+			description: 'Theme UI sx-style overrides',
+		},
+		as: {
+			control: 'select',
+			options: [ 'label', 'span', 'div' ],
+			defaultValue: 'label',
+			description: 'The HTML element to render as',
+		},
+	},
 };
 
-const DefaultComponent = props => (
-	<Form.Root>
-		<Label { ...props }>Label</Label>
-	</Form.Root>
-);
+export default meta;
+
+type Story = StoryObj< typeof Label >;
 
-export const Default = () => {
-	return (
-		<>
-			<DefaultComponent />
-		</>
-	);
+export const Default: Story = {
+	args: {
+		children: 'Label text',
+	},
 };
 
-export const Required = () => {
-	const args = {
+export const Required: Story = {
+	args: {
+		children: 'Label text',
 		required: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...args } />
-		</>
-	);
+	},
 };

package/src/system/Form/Label.tsx

@@ -31,7 +31,10 @@ export const Label = React.forwardRef< HTMLLabelElement, LabelProps >(
 		<Box
 			as={ as }
 			sx={ {
-				all: 'unset',
+				margin: 0,
+				padding: 0,
+				border: 0,
+				outline: 0,
 				...baseLabelStyle,
 				display: 'block',
 				mb: 2,

package/src/system/theme/generated/valet-theme-dark.json

@@ -603,6 +603,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "#d7d4d3",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#d7d4d3",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#9b9796",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -665,6 +687,10 @@
         "type": "color",
         "value": "#e29101"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "#ff7b28"
+      },
       "info": {
         "type": "color",
         "value": "#30b5c4"

package/src/system/theme/generated/valet-theme-light.json

@@ -851,6 +851,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "#d7d4d3",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#d7d4d3",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#9b9796",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -913,6 +935,10 @@
         "type": "color",
         "value": "#b86e01"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "#e76205"
+      },
       "info": {
         "type": "color",
         "value": "#0190a0"

package/tokens/valet-core/wpvip-product-core.json

@@ -709,6 +709,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "{color.gray.15}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.15}",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.40}",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -771,6 +793,10 @@
         "type": "color",
         "value": "{color.yellow.50}"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "{color.orange.45}"
+      },
       "info": {
         "type": "color",
         "value": "{color.blue.50}"
@@ -1681,4 +1707,4 @@
       "type": "typography"
     }
   }
-}
+}

package/tokens/valet-core/wpvip-product-dark.json

@@ -603,6 +603,28 @@
       }
     }
   },
+  "slider": {
+    "background": {
+      "default": {
+        "value": "{color.gray.15}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.15}",
+        "type": "color"
+      }
+    },
+    "handle": {
+      "default": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "{color.gray.40}",
+        "type": "color"
+      }
+    }
+  },
   "support": {
     "background": {
       "error": {
@@ -665,6 +687,10 @@
         "type": "color",
         "value": "{color.yellow.35}"
       },
+      "strong-warning": {
+        "type": "color",
+        "value": "{color.orange.35}"
+      },
       "info": {
         "type": "color",
         "value": "{color.blue.35}"
@@ -1352,4 +1378,4 @@
       }
     }
   }
-}
+}