fix(picker): quiet side label picker positioning (#2465)

* fix(fieldlabel): use margin top tokens * fix(picker): adjust sidelabel position * docs(fieldlabel): mods * docs(picker): adds switch to sb controls * docs(picker): group stories for chromatic * refactor(picker): updates storybook * docs(picker): add wrapping side label to sb * docs(picker): update storybook post VRT * docs(picker): update ischromatic syntax
adobe · Feb 12, 2024 · 537f0b8 · 537f0b8
1 parent 3c6194e
commit 537f0b8
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 63 deletions.
diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css
@@ -27,7 +27,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
 
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
@@ -39,7 +39,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
@@ -51,7 +51,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
 
-  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
@@ -63,7 +63,7 @@ governing permissions and limitations under the License.
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
 
-  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200);
+  --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
@@ -104,9 +104,12 @@ governing permissions and limitations under the License.
 .spectrum-FieldLabel--left,
 .spectrum-FieldLabel--right {
   display: inline-block;
+
+  margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start));
+  margin-block-end: 0;
+  margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
+
   vertical-align: top;
-  padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
-  padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
 }
 
 .spectrum-FieldLabel--right {

diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md
@@ -10,8 +10,8 @@
 | `--mod-fieldlabel-line-height`                    |
 | `--mod-fieldlabel-line-height-cjk`                |
 | `--mod-fieldlabel-min-height`                     |
+| `--mod-fieldlabel-side-margin-block-start`        |
 | `--mod-fieldlabel-side-padding-right`             |
-| `--mod-fieldlabel-side-padding-top`               |
 | `--mod-form-grid-template-columns`                |
 | `--mod-form-grid-template-columns-labels-above`   |
 | `--mod-form-inline-size`                          |

diff --git a/components/fieldlabel/stories/form-template.js b/components/fieldlabel/stories/form-template.js
@@ -27,7 +27,7 @@ export const Template = ({
             ${FieldLabel({
                 label: 'Company Title',
                 forInput: 'form-example-company',
-                alignment: 'left',
+                alignment: labelsAbove ? undefined : 'left',
             })}
             <div class="spectrum-Form-itemField">
                 ${TextField({

diff --git a/components/picker/index.css b/components/picker/index.css
@@ -31,7 +31,7 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
   --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
-  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-field-label-top-margin-medium);
+  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-100);
   --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
 
   --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
@@ -88,7 +88,7 @@ governing permissions and limitations under the License.
 .spectrum-Picker--sizeS {
   --spectrum-picker-font-size: var(--spectrum-font-size-75);
   --spectrum-picker-block-size: var(--spectrum-component-height-75);
-  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-field-label-top-margin-small);
+  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-75);
   --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
@@ -109,7 +109,7 @@ governing permissions and limitations under the License.
 .spectrum-Picker--sizeL {
   --spectrum-picker-font-size: var(--spectrum-font-size-200);
   --spectrum-picker-block-size: var(--spectrum-component-height-200);
-  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-field-label-top-margin-large);
+  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-200);
   --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
@@ -130,7 +130,7 @@ governing permissions and limitations under the License.
 .spectrum-Picker--sizeXL {
   --spectrum-picker-font-size: var(--spectrum-font-size-300);
   --spectrum-picker-block-size: var(--spectrum-component-height-300);
-  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-field-label-top-margin-extra-large);
+  --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-300);
   --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
@@ -449,7 +449,7 @@ governing permissions and limitations under the License.
   background-color: var(--highcontrast-picker-background-color, transparent);
 
   &.spectrum-Picker--sideLabel {
-    margin-block-start: calc(-1 * var(--spectrum-picker-spacing-top-to-text-side-label-quiet));
+    margin-block-start: 0;
   }
 
   .spectrum-Picker-menuIcon {

diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
@@ -1,4 +1,5 @@
 import { Default as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js";
+import { html } from "lit";
 import { Template } from "./template";
 
 export default {
@@ -35,6 +36,16 @@ export default {
 			options: ["top", "left"],
 			control: { type: "select" },
 		},
+		withSwitch: {
+			name: "Display with a switch component",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "labelPosition", eq: "left" },
+		},
 		placeholder: {
 			name: "Placeholder",
 			type: { name: "string" },
@@ -111,6 +122,7 @@ export default {
 		isDisabled: false,
 		isInvalid: false,
 		isOpen: false,
+		withSwitch: false,
 	},
 	parameters: {
 		actions: {
@@ -124,7 +136,105 @@ export default {
 	},
 };
 
-export const Default = Template.bind({});
+
+const ChromaticPickerGroup = ({
+	customStyles = {},
+	...args
+}) => {
+	return html`
+		<div style="display: grid; gap: 20px;">
+			<div>
+				${Template({
+					labelPosition: "top",
+					...args,
+					isOpen: false,
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "top",
+					...args,
+					isOpen: false,
+					isQuiet: true,
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "top",
+					...args,
+					isOpen: false,
+					isLoading: true,
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "top",
+					...args,
+					isOpen: false,
+					isInvalid: true,
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "top",
+					...args,
+					isOpen: false,
+					isKeyboardFocused: true,
+					helpText: "Please select a country",
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "left",
+					...args,
+					isOpen: false,
+					withSwitch: true,
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "left",
+					...args,
+					isOpen: false,
+					withSwitch: true,
+					fieldLabelStyle: {'max-width': '90px'},
+					label: "Enter country, text should wrap",
+					placeholder: "Select your country of origin"
+				})}
+			</div>
+			<div>
+				${Template({
+						labelPosition: "left",
+						...args,
+						isOpen: false,
+						withSwitch: true,
+						placeholder: "Select your contry of origin",
+						isQuiet: true,
+					})}
+			</div>
+			<div>
+				${Template({
+					labelPosition: "left",
+					...args,
+					isOpen: false,
+					withSwitch: true,
+					isQuiet: true,
+					fieldLabelStyle: {'max-width': '90px'},
+					label: "Enter country, text should wrap",
+					placeholder: "Select your contry of origin"
+				})}
+			</div>
+		</div>
+	`;
+};
+
+export const Default = (args) => window.isChromatic() ? ChromaticPickerGroup(args) : Template(args);
 Default.args = {
 	content: [
 		() => MenuStories(MenuStories.args)
@@ -139,58 +249,13 @@ Open.args = {
 	],
 };
 
-export const SideLabel = Template.bind({});
-SideLabel.args = {
-	content: [
-		() => MenuStories(MenuStories.args)
-	],
-	labelPosition: "left",
-	placeholder: "Select Your State Or Province"
-};
-
-export const Quiet = Template.bind({});
-Quiet.args = {
-	isQuiet: true,
-	content: [
-		() => MenuStories(MenuStories.args)
-	],
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-	isLoading: true,
-	content: [
-		() => MenuStories(MenuStories.args)
-	],
-};
-
-export const Invalid = Template.bind({});
-Invalid.args = {
-	helpText: "Please select a country",
-	isInvalid: true,
-	content: [
-		() => MenuStories(MenuStories.args)
-	],
-};
-
-export const Focused = Template.bind({});
-Focused.storyName = "Keyboard Focused";
-Focused.args = {
-	helpText: "Please select a country",
-	isKeyboardFocused: true,
-	content: [
-		() => MenuStories(MenuStories.args)
-	],
-};
-
-export const WithForcedColors = Template.bind({
-  parameters: {
+export const WithForcedColors = (args) => window.isChromatic() ? ChromaticPickerGroup(args) : Template(args);
+WithForcedColors.parameters = {
     // Sets the forced-colors media feature for a specific story.
     chromatic: { forcedColors: 'active' },
-  },
-});
+}
 WithForcedColors.args = {
 	content: [
 		() => MenuStories(MenuStories.args)
-	],
+	]
 }
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
@@ -3,12 +3,14 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { when } from 'lit/directives/when.js';
 
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
+import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
 
 import "../index.css";
 
@@ -103,6 +105,9 @@ export const Template = ({
 	isLoading = false,
 	isDisabled = false,
 	isReadOnly = false,
+	withSwitch = false,
+	fieldLabelStyle = {},
+	fieldLabelText,
 	customClasses = [],
 	customStyles = {},
 	customPopoverStyles = {},
@@ -141,6 +146,7 @@ export const Template = ({
 					size,
 					label,
 					isDisabled,
+					style: fieldLabelStyle,
 					alignment: labelPosition,
 			  })
 			: ""}
@@ -205,5 +211,13 @@ export const Template = ({
 			customStyles: customPopoverStyles,
 			content,
 		})}
+		${when (withSwitch, () => Switch({
+				...globals,
+				size,
+				label: "Toggle switch",
+				customStyles: {
+					"padding-inline-start": "15px"
+				}
+			})) }
 	`;
 };