Support prefix & suffix for 3 widgets: string, number & boolean #6836

ngdangtu-vn · 2023-07-07T17:48:08Z

This changes are about:

refactor syntax BooleanControl static properties
add prefix & suffix options
update widget control style to match with new options
update Boolean widget document

Summary

The update allows developers to display messages before (prefix) and after (suffix) the toggle. This design intends to provide a better information and look to users.

In my use case, I have a field to decide if I want to show a post in homepage. If I set "Show in homepage" string in label, the layout of input would be unbalance as the top small part is bigger than the main body. The toggle itself seems lonely as well. So if I can set "Visibility" in label option and "Show in homepage" in prefix option, it would be much sense.

Test plan

Run yarn start
Go to this path collections/kitchenSink/entries/a-big-entry-with-all-the-things
Expect to see the exact Boolean input like this screenshot:

Checklist

I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

Be hold! The amazing meowman!

martinjagodic · 2023-07-26T07:57:03Z

@ngdangtu-vn I see why you would want this feature, but it seems very similar to hint, which exists on all widgets and can be used to explain a field in more detail. Is there a reason why you wouldn't use hint?

ngdangtu-vn · 2023-08-04T17:15:14Z

Is there a reason why you wouldn't use hint?

I wouldn't say I don't use hint. But my reason is simply:

Not wasting a whole line for only 1 toggle element
Hint text is small enough to be a hint only. Prefix/Suffix will plays nice the the role of important instruction.
In some messages, it looks better with prefix (or|and) suffix as well. I admit, my example wasn't very good. Maybe like this: Show author [x].

I even plan to do take this further to string and number widgets so dev can display fields like this [...]px. Cool right?

martinjagodic · 2023-08-07T09:22:59Z

Extending this to string and number will be useful! Can you implement that as part of this PR and I will review/merge it all together?

ngdangtu-vn · 2023-08-08T09:25:48Z

Update photo for recent commits

@martinjagodic Could you review my code and the Widgets' UI? Thanks.

xaiki

fwiw, my 2c review

note: i'm not part of the decap team.

xaiki · 2023-10-04T14:59:30Z

dev-test/config.yml

-      - { label: 'Title', name: 'title', widget: 'string' }
-      - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
+      - { label: 'Title', name: 'title', widget: 'string', prefix: 'This string:', suffix: 'is a title' }
+      - { label: 'Boolean', name: 'boolean', widget: 'boolean', prefix: 'Toggle this to switch on/off:', hint: 'Toggle this to switch on/off', default: true }


having prefix and hint be the same string doesn't make for a good case of why prefix is needed.

xaiki · 2023-10-04T15:00:01Z

dev-test/config.yml

@@ -117,11 +117,11 @@ collections: # A list of collections the CMS should be able to edit
        display_fields: ['title', 'date']
        search_fields: ['title', 'body']
        value_field: 'title'
-      - { label: 'Title', name: 'title', widget: 'string' }
-      - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
+      - { label: 'Title', name: 'title', widget: 'string', prefix: 'This string:', suffix: 'is a title' }


this suffix doesn't seem to make a lot of sense, is it a prefix ? is it a hint ? why would i want this ?

Nope, it's just for testing and demonstration. But you are welcome to improve it.

xaiki · 2023-10-04T15:02:47Z

packages/netlify-cms-widget-boolean/src/BooleanControl.js

+            onBlur={setInactiveStyle}
+            Background={BooleanBackground}
+          />
+          {suffix && (<span>&nbsp;{suffix}</span>)}


i'm wondering if those spans should be classed so we can theme theme ?

We can go with div>span for both and add :first-of-type for prefix, similar goes to suffix. No need to go for class everywhere.

xaiki · 2023-10-04T15:03:07Z

packages/netlify-cms-widget-boolean/src/BooleanControl.js

-
-BooleanControl.defaultProps = {
-  value: false,
-};


any reason why these were moved as part of this specific PR ?

