User attribute component by zachharrison · Pull Request #494 · saasquatch/program-tools

Zach Harrison (zachharrison) · 2026-05-04T19:16:25Z

Description of the change

Added new component to allow users to display the value of custom fields in widgets and microsites

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation or Development tools (readme, specs, tests, code formatting)

Links

Jira issue number: (PUT IT HERE)
Process.st launch checklist: (PUT IT HERE)

Checklists

Development

Prettier was run (if applicable)
The behaviour changes in the pull request are covered by specs
All tests related to the changed code pass in development

Paperwork

This pull request has a descriptive title and information useful to a reviewer
This pull request has a Jira number
This pull request has a Process.st launch checklist

Code review

Changes have been reviewed by at least one other engineer
Security impacts of this change have been considered

Copilot

Pull request overview

Adds a new Mint Stencil component (<sqm-user-attribute>) intended to display a logged-in user’s custom field value by querying viewer.customFields, and exposes it in Stencilbook for demo/testing.

Changes:

Introduces sqm-user-attribute component, hook, and view for rendering a selected user custom field.
Adds a Stencilbook story and wires it into sqm-stencilbook.
Updates generated docs/types (components.d.ts, component readme) and bumps @saasquatch/mint-components version.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/mint-components/src/components/sqm-user-attribute/useUserAttribute.ts	Adds GraphQL hook to fetch `viewer.customFields` and derive the displayed attribute value.
packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute.tsx	Adds the new Stencil component wrapper and demo-mode hook wiring.
packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx	Adds the presentational view for rendering loading text or the attribute value.
packages/mint-components/src/components/sqm-user-attribute/UserAttribute.stories.tsx	Adds a basic Stencilbook story for the new component.
packages/mint-components/src/components/sqm-user-attribute/user-attribute.feature	Adds a (currently placeholder) cucumber/gherkin spec file.
packages/mint-components/src/components/sqm-user-attribute/readme.md	Adds autogenerated component docs for the new component.
packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx	Registers the new story module in the Stencilbook story list.
packages/mint-components/src/components/sqm-stencilbook/readme.md	Updates Stencilbook docs graph to include the new component dependency.
packages/mint-components/src/components.d.ts	Updates generated component typings to include `sqm-user-attribute`.
packages/mint-components/package.json	Bumps the package version.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  console.log("customFields", customFields, "value", value);
+


+/**
+ * @uiName User Attribute
+ * @exampleGroup Advanced Components
+ * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute>
+ */


@@ -0,0 +1 @@
+#todo


@@ -0,0 +1,32 @@
+# sqm-sidebar-item


Copilot

