Skip to content

Commit 651a102

Browse files
James-BaloyiJames-Baloyi
authored
Merge pull request #3129 from czwe-01/thulasizwe/en/button-group
fix:button group menu item height
2 parents 271c0cc + 9a6bd6d commit 651a102

File tree

11 files changed

+115
-105
lines changed

11 files changed

+115
-105
lines changed

‎shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FC, useEffect, useMemo, useState } from 'react';
22
import { IButtonGroupItem, IDynamicItem, isDynamicItem } from '@/providers/buttonGroupConfigurator/models';
3-
import { Button, Tooltip, Typography } from 'antd';
3+
import { Button, Flex, Tooltip, Typography } from 'antd';
44
import { QuestionCircleOutlined } from '@ant-design/icons';
55
import ShaIcon, { IconType } from '@/components/shaIcon';
66
import { IConfigurableActionConfiguration, useDynamicActionsDispatcher, useSheshaApplication } from '@/providers';
@@ -114,7 +114,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
114114
return (
115115
<>
116116
{item.itemSubType === 'button' && (
117-
<>
117+
<Flex>
118118
<Button
119119
title={tooltip}
120120
type={buttonType}
@@ -134,7 +134,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
134134
<QuestionCircleOutlined className={styles.helpIcon} style={{ marginLeft: '2px' }} />
135135
</Tooltip>
136136
)}
137-
</>
137+
</Flex>
138138
)}
139139
{item.itemSubType === 'separator' && (<Text type="secondary">— separator —</Text>)}
140140
{isDynamicItem(item) && (<DynamicGroupDetails {...item} />)}

‎shesha-reactjs/src/components/buttonGroupConfigurator/utils.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11

