feat: add popover as a fragment component by jz5426 · Pull Request #304 · IBM/carbon-ui-builder

jz5426 · 2024-04-10T18:14:08Z

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

netlify · 2024-04-10T18:14:11Z

✅ Deploy Preview for carbon-components-builder ready!

Name	Link
🔨 Latest commit	`935b1d2`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-builder/deploys/663e2b146073ac0008324ea0
😎 Deploy Preview	https://deploy-preview-304--carbon-components-builder.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.

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

jz5426 · 2024-04-26T20:14:17Z

Verified that the component features and export works.

Akshat55 · 2024-05-02T01:52:04Z

+                    <svg _ngcontent-pla-c12="" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
+                        <path _ngcontent-pla-c12="" d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z">
+                        </path>
+                    </svg>


You're hard coding icon here.

Ideally, we would want to allow the user to specify the tooltip trigger... so not sure what the best way to approach this is. I guess we can have an icon as an option here? @zvonimirfras @maxxyouu

Akshat55 · 2024-05-02T01:53:46Z

+	keywords: ['popover'],
+	name: 'Popover',
+	type: 'popover',
+	defaultComponentObj: {
+        type: 'popover',
+        isOpen: true


Let's add a text attribute and assign it a value, this would make the tooltip appear correctly instead of appearing like this:

Akshat55 · 2024-05-02T01:54:32Z

+            v10: {
+                inputs: ({ json }) => `
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}IsOpen = ${json.isOpen};
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}IsShowCaret = ${json.isShowCaret};
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDropShadow = ${json.isDropShadow};
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}IsHighContrast = ${json.isHighContrast};
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}Align: any = '${json.align ? json.align : 'bottom'}';
+                    @Input() ${nameStringToVariableString(json.codeContext?.name)}Text = '${json.text}';
+                `,
+				outputs: ({ json }) => `
+                    @Output() ${nameStringToVariableString(json.codeContext?.name)}OnOpen = new EventEmitter();
+                    @Output() ${nameStringToVariableString(json.codeContext?.name)}OnClose = new EventEmitter();
+                    @Output() ${nameStringToVariableString(json.codeContext?.name)}IsOpenChange = new EventEmitter();`,
+				imports: ['PopoverModule'],
+				code: ({ json }) => {
+					return `<div
+                        cdsPopover
+                        ${angularClassNamesFromComponentObj(json)}
+                        [isOpen]="${nameStringToVariableString(json.codeContext?.name)}IsOpen"
+                        [dropShadow]="${nameStringToVariableString(json.codeContext?.name)}IsDropShadow"
+                        [align]="${nameStringToVariableString(json.codeContext?.name)}Align"
+                        [caret]="${nameStringToVariableString(json.codeContext?.name)}IsShowCaret"
+                        [highContrast]="${nameStringToVariableString(json.codeContext?.name)}IsHighContrast"
+                        (onOpen)="${nameStringToVariableString(json.codeContext?.name)}OnOpen.emit($event)"
+                        (onClose)="${nameStringToVariableString(json.codeContext?.name)}onClose.emit($event)"
+                        (isOpenChange)="${nameStringToVariableString(json.codeContext?.name)}IsOpenChange.emit($event)">
+                            <div class="popover-trigger">
+                                <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
+                                    <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>
+                                </svg>
+                            </div>
+                            <cds-popover-content>
+                                <div style="padding: 1rem">
+                                    ${ json.text }
+                                </div>
+                            </cds-popover-content>
+                        </div>
+                    `;
+				}
+            }
+        },


Leave v10 input and output as blank. This component did NOT exist in v10.

Akshat55 · 2024-05-02T01:54:40Z

+            v10: {
+                imports: ['Popover', 'PopoverContent'],
+				code: ({ json }) => {
+					return `<Popover 
+                        open={${json.isOpen ? json.isOpen : false}}
+                        align={${json.align ? json.align : (json.isTabTip ? 'bottom-start' : 'bottom')}}
+                        caret={${json.isShowCaret ? json.isShowCaret : (json.isTabTip ? false : true)}}
+                        dropShadow={${json.isDropShadow ? json.isDropShadow : true}}
+                        highContrast={${json.isHighContrast ? json.isHighContrast : true}}
+                        ${json.isTabTip ? 'isTabTip' : ''}
+                        ${reactClassNamesFromComponentObj(json)}>
+                            <PopoverContent>
+                                ${ json.text }
+                            </PopoverContent>
+                        </Popover>`;
+				}
+            }


Leave v10 input and output as blank. This component did NOT exist in v10.

Akshat55 · 2024-05-02T01:54:46Z

+            }
+        }
+    }
+};


Missing new line

Akshat55 · 2024-05-02T01:56:12Z

