feat: add popover as a fragment component #304

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

Signed-off-by: Max You <[email protected]>

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 <[email protected]>

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

Verified that the component features and export works.

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

sdk/react/src/lib/fragment-components/a-popover.tsx

+                    <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

sdk/react/src/lib/fragment-components/a-popover.tsx

+	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

sdk/react/src/lib/fragment-components/a-popover.tsx

+            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

sdk/react/src/lib/fragment-components/a-popover.tsx

+            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

sdk/react/src/lib/fragment-components/a-popover.tsx

+            }
+        }
+    }
+};


Missing new line

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

sdk/react/src/lib/fragment-components/a-popover.tsx

+    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

sdk/react/src/lib/fragment-components/a-popover.tsx

+	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

sdk/react/src/lib/fragment-components/a-popover.tsx

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


Extra indentation? Have you ran the linter?

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

sdk/react/src/lib/fragment-components/a-popover.tsx

+					return `<div
+                        cdsPopover


Identation - run linter

Signed-off-by: Max You <[email protected]>

…popover

Signed-off-by: Max You <[email protected]>

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

player/react/src/lib/components/ui-popover.tsx

+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

sdk/react/src/lib/fragment-components/a-popover.tsx

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


Suggested change

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

sdk/react/src/lib/fragment-components/a-popover.tsx

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


indentation of the whole return

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

sdk/react/src/lib/fragment-components/a-popover.tsx

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


Needs a better label

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

sdk/react/src/lib/fragment-components/a-popover.tsx

+	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 <[email protected]>

finsih

f1daaed

Signed-off-by: Max You <[email protected]>

finish'

06ee854

Signed-off-by: Max You <[email protected]>

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

fixed

b3b91a5

Signed-off-by: Max You <[email protected]>

react export

abc4cf5

Signed-off-by: Max You <[email protected]>

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 <[email protected]>

popover instead of PopOver

1efaf3c

Signed-off-by: Max You <[email protected]>

popover instead of PopOver

a798708

Signed-off-by: Max You <[email protected]>

more align items

45f1eff

Signed-off-by: Max You <[email protected]>

defnition popover

6b56440

Signed-off-by: Max You <[email protected]>

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

204363f

…popover

lint

935b1d2

Signed-off-by: Max You <[email protected]>

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add popover as a fragment component #304

feat: add popover as a fragment component #304

jz5426 commented Apr 10, 2024 •

edited

Loading

netlify bot commented Apr 10, 2024 •

edited

Loading

jz5426 commented Apr 26, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

Akshat55 May 2, 2024

zvonimirfras left a comment

zvonimirfras Jul 16, 2024

zvonimirfras Jul 16, 2024

zvonimirfras Jul 16, 2024

zvonimirfras Jul 16, 2024

zvonimirfras Jul 16, 2024

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

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

feat: add popover as a fragment component #304

Are you sure you want to change the base?

feat: add popover as a fragment component #304

Conversation

jz5426 commented Apr 10, 2024 • edited Loading

netlify bot commented Apr 10, 2024 • edited Loading

✅ Deploy Preview for carbon-components-builder ready!

jz5426 commented Apr 26, 2024

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

zvonimirfras 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

jz5426 commented Apr 10, 2024 •

edited

Loading

netlify bot commented Apr 10, 2024 •

edited

Loading