xaiki · 2023-10-04T15:05:18Z

packages/netlify-cms-widget-number/src/NumberControl.js

+            onChange={this.handleChange}
+            css={css`flex-grow: 1`}
+          />
+          {suffix && (<span>&nbsp;{suffix}</span>)}


wondering if onFocus and onBlur should go on the bigger div (classed {classNameWrapper})

xaiki · 2023-10-04T15:06:06Z

packages/netlify-cms-widget-string/src/StringControl.js

+            onFocus={setActiveStyle}
+            onBlur={setInactiveStyle}
+            css={css`flex-grow: 1`}
+          />


ditto for onFocus/onBlur

xaiki · 2023-10-04T15:07:42Z

website/content/docs/widgets/boolean.md

doc is required for number and string widgets too

ngdangtu-vn · 2023-10-05T01:18:45Z

@xaiki

Thanks for your review but I'm not sure if they still need this PR. It kinda a dead PR already.

martinjagodic · 2023-10-05T07:21:34Z

@xaiki thanks for your reviews

@ngdangtu-vn This PR is not dead, but I understand it sitting here for a long time now. We have quite a backlog and we want to add features based on the triage we decided upon. This one is not essential so it will probably wait a bit longer.

ngdangtu-vn · 2023-10-05T07:27:39Z

@martinjagodic Ok it's cool, I thought the code won't be able to fit with the new Decap.

@xaiki So I will fix the PR using your advice later 'cause I'm bit busy recently & I need time to reload my memory :))

xaiki · 2023-10-05T07:56:03Z

@martinjagodic if reviews help I'm happy to look at other PRs, just point me to the top of the stack.

martinjagodic · 2023-10-05T08:36:09Z

@xaiki I will happily assign you review requests. To talk more in-depth about what to do next, please join the contributing channel on our Discord server.

martinjagodic · 2023-10-18T12:33:02Z

@ngdangtu-vn are you still interested in moving this forward? If yes, please address the comments and solve merge conflicts. Thanks!

ngdangtu-vn · 2023-10-18T15:31:16Z

Ok, give me around 2 more days

netlify · 2023-10-20T08:58:26Z

‼️ Deploy request for cms-demo rejected.

Name	Link
🔨 Latest commit	`e9c3a9e`

ngdangtu-vn · 2023-10-20T09:07:58Z

I didn't close this? Hold on I'm reorganizing this... Maybe because I reset branch?

martinjagodic · 2023-10-20T09:09:06Z

@ngdangtu-vn maybe. I guess you can just reopen and continue from there.

ngdangtu-vn

I'm working merging (copy & paste my old code with modify to fit the new). After that is working on doc example content. I would love to open for any example content suggestion.

Those 3 widgets are Boolean, Number, String - update 3 widgets UI to display prefix & suffix - refactor BooleanControl.js code structure - update document for 3 widgets - update demo config `dev-test/`

netlify · 2024-01-08T14:08:06Z

✅ Deploy Preview for decap-www ready!

Name	Link
🔨 Latest commit	`2d9cb89`
🔍 Latest deploy log	https://app.netlify.com/sites/decap-www/deploys/659c01c495853c00082824a5
😎 Deploy Preview	https://deploy-preview-6836--decap-www.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

martinjagodic added area: extensions/widgets pinned labels Aug 7, 2023

martinjagodic self-requested a review August 8, 2023 11:35

This was referenced Sep 19, 2023

Prefix/suffix options for boolean, string and number widgets StaticJsCMS/static-cms#887

Closed

feat: add prefix/suffix options for boolean, number and string widgets StaticJsCMS/static-cms#888

Merged

xaiki reviewed Oct 4, 2023

View reviewed changes

ngdangtu-vn closed this Oct 20, 2023

ngdangtu-vn force-pushed the widget-boolean branch from e1d1e4a to f646317 Compare October 20, 2023 08:58

ngdangtu-vn commented Oct 20, 2023

View reviewed changes

