Skip to content

Commit 619cf11

Browse files
guoda-puidokaiteguoda-puidokaite
committed
tested data tags
1 parent 13c711b commit 619cf11

13 files changed

Lines changed: 102 additions & 27 deletions

File tree

‎apps/example/src/components/peaks/list/PeaksListItem.tsx‎

Lines changed: 83 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,17 @@ import {
2929
Pill,
3030
Icon,
3131
CheckboxGroup,
32+
ComboBoxOption,
33+
ComboBox,
34+
DateTimePicker,
35+
RadioGroup,
36+
Select,
37+
SelectOption,
38+
PopupMenu,
39+
PopupMenuOptions,
40+
Tooltip,
41+
TooltipTrigger,
42+
TooltipContent,
3243
} from "@cloudoperators/juno-ui-components"
3344

3445
import { Peak } from "../../../mocks/db"
@@ -53,11 +64,6 @@ const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak, onSelect }) => {
5364
setSelectedPeakId(peak.id)
5465
}
5566

56-
const handleGroupChange = () => {
57-
console.log("Checkbox group values updated:", "xsss")
58-
alert("Checkbox Group!")
59-
}
60-
6167
return (
6268
<DataGridRow onClick={openPanel}>
6369
<DataGridCell className="p-6 text-highest">
@@ -81,14 +87,48 @@ const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak, onSelect }) => {
8187
<DataGridCell>{peak.countries}</DataGridCell>
8288
<DataGridCell className={"pt-5 pb-5"}>
8389
{/* Pass in additional props (...props) */}
84-
<Button label="Default" onDoubleClick={() => alert("Button!")} />
85-
<Checkbox onDoubleClick={() => alert("Button!")} />
86-
<CheckboxGroup onChange={handleGroupChange}>
90+
<Button label="Double Click" onDoubleClick={() => alert("Button!")} />
91+
<Checkbox label="Double Click" onDoubleClick={() => alert("Double Clicked!")} />
92+
<CheckboxGroup onChange={() => alert("Checkbox Group!")}>
8793
<Checkbox label="Option 1" value="val-1" />
8894
<Checkbox label="Option 2" value="val-2" />
8995
<Checkbox label="Option 3" value="val-3" />
9096
</CheckboxGroup>
9197
<CodeBlock content="Some code goes here" />
98+
<ComboBox
99+
onBlur={function Ofe() {}}
100+
onChange={() => alert("ComboBox!")}
101+
onFocus={function Ofe() {}}
102+
onInputChange={function Ofe() {}}
103+
>
104+
<ComboBoxOption value="Rhubarb">Rhubarb</ComboBoxOption>
105+
<ComboBoxOption value="Carrots">Carrots</ComboBoxOption>
106+
<ComboBoxOption value="Spinach">Spinach</ComboBoxOption>
107+
<ComboBoxOption value="Tomatoes">Tomatoes</ComboBoxOption>
108+
<ComboBoxOption value="Cucumbers">Cucumbers</ComboBoxOption>
109+
<ComboBoxOption value="Cauliflower">Cauliflower</ComboBoxOption>
110+
<ComboBoxOption value="Eggplant">Eggplant</ComboBoxOption>
111+
<ComboBoxOption value="Zucchini">Zucchini</ComboBoxOption>
112+
<ComboBoxOption value="Brussels sprouts">Brussels Sprouts</ComboBoxOption>
113+
<ComboBoxOption value="Horseradish">Horseradish</ComboBoxOption>
114+
<ComboBoxOption value="Green beans">Green Beans</ComboBoxOption>
115+
<ComboBoxOption value="Mushrooms">Mushrooms</ComboBoxOption>
116+
<ComboBoxOption value="Leek">Leek</ComboBoxOption>
117+
<ComboBoxOption value="Artichokes">Artichokes</ComboBoxOption>
118+
<ComboBoxOption value="Peas">Peas</ComboBoxOption>
119+
<ComboBoxOption value="Potatoes">Potatoes</ComboBoxOption>
120+
</ComboBox>
121+
<DateTimePicker
122+
onBlur={function Ofe() {}}
123+
onChange={function Ofe() {}} // Reviewers: Issue? Why DateTimePicket event fires on load?
124+
onClear={function Ofe() {}}
125+
onClose={function Ofe() {}}
126+
onFocus={function Ofe() {}}
127+
onMonthChange={function Ofe() {}}
128+
onOpen={function Ofe() {}}
129+
onReady={function Ofe() {}}
130+
onYearChange={function Ofe() {}}
131+
/>
92132
<JsonViewer
93133
data={{
94134
array: [],
@@ -125,17 +165,51 @@ const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak, onSelect }) => {
125165
<NativeSelectOption label="Option 3" value="o-3" />
126166
</NativeSelect>
127167
<Radio onChange={function Ofe() {}} onClick={() => alert("Radio!")} value="1" />
168+
<RadioGroup onChange={() => alert("Radio Group!")}>
169+
<Radio label="Option 1" value="default-1" />
170+
<Radio label="Option 2" value="default-2" />
171+
<Radio label="Option 3" value="default-3" />
172+
</RadioGroup>
128173
<SearchInput
129174
onChange={function Ofe() {}}
130175
onClear={function Ofe() {}}
131176
onClick={() => alert("Search Input!")}
132177
onKeyPress={function Ofe() {}}
133178
onSearch={function Ofe() {}}
134179
/>
180+
<SecretText
181+
onBlur={function Ofe() {}}
182+
onChange={function Ofe() {}}
183+
onClear={function Ofe() {}}
184+
onCopy={function Ofe() {}}
185+
onFocus={function Ofe() {}}
186+
onHide={function Ofe() {}}
187+
onPaste={function Ofe() {}}
188+
onReveal={function Ofe() {}}
189+
onToggle={function Ofe() {}}
190+
/>
191+
{/* Reviewers: Event fires here on click of option */}
192+
<Select onChange={function Ofe() {}} onValueChange={function Ofe() {}}>
193+
<SelectOption value="Option 1" />
194+
<SelectOption value="Option 2" />
195+
<SelectOption value="Option 3" />
196+
</Select>
135197
<Switch id="switch-default" label="Switch" onChange={function Ofe() {}} onClick={() => alert("Switch!")} />
136198
<Textarea onBlur={function Ofe() {}} onChange={function Ofe() {}} onFocus={function Ofe() {}} />
137199
<TextInput onBlur={function Ofe() {}} onChange={function Ofe() {}} onFocus={function Ofe() {}} />
138-
<Icon color="jn-global-text" icon="help" onClick={() => alert("Icon!")} />
200+
<Tooltip initialOpen>
201+
<TooltipTrigger>
202+
<span>click me</span>
203+
</TooltipTrigger>
204+
<TooltipContent>A default tooltip</TooltipContent>
205+
</Tooltip>
206+
<PopupMenu onClose={function Ofe() {}} onOpen={function Ofe() {}}>
207+
<PopupMenuOptions>
208+
{/* Menu item doesn't block event */}
209+
<button>Menu goes here.</button>
210+
</PopupMenuOptions>
211+
</PopupMenu>
212+
<Icon color="text-theme-success" icon="success" onClick={() => alert("Icon!")} />
139213
<Pill
140214
closeable
141215
onClick={() => alert("Pill Clicked!")}

‎packages/ui-components/src/components/Checkbox/Checkbox.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
230230
${className}
231231
`}
232232
{...props}
233+
data-row-stop-propagation
233234
>
234235
{determineChecked() ? (
235236
<svg
@@ -260,7 +261,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
260261
onFocus={handleFocus}
261262
type="checkbox"
262263
value={value}
263-
data-row-stop-propagation
264264
/>
265265
{isIndeterminate && !determineChecked() ? <div className={`${mockindeterminatestyles}`}></div> : ""}
266266
</div>

‎packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
148148
className={`juno-code-block ${wrapperStyles} ${lang ? `juno-code-block-lang-${lang}` : ""} ${className}`}
149149
data-lang={lang || null}
150150
{...props}
151+
data-row-stop-propagation
151152
>
152153
{heading && heading.length ? (
153154
<div className={`juno-codeblock-heading ${headingStyles}`}>
@@ -169,7 +170,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
169170
{copy ? (
170171
<div className={`juno-codeblock-bottombar ${bottomBarStyles}`}>
171172
<span className={`${copyTextStyles}`}>{isCopied ? "Copied!" : ""}</span>
172-
<Icon icon="contentCopy" onClick={handleCopyClick} data-row-stop-propagation />
173+
<Icon icon="contentCopy" onClick={handleCopyClick} />
173174
</div>
174175
) : (
175176
""

‎packages/ui-components/src/components/ComboBox/ComboBox.component.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,7 @@ export const ComboBox: React.FC<ComboBoxProps> = ({
365365
${width == "auto" ? "jn:w-auto" : "jn:w-full"}
366366
${wrapperClassName}
367367
`}
368+
data-row-stop-propagation
368369
>
369370
<Combobox
370371
defaultValue={defaultValue}

‎packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
488488
${width == "auto" ? "jn:w-auto" : "jn:w-full"}
489489
${wrapperClassName}
490490
`}
491+
data-row-stop-propagation
491492
>
492493
<div className={`juno-datetimepicker-input-wrapper ${inputWrapperStyles}`}>
493494
<input

‎packages/ui-components/src/components/JsonViewer/JsonViewer.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -198,10 +198,10 @@ const Toolbar: React.FC = () => {
198198
}}
199199
>
200200
<span style={{ display: "flex" }}>
201-
<span style={{ cursor: "pointer" }} onClick={() => onExpandAll && onExpandAll(true)} data-row-stop-propagation>
201+
<span style={{ cursor: "pointer" }} onClick={() => onExpandAll && onExpandAll(true)}>
202202
<ExpandAllIcon />
203203
</span>
204-
<span style={{ cursor: "pointer" }} onClick={() => onExpandAll && onExpandAll(false)} data-row-stop-propagation>
204+
<span style={{ cursor: "pointer" }} onClick={() => onExpandAll && onExpandAll(false)}>
205205
<CollapseAllIcon />
206206
</span>
207207
</span>
@@ -227,7 +227,6 @@ const ExpandButton: React.FC<ExpandButtonProps> = ({ children, isExpanded, setIs
227227
onClick={() => {
228228
setIsExpanded(!isExpanded)
229229
}}
230-
data-row-stop-propagation
231230
>
232231
{children}
233232
</span>
@@ -398,6 +397,7 @@ export const JsonViewer: React.FC<JsonViewerProps> = ({
398397
...style,
399398
}}
400399
{...props}
400+
data-row-stop-propagation
401401
>
402402
{toolbar && <Toolbar />}
403403
<JsonData name={showRoot ? "root" : false} value={data} />

‎packages/ui-components/src/components/PopupMenu/PopupMenu.component.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
244244
<div
245245
ref={refs.setReference}
246246
className={`juno-popupmenu-float-reference-wrapper ${floatingReferenceWrapperStyles}`}
247+
data-row-stop-propagation
247248
>
248249
{/* Render default toggle button if no toggle is passed, but still render an icon if passed: */}
249250
{!hasToggle && (
@@ -336,6 +337,7 @@ export const PopupMenuItem: React.FC<PopupMenuItemProps> = ({
336337
className={`juno-popupmenu-item ${itemStyles} ${disabled ? disabledItemStyles : actionableItemStyles} ${itemSizeStyles} ${className}`}
337338
{...(as === "a" ? { href, rel, target } : {})} // Conditionally spread anchor-specific props only when renering an anchor
338339
{...props}
340+
data-row-stop-propagation
339341
>
340342
{/*
341343
To render the item content, provide an itemBag context to the headless ui API. This includes properties like active, disabled, close.

‎packages/ui-components/src/components/Radio/Radio.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export const Radio: React.FC<RadioProps> = ({
220220
${isInvalid || isValid ? "" : noBorderStyles}
221221
${className}
222222
`}
223+
data-row-stop-propagation
223224
{...props}
224225
>
225226
<input
@@ -238,9 +239,8 @@ export const Radio: React.FC<RadioProps> = ({
238239
name={groupName || name}
239240
type="radio"
240241
value={value}
241-
data-row-stop-propagation
242242
/>
243-
{determineChecked() ? <span className={`${checkedstyles}`} data-row-stop-propagation></span> : ""}
243+
{determineChecked() ? <span className={`${checkedstyles}`}></span> : ""}
244244
</div>
245245
{label && isNotEmptyString(label) ? (
246246
<>

‎packages/ui-components/src/components/RadioGroup/RadioGroup.component.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
164164
`}
165165
id={groupId}
166166
role="radiogroup"
167+
data-row-stop-propagation
167168
{...props}
168169
>
169170
{label && isNotEmptyString(label) ? (

‎packages/ui-components/src/components/SecretText/SecretText.component.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ export const SecretText: React.FC<SecretTextProps> = ({
176176
juno-secret-wrapper
177177
${wrapperClassName}
178178
`}
179+
data-row-stop-propagation
179180
>
180181
<div
181182
className={`
@@ -223,7 +224,6 @@ export const SecretText: React.FC<SecretTextProps> = ({
223224
readOnly={readOnly}
224225
valid={valid}
225226
value={val}
226-
data-row-stop-propagation
227227
{...props}
228228
/>
229229
</div>
@@ -251,7 +251,6 @@ export const SecretText: React.FC<SecretTextProps> = ({
251251
onClick={handleClearClick}
252252
disabled={disabled || disableClear || !val.length ? true : undefined}
253253
title="Clear"
254-
data-row-stop-propagation
255254
>
256255
Clear
257256
</Button>

0 commit comments

Comments
 (0)