Skip to content

Commit fff158d

Browse files
wmdev0808wmdev0808
committed
Merge branch 'release' into feature/4149-button-widget-style
2 parents 5e01f8a + b170a01 commit fff158d

File tree

11 files changed

+848
-246
lines changed

11 files changed

+848
-246
lines changed

‎app/client/src/components/designSystems/appsmith/MenuButtonComponent/index.tsx‎

Lines changed: 355 additions & 79 deletions
Large diffs are not rendered by default.

‎app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx‎

Lines changed: 73 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,57 @@ export interface BoxShadowOptionsControlProps extends ControlProps {
4848
propertyValue: ButtonBoxShadow | undefined;
4949
}
5050

51+
const buttonConfigs = [
52+
{
53+
variant: ButtonBoxShadowTypes.NONE,
54+
icon: {
55+
element: ControlIcons.BOX_SHADOW_NONE,
56+
color: "#CACACA",
57+
width: 16,
58+
},
59+
},
60+
{
61+
variant: ButtonBoxShadowTypes.VARIANT1,
62+
icon: {
63+
element: ControlIcons.BOX_SHADOW_VARIANT1,
64+
height: 32,
65+
width: 40,
66+
},
67+
},
68+
{
69+
variant: ButtonBoxShadowTypes.VARIANT2,
70+
icon: {
71+
element: ControlIcons.BOX_SHADOW_VARIANT2,
72+
height: 28,
73+
width: 36,
74+
},
75+
},
76+
{
77+
variant: ButtonBoxShadowTypes.VARIANT3,
78+
icon: {
79+
element: ControlIcons.BOX_SHADOW_VARIANT3,
80+
height: 27,
81+
width: 32,
82+
},
83+
},
84+
{
85+
variant: ButtonBoxShadowTypes.VARIANT4,
86+
icon: {
87+
element: ControlIcons.BOX_SHADOW_VARIANT4,
88+
height: 26,
89+
width: 34,
90+
},
91+
},
92+
{
93+
variant: ButtonBoxShadowTypes.VARIANT5,
94+
icon: {
95+
element: ControlIcons.BOX_SHADOW_VARIANT5,
96+
height: 26,
97+
width: 34,
98+
},
99+
},
100+
];
101+
51102
class BoxShadowOptionsControl extends BaseControl<
52103
BoxShadowOptionsControlProps
53104
> {
@@ -64,81 +115,29 @@ class BoxShadowOptionsControl extends BaseControl<
64115

65116
return (
66117
<StyledButtonGroup fill>
67-
<StyledButton
68-
active={
69-
propertyValue === ButtonBoxShadowTypes.NONE ||
70-
propertyValue === undefined
71-
}
72-
icon={
73-
<ControlIcons.BOX_SHADOW_NONE
74-
color="#CACACA"
75-
keepColors
76-
width={16}
77-
/>
78-
}
79-
large
80-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.NONE)}
81-
/>
82-
<StyledButton
83-
active={propertyValue === ButtonBoxShadowTypes.VARIANT1}
84-
icon={
85-
<ControlIcons.BOX_SHADOW_VARIANT1
86-
height={32}
87-
keepColors
88-
width={40}
89-
/>
90-
}
91-
large
92-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.VARIANT1)}
93-
/>
94-
<StyledButton
95-
active={propertyValue === ButtonBoxShadowTypes.VARIANT2}
96-
icon={
97-
<ControlIcons.BOX_SHADOW_VARIANT2
98-
height={28}
99-
keepColors
100-
width={36}
101-
/>
102-
}
103-
large
104-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.VARIANT2)}
105-
/>
106-
<StyledButton
107-
active={propertyValue === ButtonBoxShadowTypes.VARIANT3}
108-
icon={
109-
<ControlIcons.BOX_SHADOW_VARIANT3
110-
height={27}
111-
keepColors
112-
width={32}
113-
/>
114-
}
115-
large
116-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.VARIANT3)}
117-
/>
118-
<StyledButton
119-
active={propertyValue === ButtonBoxShadowTypes.VARIANT4}
120-
icon={
121-
<ControlIcons.BOX_SHADOW_VARIANT4
122-
height={26}
123-
keepColors
124-
width={34}
125-
/>
126-
}
127-
large
128-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.VARIANT4)}
129-
/>
130-
<StyledButton
131-
active={propertyValue === ButtonBoxShadowTypes.VARIANT5}
132-
icon={
133-
<ControlIcons.BOX_SHADOW_VARIANT5
134-
height={26}
135-
keepColors
136-
width={34}
118+
{buttonConfigs.map(({ icon, variant }) => {
119+
const active =
120+
variant === ButtonBoxShadowTypes.NONE
121+
? propertyValue === variant || propertyValue === undefined
122+
: propertyValue === variant;
123+
124+
return (
125+
<StyledButton
126+
active={active}
127+
icon={
128+
<icon.element
129+
color={icon.color}
130+
height={icon.height}
131+
keepColors
132+
width={icon.width}
133+
/>
134+
}
135+
key={variant}
136+
large
137+
onClick={() => this.toggleOption(variant)}
137138
/>
138-
}
139-
large
140-
onClick={() => this.toggleOption(ButtonBoxShadowTypes.VARIANT5)}
141-
/>
139+
);
140+
})}
142141
</StyledButtonGroup>
143142
);
144143
}