+    const alignItems = [
+        {id: 'top', text: 'Top'},
+        {id: 'right', text: 'Right'},
+        {id: 'bottom', text: 'Bottom'},
+        {id: 'left', text: 'Left'}
+    ];


There are way more align items than this. See https://github.com/carbon-design-system/carbon/blob/b3488785126adecd6709370d2bd7786133d83213/packages/react/src/components/Popover/index.tsx#L48

Akshat55 · 2024-05-02T01:57:36Z

+	component: APopOver,
+	settingsUI: APopOverSettingsUI,
+	codeUI: APopOverCodeUI,


Should be APopover, fix all instances,

Suggested change

component: APopOver,

settingsUI: APopOverSettingsUI,

codeUI: APopOverCodeUI,

component: APopover,

settingsUI: APopoverSettingsUI,

codeUI: APopoverCodeUI,

Akshat55 · 2024-05-02T01:58:01Z

+	codeExport: {
+        angular: {
+            latest: {
+				inputs: ({ json }) => `


Extra indentation? Have you ran the linter?

Akshat55 · 2024-05-02T01:58:15Z

+					return `<div
+                        cdsPopover


Identation - run linter

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

…popover

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

zvonimirfras

indentation of many files here is a bit all over the place

Let's fix that before moving forward, it's hard to read at the moment.

zvonimirfras · 2024-07-16T15:04:47Z

+open={state.isOpen ? state.isOpen : false}
+align={state.align ? state.align : (state.isTabTip ? 'bottom-start' : 'bottom')}
+caret={state.isShowCaret ? state.isShowCaret : (state.isTabTip ? false : true)}
+dropShadow={state.isDropShadow ? state.isDropShadow : true}
+highContrast={state.isHighContrast ? state.isHighContrast : true}
+isTabTip={state.isTabTip ? state.isTabTip : false}>


indentation

zvonimirfras · 2024-07-16T15:05:23Z

+import { styleObjectToString } from '@carbon-builder/player-react';
+
+export const APopoverSettingsUI = ({ selectedComponent, setComponent }: any) => {
+


Suggested change

zvonimirfras · 2024-07-16T15:05:56Z

+		{ id: 'right-start', text: 'Right start' }
+	];
+
+	return <>


indentation of the whole return

zvonimirfras · 2024-07-16T15:07:47Z

+	type: 'popover',
+	defaultComponentObj: {
+		type: 'popover',
+		label: 'popover',


Needs a better label

zvonimirfras · 2024-07-16T15:07:56Z

+	defaultComponentObj: {
+		type: 'popover',
+		label: 'popover',
+		isOpen: true


Why is this default?

Max You added 3 commits April 10, 2024 13:37

popover progress

cbf6097

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

finsih

f1daaed

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

finish'

06ee854

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

Max You added 2 commits April 26, 2024 16:11

fixed

b3b91a5

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

react export

abc4cf5

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

Akshat55 requested changes May 2, 2024

View reviewed changes

Max You added 7 commits May 2, 2024 15:50

lint and v10

0aad41a

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

popover instead of PopOver

1efaf3c

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

popover instead of PopOver

a798708

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

more align items

45f1eff

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

defnition popover

6b56440

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

Merge branch 'main' of https://github.com/IBM/carbon-ui-builder into …

204363f

…popover

lint

935b1d2

Signed-off-by: Max You <JianzhongMax.You@ibm.com>

jz5426 force-pushed the popover branch from 2c9c607 to 935b1d2 Compare May 10, 2024 14:11

Akshat55 changed the title ~~Popover~~ feat: add definition tooltip component May 22, 2024

Akshat55 changed the title ~~feat: add definition tooltip component~~ feat: add definition tooltip component as a fragment component May 22, 2024

Akshat55 changed the title ~~feat: add definition tooltip component as a fragment component~~ feat: add popoverp component as a fragment component May 22, 2024

Akshat55 changed the title ~~feat: add popoverp component as a fragment component~~ feat: add popover component as a fragment component May 22, 2024

Akshat55 changed the title ~~feat: add popover component as a fragment component~~ feat: add popover as a fragment component May 22, 2024

zvonimirfras requested a review from Akshat55 July 11, 2024 08:59

zvonimirfras requested changes Jul 16, 2024

View reviewed changes

+                          }
+                      }
+                  }
+              };

                
                    No newline at end of file

		import { styleObjectToString } from '@carbon-builder/player-react';

		export const APopoverSettingsUI = ({ selectedComponent, setComponent }: any) => {

Uh oh!

Conversation

jz5426 commented Apr 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented Apr 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-components-builder ready!

Uh oh!

jz5426 commented Apr 26, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zvonimirfras left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jz5426 commented Apr 10, 2024 •

edited

Loading

netlify Bot commented Apr 10, 2024 •

edited

Loading