chore: stat widget polish #33696
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ export const anvilWidgets = { | |
| export enum Elevations { | ||
| SECTION_ELEVATION = 1, | ||
| ZONE_ELEVATION = 2, | ||
| CARD_ELEVATION = 3, | ||
| } | ||
|
|
||
| /** | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -78,7 +78,7 @@ import { ZoneWidget } from "./anvil/ZoneWidget"; | |
| import { WDSHeadingWidget } from "./wds/WDSHeadingWidget"; | ||
| import { WDSParagraphWidget } from "./wds/WDSParagraphWidget"; | ||
| import { WDSModalWidget } from "./wds/WDSModalWidget"; | ||
| import { WDSStatsWidget } from "./wds/WDSStatsWidget"; | ||
| import { WDSKeyValueWidget } from "./wds/WDSKeyValueWidget"; | ||
| import { WDSInlineButtonsWidget } from "./wds/WDSInlineButtonsWidget"; | ||
|
|
||
|
|
@@ -170,7 +170,7 @@ const WDSWidgets = [ | |
| WDSParagraphWidget, | ||
| WDSHeadingWidget, | ||
| WDSModalWidget, | ||
| WDSStatsWidget, | ||
| WDSKeyValueWidget, | ||
| WDSInlineButtonsWidget, | ||
| ]; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,28 @@ | ||
| import React from "react"; | ||
| import type { StatsComponentProps } from "./types"; | ||
|
|
||
| import { Flex, Icon, Text } from "@design-system/widgets"; | ||
|
|
||
| export const StatsComponent = (props: StatsComponentProps) => { | ||
| const { | ||
| caption, | ||
| iconAlign, | ||
| iconName, | ||
| label, | ||
| onClick, | ||
| value, | ||
| valueChange, | ||
| valueChangeColor, | ||
| valueColor, | ||
| } = props; | ||
|
|
||
| return ( | ||
| <Flex | ||
| alignItems="center" | ||
| direction={iconAlign === "end" ? "row-reverse" : "row"} | ||
| gap="spacing-2" | ||
| isInner | ||
| onClick={onClick} | ||
| > | ||
| {iconName && iconName !== "(none)" && ( | ||
| <Icon name={iconName} size="large" /> | ||
|
|
@@ -40,19 +41,24 @@ export const StatBoxComponent = (props: StatBoxComponentProps) => { | |
| isInner | ||
| maxWidth="calc(100% - var(--sizing-1))" | ||
| > | ||
| <Text | ||
| color={valueColor} | ||
| fontWeight={500} | ||
| lineClamp={1} | ||
| size="subtitle" | ||
| > | ||
| {value} | ||
| </Text> | ||
| {valueChange && ( | ||
| <Text color={valueChangeColor} lineClamp={1} size="footnote"> | ||
| {valueChange} | ||
| </Text> | ||
| )} | ||
| </Flex> | ||
| )} | ||
| {caption && ( | ||
| <Text color="neutral" lineClamp={1} size="footnote"> | ||
| {caption} | ||
| </Text> | ||
| )} | ||
| </Flex> | ||
|
|
||
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import type { StatsWidgetProps } from "../widget/types"; | ||
|
|
||
| export interface StatsComponentProps extends StatsWidgetProps {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,11 @@ | ||
| import type { AnvilConfig } from "WidgetProvider/constants"; | ||
|
|
||
| export const anvilConfig: AnvilConfig = { | ||
| isLargeWidget: false, | ||
|
Collaborator
There was a problem hiding this comment. This is not enough because
Contributor
Author
There was a problem hiding this comment. 
Fill or Hug? 😵💫 We have the `ResponsiveBehaviour.Fill` for statbox in our `src/widgets/wds/WDSStatsWidget/config/defaultsConfig.ts`
Collaborator
There was a problem hiding this comment. Sorry, I'm a little confused about the terminology. Fill widget is the correct behavior, but as far as I can see, it does not work correctly. And for example, how inputs works: So Stats should behave the same way. |
||
| widgetSize: { | ||
| minWidth: { | ||
| base: "100%", | ||
| "180px": "sizing-30", | ||
| }, | ||
| }, | ||
| }; | ||
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,14 +3,16 @@ import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; | |
|
|
||
| export const defaultsConfig = { | ||
| isVisible: true, | ||
| widgetName: "StatsWidget", | ||
| version: 1, | ||
| animateLoading: true, | ||
| valueColor: "neutral", | ||
| valueChange: "+50%", | ||
| valueChangeColor: "positive", | ||
| value: "42", | ||
| label: "Active Users", | ||
| caption: "This week", | ||
| iconName: "shopping-bag", | ||
| responsiveBehavior: ResponsiveBehavior.Fill, | ||
| elevatedBackground: false, | ||
| } as unknown as WidgetDefaultProps; | ||
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| import { WIDGET_TAGS } from "constants/WidgetConstants"; | ||
|
|
||
| export const metaConfig = { | ||
| name: "Stats", | ||
|
Collaborator
There was a problem hiding this comment. I'm just wondering why the name was changed?
Contributor
Author
There was a problem hiding this comment. It was there in list of things we need to do in the polish. |
||
| needsMeta: false, | ||
| isCanvas: false, | ||
| searchTags: ["statbox"], | ||
|
|
||
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,11 +21,32 @@ export const propertyPaneContentConfig = [ | |
| label: "Value", | ||
| helpText: "Sets the value of the statbox", | ||
| controlType: "INPUT_TEXT", | ||
| placeholderText: "42", | ||
| isBindProperty: true, | ||
| isTriggerProperty: false, | ||
| validation: { type: ValidationTypes.TEXT }, | ||
| }, | ||
| { | ||
| propertyName: "valueColor", | ||
| label: "Value color", | ||
| controlType: "DROP_DOWN", | ||
| fullWidth: true, | ||
| helpText: "Emphasizes the value's semantic impact", | ||
| options: Object.values(COLORS).map((semantic) => ({ | ||
| label: capitalize(semantic), | ||
| value: semantic, | ||
| })), | ||
| isJSConvertible: true, | ||
| isBindProperty: true, | ||
| isTriggerProperty: false, | ||
| validation: { | ||
| type: ValidationTypes.TEXT, | ||
| params: { | ||
| allowedValues: Object.values(COLORS), | ||
| default: COLORS.accent, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
|
|
@@ -74,14 +95,14 @@ export const propertyPaneContentConfig = [ | |
| label: "Value change", | ||
| helpText: "Secondary information about the value", | ||
| controlType: "INPUT_TEXT", | ||
| placeholderText: "+50%", | ||
| isBindProperty: true, | ||
| isTriggerProperty: false, | ||
| validation: { type: ValidationTypes.TEXT }, | ||
| }, | ||
| { | ||
| propertyName: "valueChangeColor", | ||
| label: "Color", | ||
| controlType: "DROP_DOWN", | ||
| fullWidth: true, | ||
| helpText: "Emphasizes the change's semantic impact", | ||
|
|
@@ -101,9 +122,9 @@ export const propertyPaneContentConfig = [ | |
| }, | ||
| }, | ||
| { | ||
| propertyName: "caption", | ||
| label: "Caption", | ||
| helpText: "Sets the caption of the statbox", | ||
| controlType: "INPUT_TEXT", | ||
| placeholderText: "Since 21 Jan 2022", | ||
| isBindProperty: true, | ||
|
|
@@ -138,4 +159,18 @@ export const propertyPaneContentConfig = [ | |
| }, | ||
| ], | ||
| }, | ||
| { | ||
| sectionName: "Events", | ||
| children: [ | ||
| { | ||
| helpText: "when the button is clicked", | ||
| propertyName: "onClick", | ||
| label: "onClick", | ||
| controlType: "ACTION_SELECTOR", | ||
| isJSConvertible: true, | ||
| isBindProperty: true, | ||
| isTriggerProperty: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
File renamed without changes.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Specify a more precise type instead of
any.Committable suggestion