‎app/client/src/components/propertyControls/ButtonBorderRadiusControl.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import * as React from "react";
2+
import styled from "styled-components";
3+
import { Button, ButtonGroup, IButtonProps } from "@blueprintjs/core";
4+
5+
import BaseControl, { ControlProps } from "./BaseControl";
6+
import { ControlIcons } from "icons/ControlIcons";
7+
import { ThemeProp } from "components/ads/common";
8+
9+
export enum ButtonBorderRadiusTypes {
10+
SHARP = "SHARP",
11+
ROUNDED = "ROUNDED",
12+
CIRCLE = "CIRCLE",
13+
}
14+
export type ButtonBorderRadius = keyof typeof ButtonBorderRadiusTypes;
15+
16+
const StyledButtonGroup = styled(ButtonGroup)`
17+
height: 33px;
18+
`;
19+
20+
const StyledButton = styled(Button)<ThemeProp & IButtonProps>`
21+
border: ${(props) =>
22+
props.active ? `1px solid #6A86CE` : `1px solid #A9A7A7`};
23+
border-radius: 0;
24+
box-shadow: none !important;
25+
background-image: none !important;
26+
background-color: #ffffff !important;
27+
& > div {
28+
display: flex;
29+
}
30+
&.bp3-active {
31+
box-shadow: none !important;
32+
background-color: #ffffff !important;
33+
}
34+
&:hover {
35+
background-color: #ffffff !important;
36+
}
37+
`;
38+
39+
export interface ButtonBorderRadiusOptionsControlProps extends ControlProps {
40+
propertyValue: ButtonBorderRadius | undefined;
41+
onChange: (borderRaidus: ButtonBorderRadius) => void;
42+
}
43+
44+
class ButtonBorderRadiusOptionsControl extends BaseControl<
45+
ButtonBorderRadiusOptionsControlProps
46+
> {
47+
constructor(props: ButtonBorderRadiusOptionsControlProps) {
48+
super(props);
49+
}
50+
51+
static getControlType() {
52+
return "BUTTON_BORDER_RADIUS_OPTIONS";
53+
}
54+
55+
public render() {
56+
const { propertyValue } = this.props;
57+
58+
return (
59+
<StyledButtonGroup fill>
60+
<StyledButton
61+
active={propertyValue === ButtonBorderRadiusTypes.SHARP || undefined}
62+
icon={<ControlIcons.BORDER_RADIUS_SHARP color="#979797" width={15} />}
63+
large
64+
onClick={() => this.toggleOption(ButtonBorderRadiusTypes.SHARP)}
65+
/>
66+
<StyledButton
67+
active={propertyValue === ButtonBorderRadiusTypes.ROUNDED}
68+
icon={
69+
<ControlIcons.BORDER_RADIUS_ROUNDED color="#979797" width={15} />
70+
}
71+
large
72+
onClick={() => this.toggleOption(ButtonBorderRadiusTypes.ROUNDED)}
73+
/>
74+
</StyledButtonGroup>
75+
);
76+
}
77+
78+
private toggleOption = (option: ButtonBorderRadius) => {
79+
this.updateProperty(this.props.propertyName, option);
80+
};
81+
}
82+
83+
export default ButtonBorderRadiusOptionsControl;

‎app/client/src/components/propertyControls/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,9 @@ import MultiSwitchControl, {
4545
import MenuItemsControl from "./MenuItemsControl";
4646
import IconSelectControl from "./IconSelectControl";
4747
import IconAlignControl from "./IconAlignControl";
48-
import BorderRadiusOptionsControl from "./BorderRadiusOptionsControl";
4948
import BoxShadowOptionsControl from "./BoxShadowOptionsControl";
49+
import BorderRadiusOptionsControl from "./BorderRadiusOptionsControl";
50+
import ButtonBorderRadiusOptionsControl from "./ButtonBorderRadiusControl";
5051

5152
export const PropertyControls = {
5253
InputTextControl,
@@ -71,8 +72,9 @@ export const PropertyControls = {
7172
MenuItemsControl,
7273
IconSelectControl,
7374
IconAlignControl,
74-
BorderRadiusOptionsControl,
7575
BoxShadowOptionsControl,
76+
BorderRadiusOptionsControl,
77+
ButtonBorderRadiusOptionsControl,
7678
};
7779

7880
export type PropertyControlPropsType =

‎app/client/src/constants/Colors.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -95,22 +95,24 @@ export const Colors = {
9595
THUNDER_ALT: "#1D1C1D",
9696
CRUSTA: "#F86A2B",
9797

98-
ICON_BUTTON_WARNING_SOLID: "#FEB811",
99-
ICON_BUTTON_WARNING_SOLID_HOVER: "#EFA903",
100-
ICON_BUTTON_WARNING_OUTLINE_HOVER: "#FFFAE9",
101-
ICON_BUTTON_WARNING_GHOST_HOVER: "#FBEED0",
98+
WARNING_SOLID: "#FEB811",
99+
WARNING_SOLID_HOVER: "#EFA903",
100+
WARNING_OUTLINE_HOVER: "#FFFAE9",
101+
WARNING_GHOST_HOVER: "#FBEED0",
102102

103-
ICON_BUTTON_DANGER_SOLID: "#F22B2B",
104-
ICON_BUTTON_DANGER_SOLID_HOVER: "#B90707",
105-
ICON_BUTTON_DANGER_NO_SOLID_HOVER: "#FDE4E4",
103+
DANGER_SOLID: "#F22B2B",
104+
DANGER_SOLID_HOVER: "#B90707",
105+
DANGER_NO_SOLID_HOVER: "#FDE4E4",
106106

107-
ICON_BUTTON_INFO_SOLID: "#6698FF",
108-
ICON_BUTTON_INFO_SOLID_HOVER: "#1A65FF",
109-
ICON_BUTTON_INFO_NO_SOLID_HOVER: "#CEDCFF",
107+
INFO_SOLID: "#6698FF",
108+
INFO_SOLID_HOVER: "#1A65FF",
109+
INFO_NO_SOLID_HOVER: "#CEDCFF",
110110

111-
ICON_BUTTON_PRIMARY_SOLID_HOVER: "#00693B",
112-
ICON_BUTTON_PRIMARY_OUTLINE_HOVER: "#D9FDED",
113-
ICON_BUTTON_PRIMARY_GHOST_HOVER: "#CBF4E2",
111+
PRIMARY_SOLID_HOVER: "#00693B",
112+
PRIMARY_OUTLINE_HOVER: "#D9FDED",
113+
PRIMARY_GHOST_HOVER: "#CBF4E2",
114+
115+
CUSTOM_SOLID_DARK_TEXT_COLOR: "#333",
114116

115117
BOX_SHADOW_DEFAULT_VARIANT1: "rgba(0, 0, 0, 0.25)",
116118
BOX_SHADOW_DEFAULT_VARIANT2: "rgba(0, 0, 0, 0.25)",

0 commit comments

Comments
 (0)