22
export const initialValues = (): any => {
33
return {
4-
background: { type: 'color' },
4+
background: {
5+
type: 'color',
6+
repeat: 'no-repeat',
7+
size: 'cover',
8+
position: 'center',
9+
gradient: { direction: 'to right' }
10+
},
511
font: { weight: '400', size: 14, align: 'center', type: 'Segoe UI' },
612
dimensions: { width: 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
713
border: {
@@ -11,6 +17,7 @@ export const initialValues = (): any => {
1117
border: { all: { width: '1px', style: 'solid' } },
1218
radius: { all: 8 }
1319
},
20+
shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
1421
stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',
1522
};
1623
};

‎shesha-reactjs/src/components/entityPicker/styles/styles.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createStyles, sheshaStyles } from '@/styles';
22
import { CSSProperties } from 'react';
33

4-
export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { style?: CSSProperties }) => {
4+
export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }: { style?: CSSProperties }) => {
55
const pickerEllipsisBtnWidth = "45px";
66

77
const pickerInputGroup = "picker-input-group";
@@ -17,12 +17,16 @@ export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { styl
1717
.${pickerInputGroupInput} {
1818
width: calc(100% - ${pickerEllipsisBtnWidth});
1919
}
20-
20+
2121
.${pickerInputGroupEllipsis} {
2222
width: ${pickerEllipsisBtnWidth};
23-
border-left: 1px solid #d9d9d9;
2423
}
25-
}
24+
}
25+
.${pickerInputGroupEllipsis} {
26+
&:hover {
27+
border-color: ${token.colorPrimary} !important;
28+
}
29+
}
2630
2731
.global-tablefilter {
2832
padding-right: unset !important;
@@ -67,8 +71,8 @@ export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { styl
6771
const entitySelect = cx("entity-select", css`
6872
--ant-color-text: ${style?.color || '#000'} !important;
6973
width: calc(100% - 32px) !important;
70-
&:hover: {
71-
color: colorTextSecondary,
74+
&:hover {
75+
border-color: ${token.colorPrimary} !important;
7276
}
7377
7478
.ant-select-selector > ant-select-selection-search, ant-select-selection-placeholder {
@@ -89,6 +93,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { styl
8993
font-weight: ${style?.fontWeight} !important;
9094
color: ${style?.color || '#000'} !important;
9195
font-family: ${style?.fontFamily || 'inherit'} !important;
96+
9297
}
9398
`);
9499

‎shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroup.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,8 @@ export const ButtonGroupInner: FC<IButtonGroupProps> = (props) => {
241241
...borderStyles,
242242
...backgroundStyles,
243243
...shadowStyles,
244-
...stylingBoxAsCSS
244+
...stylingBoxAsCSS,
245+
...jsStyle
245246
});
246247

247248
const finalStyle = removeUndefinedProps({ ...additionalStyles });
@@ -361,7 +362,7 @@ export const ButtonGroupInner: FC<IButtonGroupProps> = (props) => {
361362
<Menu
362363
mode="horizontal"
363364
items={menuItems}
364-
className={classNames(styles.shaResponsiveButtonGroup, `space-${spaceSize}`)}
365+
className={classNames(styles.shaResponsiveButtonGroup, styles.a, `space-${spaceSize}`)}
365366
style={{ width: '30px' }}
366367
/>
367368
</div>

‎shesha-reactjs/src/designer-components/button/buttonGroup/settingsForm.ts‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -33,34 +33,6 @@ export const getSettings = (data: IButtonGroupComponentProps) => {
3333
},
3434
jsSetting: true,
3535
})
36-
.addSettingsInputRow({
37-
id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
38-
parentId: 's4gmBg31azZC0UjZjpfTm',
39-
inputs: [
40-
{
41-
type: 'dropdown',
42-
id: 'space-size-s4gmBg31azZC0UjZjpfTm',
43-
propertyName: 'spaceSize',
44-
label: 'Space Size',
45-
tooltip: 'Enter default value of component. (formData, formMode, globalState) are exposed',
46-
jsSetting: true,
47-
dropdownOptions: [
48-
{
49-
label: 'Small',
50-
value: 'small',
51-
},
52-
{
53-
label: 'Middle',
54-
value: 'middle',
55-
},
56-
{
57-
label: 'Large',
58-
value: 'large',
59-
}
60-
],
61-
},
62-
],
63-
})
6436
.addSettingsInputRow({
6537
id: '12d700d6-ed4d-49d5-9cfd-fe8f0060f3b6',
6638
parentId: 's4gmBg31azZC0UjZjpfTm',
@@ -128,6 +100,36 @@ export const getSettings = (data: IButtonGroupComponentProps) => {
128100
},
129101
components: [
130102
...new DesignerToolbarSettings()
103+
104+
.addSettingsInputRow({
105+
id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
106+
parentId: 's4gmBg31azZC0UjZjpfTm',
107+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
108+
inputs: [
109+
{
110+
type: 'dropdown',
111+
id: 'space-size-s4gmBg31azZC0UjZjpfTm',
112+
propertyName: 'spaceSize',
113+
label: 'Gap',
114+
tooltip: 'Enter default value of component. (formData, formMode, globalState) are exposed',
115+
jsSetting: true,
116+
dropdownOptions: [
117+
{
118+
label: 'Small',
119+
value: 'small',
120+
},
121+
{
122+
label: 'Middle',
123+
value: 'middle',
124+
},
125+
{
126+
label: 'Large',
127+
value: 'large',
128+
}
129+
],
130+
},
131+
],
132+
})
131133
.addCollapsiblePanel({
132134
id: 'dimensionsStyleCollapsiblePanel',
133135
propertyName: 'pnlDimensions',

‎shesha-reactjs/src/designer-components/button/buttonGroup/styles/styles.ts‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { createStyles } from '@/styles';
22

33
export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
4-
const shaResponsiveButtonGroup = "sha-responsive-button-group";
5-
const shaResponsiveButtonGroupInlineContainer = "sha-responsive-button-group-inline-container";
6-
const shaButtonMenu = "sha-button-menu";
7-
const a = css`
4+
const shaResponsiveButtonGroup = "sha-responsive-button-group";
5+
const shaResponsiveButtonGroupInlineContainer = "sha-responsive-button-group-inline-container";
6+
const shaButtonMenu = "sha-button-menu";
7+
const a = css`
8+
89
.${shaButtonMenu} {
910
.${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup & {
1011
padding: unset !important;
@@ -18,28 +19,28 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
1819
}
1920
`;
2021

21-
/*
22-
// Make sure that all the buttons in the popups are styled like links
23-
.${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup {
24-
.sha-button-menu {
25-
padding: unset !important;
26-
button {
27-
color: var(--ant-primary-color) !important;
28-
border-color: transparent !important;
29-
background: transparent !important;
30-
box-shadow: none !important;
22+
/*
23+
// Make sure that all the buttons in the popups are styled like links
24+
.${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup {
25+
.sha-button-menu {
26+
padding: unset !important;
27+
button {
28+
color: var(--ant-primary-color) !important;
29+
border-color: transparent !important;
30+
background: transparent !important;
31+
box-shadow: none !important;
32+
}
3133
}
3234
}
33-
}
34-
*/
35+
*/
3536

36-
const shaResponsiveButtonGroupContainer = cx("sha-responsive-button-group-container", css`
37-
.${shaResponsiveButtonGroup} {
38-
line-height: unset;
39-
min-height: 30px;
40-
.${prefixCls}-menu-item,
41-
.${prefixCls}-menu-vertical,
42-
.${prefixCls}-menu-submenu,
37+
const shaResponsiveButtonGroupContainer = cx("sha-responsive-button-group-container", css`
38+
.${shaResponsiveButtonGroup} {
39+
line-height: unset;
40+
min-height: 30px;
41+
.${prefixCls}-menu-item,
42+
.${prefixCls}-menu-vertical,
43+
.${prefixCls}-menu-submenu,
4344
.${prefixCls}-menu-sub,
4445
.${prefixCls}-menu-item-only-child {
4546
padding: unset !important;
@@ -95,10 +96,10 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
9596
}
9697
}
9798
`);
98-
return {
99-
shaResponsiveButtonGroupContainer,
100-
shaResponsiveButtonGroup,
101-
shaResponsiveButtonGroupInlineContainer,
102-
a,
103-
};
104-
});
99+
return {
100+
shaResponsiveButtonGroupContainer,
101+
shaResponsiveButtonGroup,
102+
shaResponsiveButtonGroupInlineContainer,
103+
a,
104+
};
105+
});

‎shesha-reactjs/src/designer-components/button/buttonGroup/utils.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const defaultStyles = (prev): IStyleType => {
3535
},
3636
radius: { all: 8 }
3737
},
38+
shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
3839
dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
3940
stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',
4041
};
@@ -50,6 +51,6 @@ export const defaultContainerStyles = (prev): IStyleType => {
5051
borderType: 'all',
5152
},
5253
shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
53-
dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' }
54+
dimensions: { width: prev.block ? '100%' : 'auto', height: 'auto', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' }
5455
};
5556
};

‎shesha-reactjs/src/designer-components/button/configurableButton/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React, { FC, useState } from 'react';
1+
import React, { FC, useState, CSSProperties } from 'react';
22
import { Button, FormInstance } from 'antd';
33
import { ShaIcon, IconType } from '@/components';
44
import classNames from 'classnames';
55
import { IButtonItem } from '@/providers/buttonGroupConfigurator/models';
6-
import { CSSProperties } from 'react';
76
import { useConfigurableActionDispatcher } from '@/providers/configurableActionsDispatcher';
87
import { useAvailableConstantsData } from '@/providers/form/utils';
98
import { isNavigationActionConfiguration, useShaRouting, useTheme } from '@/index';

‎shesha-reactjs/src/designer-components/dropdown/settingsForm.ts‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -149,10 +149,6 @@ export const getSettings = (data: IDropdownComponentProps) => {
149149
{
150150
value: "referenceList",
151151
label: "Reference list"
152-
},
153-
{
154-
value: "url",
155-
label: "URL"
156152
}
157153
],
158154
})
@@ -297,24 +293,15 @@ export const getSettings = (data: IDropdownComponentProps) => {
297293
}
298294
]
299295
})
300-
.addSettingsInputRow({
301-
id: 'data-source-url-6eBJvoll3xtLJxdvOAlnB',
302-
inputs: [{
303-
id: '99629618-d725-4690-b744-97a4b0ae3b19',
304-
type: 'textField',
305-
propertyName: 'dataSourceUrl',
306-
label: 'Data Source Url',
307-
labelAlign: 'right',
308-
parentId: '6eBJvoll3xtLJxdvOAlnB',
309-
language: 'typescript',
310-
hidden: {
311-
"_code": "return getSettingValue(data.dataSourceType) !== 'url';",
312-
"_mode": "code",
313-
"_value": false
314-
} as any,
315-
}]
296+
.addSettingsInput({
297+
id: '03959ffd-cadb-496c-bf6d-b742f7f6edc5',
298+
parentId: '6eBJvoll3xtLJxdvOAlnB',
299+
inputType: 'textArea',
300+
propertyName: 'ignoredValues',
301+
label: 'Ignored Values',
302+
allowClear: true,
303+
tooltip: 'Pass an array of positive integers to ignore specific values. For example: [1, 2, 3].',
316304
})
317-
318305
.toJson()
319306
]
320307

‎shesha-reactjs/src/designer-components/settingsInput/index.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,20 @@ const SettingsInput: IToolboxComponent<ISettingsInputProps> = {
1414
Factory: ({ model }) => {
1515
const { label, dropdownOptions, buttonGroupOptions, hasUnits, propertyName: property, tooltip: description, readOnly } = model;
1616

17+
1718
return (
18-
<SettingInput size='small'
19-
label={label}
20-
dropdownOptions={dropdownOptions}
21-
buttonGroupOptions={buttonGroupOptions}
22-
hasUnits={hasUnits} propertyName={property}
23-
tooltip={description}
24-
readOnly={readOnly}
25-
jsSetting={model.jsSetting}
26-
layout={model.layout}
27-
{...model}
28-
type={model.inputType} />
19+
model.hidden ? null :
20+
<SettingInput size='small'
21+
label={label}
22+
dropdownOptions={dropdownOptions}
23+
buttonGroupOptions={buttonGroupOptions}
24+
hasUnits={hasUnits} propertyName={property}
25+
tooltip={description}
26+
readOnly={readOnly}
27+
jsSetting={model.jsSetting}
28+
layout={model.layout}
29+
{...model}
30+
type={model.inputType} />
2931

3032
);
3133
}

0 commit comments

Comments
 (0)