Pull request overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+function getStyle(props: UserAttributeViewProps) {
+  return `
+  p {
+    margin: 0;
+    padding: 0;
+    ${props.fontsize && `font-size: ${props.fontsize};`}
+    ${props.fontweight && `font-weight: ${props.fontweight};`}
+    color: ${props.color ? props.color : "var(--sqm-text)"};
+  }`;


+  /**
+   * Font size in pixels.
+   * @uiName Font size
+   * @uiGroup Style
+   */
+  @Prop() fontsize?: string;


Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  /**
+   * Font size in pixels.
+   * @uiName Font size
+   * @uiGroup Style
+   */
+  @Prop() fontsize?: string;
+  /**
+   * @uiName Color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  @Prop() color?: string;
+  /**
+   * @uiName Font weight
+   * @uiGroup Style
+   */
+  @Prop() fontweight?: string;


Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  return (
+    props.value && (
+      <Host>
+        <style>{styleString}</style>
+        <p class={sheet.classes.P} part="sqm-base">
+          {props.loading ? loadingSkeleton : props.value}
+        </p>
+      </Host>
+    )


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (2)

packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx:34

The render guard props.value && (...) will treat valid custom field values like 0 as falsy and render nothing. Since customFields are used as numeric counters elsewhere in the codebase, consider checking for null/undefined instead of truthiness so 0 still displays.

    props.value && (
      <Host>
        <style>{styleString}</style>
        <p class={sheet.classes.P} part="sqm-base">
          {props.loading ? loadingSkeleton : props.value}
        </p>
      </Host>
    )

packages/mint-components/src/components/sqm-user-attribute/user-attribute.feature:45

The spec claims style props are optional and default to "default browser styles", but the view always applies base styles (e.g., margin: 0, padding: 0, and a default color). Update the scenario text to reflect the actual baseline styling, or adjust the implementation to truly leave browser defaults unchanged when no style props are set.

  @minutia
  Scenario: Style props are optional and default to no custom styling
    Given the component has no style props set
    When the component is rendered
    Then the text is displayed with default browser styles

+export function useUserAttribute(props: UserAttribute): UserAttributeViewProps {
+  const user = useUserIdentity();
+  const res = useQuery(GET_CUSTOM_FIELDS, {}, !user?.jwt);
+  const loading = res.loading;
+  const customFields = res.data?.viewer?.customFields;
+  const value = customFields?.[props.value];
+


+    Examples:
+      | prop         | value       | cssProperty |
+      | fontSize     | 24          | font-size   |
+      | color        | #E91E63   | color       |


+  @motivating
+  Scenario: A loading skeleton is shown while data is loading
+    Given the component is loading user data
+    When the component is rendered
+    Then a loading skeleton is displayed
+


+export interface UserAttributeViewProps {
+  loading: boolean;
+  value: string;
+  fontSize?: number;
+  color?: string;
+  fontWeight?: number;
+}


+/**
+ * @uiName User Attribute
+ * @exampleGroup Advanced
+ * @example User Attribute - <sqm-user-attribute value="firstName"></sqm-user-attribute>
+ */


Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx:31

The component currently returns null while the query is loading because rendering is gated on props.value being truthy; on initial load value will typically be undefined, so the loading skeleton never appears. This contradicts the user-attribute.feature scenario that expects a skeleton while loading. Consider rendering when props.loading is true (or providing a non-empty placeholder value during loading) and only gating on value once loading has finished.

    props.value && (
      <Host>
        <style>{styleString}</style>
        <p class={sheet.classes.P} part="sqm-base">
          {props.loading ? loadingSkeleton : props.value}

+export interface UserAttributeViewProps {
+  loading: boolean;
+  value: string;
+  fontSize?: number;


+
+export function useUserAttribute(props: UserAttribute): UserAttributeViewProps {
+  const user = useUserIdentity();
+  const res = useQuery(GET_CUSTOM_FIELDS, {}, !user?.jwt);


+    const props = isDemo() ? useCustomFieldsDemo(this) : useUserAttribute(this);
+    return <UserAttributeView {...props} />;
+  }
+}
+
+function useCustomFieldsDemo(props: UserAttribute): UserAttributeViewProps {


This commit was generated by GitHub Actions CI

Copilot

Pull request overview

Copilot reviewed 11 out of 13 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

packages/mint-components/package-lock.json: Language not supported

Comments suppressed due to low confidence (2)

packages/mint-components/src/components/sqm-user-attribute/sqm-user-attribute-view.tsx:34

The component currently returns nothing when props.value is falsy. This will incorrectly hide legitimate custom field values like 0 or false (and also hides empty-string values). Consider rendering when value is not null/undefined (and/or when loading is true) rather than using a truthy check.

  return (
    props.value && (
      <Host>
        <style>{styleString}</style>
        <p class={sheet.classes.P} part="sqm-base">
          {props.loading ? loadingSkeleton : props.value}
        </p>
      </Host>
    )

packages/mint-components/.changeset/soft-dryers-invite.md:6

Grammar: "a users custom fields" should be "a user's custom fields".


Add new user-attribute component used to display a users custom fields in widgets and microsites

+export interface UserAttributeViewProps {
+  loading: boolean;
+  value: string;
+  fontSize?: number;
+  color?: string;
+  fontWeight?: number;
+}


+  Scenario: Style props are optional and default to no custom styling
+    Given the component has no style props set
+    When the component is rendered
+    Then the text is displayed with default browser styles


  "name": "@saasquatch/mint-components",
  "title": "Mint Components",
-  "version": "2.1.11",
+  "version": "2.1.10-59",


 {
  "name": "@saasquatch/mint-components",
-  "version": "2.1.11",
+  "version": "2.1.10-59",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@saasquatch/mint-components",
-      "version": "2.1.11",
+      "version": "2.1.10-59",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {


AndiLuo · 2026-05-20T23:41:45Z

+/**
+ * @uiName User Attribute
+ * @exampleGroup Advanced
+ * @example User Attribute - <sqm-user-attribute value="firstName"></sqm-user-attribute>


Does this populate the select default value?

Zach Harrison (zachharrison) added 3 commits April 28, 2026 16:05

Add component for user attribute

9795cab

Update uiWidget and fix CSS part

a899130

Version bump

4bf1c1c

Copilot AI review requested due to automatic review settings May 4, 2026 19:16

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 4, 2026 19:17 View session

Copilot AI reviewed May 4, 2026

View reviewed changes

Zach Harrison (zachharrison) added 2 commits May 4, 2026 14:05

Add styling options

b4a2632

Update specs, stories, and styling options

05d6c6c

Copilot AI review requested due to automatic review settings May 4, 2026 22:32

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 4, 2026 22:32 View session

Copilot AI reviewed May 4, 2026

View reviewed changes

Zach Harrison (zachharrison) added 2 commits May 4, 2026 16:39

Update styling and jsDocs

251c6c2

Update styling and version

dbc1651

Copilot AI review requested due to automatic review settings May 5, 2026 15:27

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 5, 2026 15:27 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

Zach Harrison (zachharrison) added 2 commits May 5, 2026 10:38

Fix demoData and CSS

ec53af6

Cleanup specs

41c5f29

Copilot AI review requested due to automatic review settings May 5, 2026 17:41

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 5, 2026 17:42 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

Zach Harrison (zachharrison) and others added 2 commits May 19, 2026 11:34

Merge branch 'master' into user-attribute-component

7edeb36

Potential fix for pull request finding

9a27b77

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings May 19, 2026 23:09

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 19, 2026 23:10 View session

Remove loading text from example tag

83c8384

Copilot AI reviewed May 19, 2026

View reviewed changes

Zach Harrison (zachharrison) added 2 commits May 19, 2026 16:21

Version bump

06dc458

Merge branch 'master' into user-attribute-component

b741768

Copilot AI review requested due to automatic review settings May 20, 2026 17:27

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 20, 2026 17:31 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

github-actions Bot and others added 2 commits May 20, 2026 17:57

publish: @saasquatch/mint-components v2.1.10-59

b298d1f

This commit was generated by GitHub Actions CI

Add changeset

7981fe9

Copilot AI review requested due to automatic review settings May 20, 2026 20:19

Copilot started reviewing on behalf of Zach Harrison (zachharrison) May 20, 2026 20:19 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

Merge branch 'master' into user-attribute-component

92bc5d2

AndiLuo approved these changes May 20, 2026

View reviewed changes

AndiLuo self-requested a review May 20, 2026 23:39

AndiLuo reviewed May 20, 2026

View reviewed changes

AndiLuo requested changes May 20, 2026

View reviewed changes

		@@ -0,0 +1 @@
		#todo No newline at end of file

Conversation

Zach Harrison (zachharrison) commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the change

Type of change

Links

Checklists

Development

Paperwork

Code review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

AndiLuo May 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Zach Harrison (zachharrison) commented May 4, 2026 •

edited

Loading