ngdangtu-vn changed the title ~~feat(BooleanControl.js): display messages along toggle~~ Support prefix & suffix for 3 widgets: string, number & boolean Oct 21, 2023

chore(3 widgets): add prefix & suffix labels

e9c3a9e

Those 3 widgets are Boolean, Number, String - update 3 widgets UI to display prefix & suffix - refactor BooleanControl.js code structure - update document for 3 widgets - update demo config `dev-test/`

ngdangtu-vn reopened this Oct 21, 2023

ngdangtu-vn requested a review from xaiki October 21, 2023 16:10

Merge branch 'master' into widget-boolean

2d9cb89

kyoshino mentioned this pull request Mar 11, 2024

Feature Request: ValuePrefix/-Suffix for Widget string sveltia/sveltia-cms#110

Closed

martinjagodic mentioned this pull request Mar 29, 2024

Add prefix & suffix options decaporg/decap-website#61

Open

chore: remove website

e26069b

ngdangtu-vn requested a review from a team as a code owner March 29, 2024 11:04

demshy added 2 commits March 29, 2024 12:06

Merge branch 'main' into widget-boolean

0ae32ea

style: lint and update emotion css import

4724e1f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support prefix & suffix for 3 widgets: string, number & boolean #6836

Support prefix & suffix for 3 widgets: string, number & boolean #6836

ngdangtu-vn commented Jul 7, 2023 •

edited

martinjagodic commented Jul 26, 2023

ngdangtu-vn commented Aug 4, 2023 •

edited

martinjagodic commented Aug 7, 2023

ngdangtu-vn commented Aug 8, 2023

xaiki left a comment

xaiki Oct 4, 2023

xaiki Oct 4, 2023

ngdangtu-vn Oct 5, 2023

xaiki Oct 4, 2023

ngdangtu-vn Oct 5, 2023

xaiki Oct 4, 2023

xaiki Oct 4, 2023

xaiki Oct 4, 2023

xaiki Oct 4, 2023

ngdangtu-vn commented Oct 5, 2023

martinjagodic commented Oct 5, 2023

ngdangtu-vn commented Oct 5, 2023

xaiki commented Oct 5, 2023

martinjagodic commented Oct 5, 2023

martinjagodic commented Oct 18, 2023

ngdangtu-vn commented Oct 18, 2023

netlify bot commented Oct 20, 2023 •

edited

ngdangtu-vn commented Oct 20, 2023

martinjagodic commented Oct 20, 2023

ngdangtu-vn left a comment

netlify bot commented Jan 8, 2024 •

edited

Support prefix & suffix for 3 widgets: string, number & boolean #6836

Are you sure you want to change the base?

Support prefix & suffix for 3 widgets: string, number & boolean #6836

Conversation

ngdangtu-vn commented Jul 7, 2023 • edited

martinjagodic commented Jul 26, 2023

ngdangtu-vn commented Aug 4, 2023 • edited

martinjagodic commented Aug 7, 2023

ngdangtu-vn commented Aug 8, 2023

xaiki left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngdangtu-vn commented Oct 5, 2023

martinjagodic commented Oct 5, 2023

ngdangtu-vn commented Oct 5, 2023

xaiki commented Oct 5, 2023

martinjagodic commented Oct 5, 2023

martinjagodic commented Oct 18, 2023

ngdangtu-vn commented Oct 18, 2023

netlify bot commented Oct 20, 2023 • edited

‼️ Deploy request for cms-demo rejected.

ngdangtu-vn commented Oct 20, 2023

martinjagodic commented Oct 20, 2023

ngdangtu-vn left a comment

Choose a reason for hiding this comment

netlify bot commented Jan 8, 2024 • edited

✅ Deploy Preview for decap-www ready!

ngdangtu-vn commented Jul 7, 2023 •

edited

ngdangtu-vn commented Aug 4, 2023 •

edited

netlify bot commented Oct 20, 2023 •

edited

netlify bot commented Jan 8, 2024 •

edited