@spectrum-css/textfield - npm Package Compare versions

Comparing version 4.1.15 to 5.0.0

CHANGELOG.md

@@ -6,2 +6,54 @@ # Change Log
 
+<a name="5.0.0"></a>
+# 5.0.0
+🗓 2023-05-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/textfield@4.1.15...@spectrum-css/textfield@5.0.0)
+
+* fix(textfield, combobox)!: adjust padding calculations (#1803) ([09c1bdc](https://github.com/adobe/spectrum-css/commit/09c1bdc)), closes [#1803](https://github.com/adobe/spectrum-css/issues/1803)
+
+
+### 🛑 BREAKING CHANGES
+
+* removes `--mod-combobox-icon-size`, `--mod-combobox-spacing-block-start-to-border`, `--mod-combobox-spacing-inline-start-to-textfield`, `--mod-combobox-spacing-block-start-edge-to-textfield`, `--mod-combobox-spacing-block-end-edge-to-textfield`, and `--mod-combobox-spacing-inline-start-edge-to-textfield`.
+
+Additionally:
+* fix: exclude border width from padding with text inputs + more fixes
+
+- Textfield and Combobox: exclude border width from padding calculations
+  because most of the to-edge tokens include the border, and the values
+  were 1px larger than they should have been.
+- Textfield and Combobox: fix corner radius of focus indicator when
+  using a larger border radius (e.g. try setting a --mod border width
+  of 5px; the calculation adding the border width was incorrect)
+- Combobox: adjust styles so custom property for border width is
+  correctly overriding everything from its sub-components. Previously
+  using --mod-combobox-border-width had no effect.
+- Combobox: simplify/remove some custom properties related to those
+  fixes and quiet variant.
+
+* fix(combobox): border-radius should not increase for t-shirt sizes
+
+Per design feedback, the border-radius value should not be increasing
+for these t-shirt sizes.
+
+* fix(combobox): calculate the button x-offset on quiet
+
+Use a corrected calculation of the x-offset for the picker button on the
+quiet variant. Based on design feedback for the component: "The point is
+to line up the chevron icon with the end of the component so those
+elements are flushed".
+
+* fix(combobox): mods update after changes
+
+Regenerate mods after fixes that have removed and renamed some
+properties.
+
+* feat(textfield): add 'size' control to storybook
+
+Add "t-shirt" size control to Textfield stories. The arg was already
+there, but it was missing a control for testing.
+
+
+
+
+
 <a name="4.1.15"></a>
@@ -8,0 +60,0 @@ ## 4.1.15

package.json

 {
   "name": "@spectrum-css/textfield",
-  "version": "4.1.15",
+  "version": "5.0.0",
   "description": "The Spectrum CSS textfield component",
@@ -25,4 +25,4 @@ "license": "Apache-2.0",
     "@spectrum-css/component-builder-simple": "^2.0.10",
-    "@spectrum-css/helptext": "^4.0.23",
-    "@spectrum-css/tokens": "^9.0.4",
+    "@spectrum-css/helptext": "^4.0.24",
+    "@spectrum-css/tokens": "^9.1.0",
     "gulp": "^4.0.0"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "a90d7639920369c1fc5757325b409cfc3329edc9"
+  "gitHead": "41919d2f9ed7ed534a862192895b82c90f3910f8"
 }

stories/template.js

@@ -5,2 +5,3 @@ import { html } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
+import { useArgs } from "@storybook/client-api";
 
@@ -44,2 +45,3 @@ import { Template as Icon } from '@spectrum-css/icon/stories/template.js';
 }) => {
+  const [, updateArgs] = useArgs();
 
@@ -65,3 +67,12 @@ if (isInvalid) iconName = "Alert";
       style=${ifDefined(styleMap(styles))}
-      @click=${onclick}>
+      @click=${onclick}
+      @focusin=${(e) => {
+        const focusClass = e.target?.classList?.contains('focus-ring') ? { isKeyboardFocused: true } : { isFocused: true };
+        updateArgs(focusClass);
+      }}
+      @focusout=${(e) => {
+        const focusClass = e.target?.classList?.contains('focus-ring') ? { isKeyboardFocused: false } : { isFocused: false };
+        updateArgs(focusClass);
+      }}
+    >
       ${iconName ? Icon({
@@ -72,7 +83,7 @@ ...globals,
         customClasses: [
-          isInvalid || isValid ? `${rootClass}-validationIcon` : `${rootClass}-icon`,
+          !!(isInvalid || isValid) ? `${rootClass}-validationIcon` : `${rootClass}-icon`,
           ...customIconClasses,
         ],
       }) : ""}
-      ${multiline 
+      ${multiline
         ? html`
@@ -110,3 +121,3 @@ <textarea
       }
-      ${isLoading ? ProgressCircle({ 
+      ${isLoading ? ProgressCircle({
         isIndeterminate: true,
@@ -113,0 +124,0 @@ size: 's',

stories/textfield.stories.js

@@ -46,2 +46,12 @@ // Import the component markup template
     },
+    size: {
+      name: "Size",
+      type: { name: "string", required: true },
+      table: {
+        type: { summary: "string" },
+        category: "Component",
+      },
+      options: ["s", "m", "l", "xl"],
+      control: "select"
+    },
     isQuiet: {
@@ -124,2 +134,7 @@ name: "Quiet styling",
     },
+    value: {
+      table: {
+        disable: true,
+      },
+    },
   },
@@ -137,2 +152,3 @@ args: {
     isLoading: false,
+    size: "m",
     multiline: false,
@@ -139,0 +155,0 @@ grows: false,

No alert changes

Improved metrics

Total package byte prevSize

262649

increased by1.76%

Lines of code

2764

increased by1.32%

No dependency changes