Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: update button states to secondary (#19048)

Browse Source 
Some tertiary buttons were missed out when closing
https://github.com/appsmithorg/appsmith/issues/18052, not sure why. This
PR updates them.

Depends on https://github.com/appsmithorg/design-system/pull/294
This commit is contained in:
Tanvi Bhakta 2022-12-29 18:08:13 +07:00 committed by GitHub
parent 351c5a382d
commit 795416ac90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 135 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/CreateNewApp_spec.js
View File

@ -12,7 +12,7 @@ describe("Creating new app after discontinuing guided tour should not start the
cy.get(commonlocators.homeIcon)
.click({ force: true })
.wait(8000); //for page to settle!
datasources.CloseReconnectDataSourceModal() // Check if reconnect data source modal is visible and close it
datasources.CloseReconnectDataSourceModal(); // Check if reconnect data source modal is visible and close it
cy.get(guidedTourLocators.welcomeTour)
.click()
.wait(2000);

16
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js
View File

@ -819,8 +819,8 @@ describe("App Theming funtionality", function() {
//Change Border & verify
cy.get(".t--button-tab-0px").click();
cy.get(".t--button-tab-0px")
cy.get(".t--button-group-0px").click();
cy.get(".t--button-group-0px")
.eq(0)
.invoke("css", "border-top-left-radius")
.then((borderRadius) => {
@ -842,8 +842,8 @@ describe("App Theming funtionality", function() {
});
//Change Shadow & verify
cy.get(".t--button-tab-0.10px").click();
cy.get(".t--button-tab-0.10px div")
cy.get(".t--button-group-0.10px").click();
cy.get(".t--button-group-0.10px div")
.eq(0)
.invoke("css", "box-shadow")
.then((boxshadow) => {
@ -1051,10 +1051,10 @@ describe("App Theming funtionality", function() {
//Change Border & verify
cy.get(".t--button-tab-0\\.375rem")
cy.get(".t--button-group-0\\.375rem")
.click()
.wait(500);
cy.get(".t--button-tab-0\\.375rem div")
cy.get(".t--button-group-0\\.375rem div")
.eq(0)
.invoke("css", "border-top-left-radius")
.then((borderRadius) => {
@ -1076,10 +1076,10 @@ describe("App Theming funtionality", function() {
});
//Change Shadow & verify
cy.get(".t--button-tab-0.1px")
cy.get(".t--button-group-0.1px")
.click()
.wait(500);
cy.get(".t--button-tab-0.1px div")
cy.get(".t--button-group-0.1px div")
.invoke("css", "box-shadow")
.then((boxshadow) => {
cy.get(widgetsPage.widgetBtn)

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Button/ButtonGroup_MenuButton_Width_spec.js
View File

@ -60,7 +60,7 @@ describe("In a button group widget, menu button width", function() {
const menuButtonId = "groupButton1";
// Change the first button type to menu
cy.editColumn(menuButtonId);
cy.get(".t--button-tab-MENU").click({ force: true });
cy.get(".t--button-group-MENU").click({ force: true });
cy.get(".t--add-menu-item-btn").click();
// Get the newly converted menu button
cy.get(`.appsmith_widget_${widgetId} div.t--buttongroup-widget`)
@ -126,7 +126,7 @@ describe("In a button group widget, menu button width", function() {
.click();
cy.moveToStyleTab();
// Change its orientation to vetical
cy.get(".t--button-tab-vertical").click({ force: true });
cy.get(".t--button-group-vertical").click({ force: true });
// Get the default menu button
cy.get(`.appsmith_widget_${widgetId} div.t--buttongroup-widget`)
.children()

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Button/ButtonGroup_spec.js
View File

@ -97,7 +97,7 @@ describe("Button Group Widget Functionality", function() {
it("Update icon alignment and Verify buttons alignments", function() {
// align right
cy.get(".t--property-control-position .t--button-tab-left")
cy.get(".t--property-control-position .t--button-group-left")
.first()
.click();
cy.wait(200);
@ -106,7 +106,7 @@ describe("Button Group Widget Functionality", function() {
.eq(1)
.should("have.css", "flex-direction", "row");
// align left
cy.get(".t--property-control-position .t--button-tab-right")
cy.get(".t--property-control-position .t--button-group-right")
.last()
.click();
cy.wait(200);

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Button/Button_spec.js
View File

@ -31,7 +31,7 @@ describe("Button Widget Functionality", function() {
// Assert if the icon exists
cy.get(`${widgetsPage.buttonWidget} .bp3-icon-add`).should("exist");
// Change icon alignment to right
cy.get(`${iconAlignmentProperty} .t--button-tab-right`)
cy.get(`${iconAlignmentProperty} .t--button-group-right`)
.last()
.click({
force: true,

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CodeScanner/CodeScanner_spec.js
View File

@ -119,7 +119,7 @@ describe("Code Scanner widget's functionality", () => {
// Select scanner layout as CLICK_TO_SCAN
cy.get(
`${commonlocators.codeScannerScannerLayout} .t--button-tab-CLICK_TO_SCAN`,
`${commonlocators.codeScannerScannerLayout} .t--button-group-CLICK_TO_SCAN`,
)
.last()
.click({

6
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Form/Form_With_CheckBox_spec.js
View File

@ -34,7 +34,7 @@ describe("Checkbox Widget Functionality", function() {
);
// align right
cy.get(".t--property-control-alignment .t--button-tab-RIGHT")
cy.get(".t--property-control-alignment .t--button-group-RIGHT")
.first()
.click();
cy.get(publish.checkboxWidget + " " + ".t--checkbox-widget-label").should(
@ -63,7 +63,7 @@ describe("Checkbox Widget Functionality", function() {
.last()
.click({ force: true });
cy.wait(200);
cy.get(".t--button-tab-Left").click({ force: true });
cy.get(".t--button-group-Left").click({ force: true });
cy.wait(200);
cy.PublishtheApp();
@ -110,7 +110,7 @@ describe("Checkbox Widget Functionality", function() {
it("6. Checkbox Functionality To change label style of checkbox", function() {
cy.openPropertyPane("checkboxwidget");
cy.moveToStyleTab();
cy.get(".t--property-control-emphasis .t--button-tab-BOLD").click({
cy.get(".t--property-control-emphasis .t--button-group-BOLD").click({
force: true,
});
cy.PublishtheApp();

6
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/MenuButton_spec.js
View File

@ -23,7 +23,7 @@ describe("Menu Button Widget Functionality", () => {
// Assert if the icon exists
cy.get(`${formWidgetsPage.menuButtonWidget} .bp3-icon-add`).should("exist");
// Change its icon alignment to right
cy.get(".t--property-control-position .t--button-tab-right")
cy.get(".t--property-control-position .t--button-group-right")
.last()
.click({ force: true });
cy.wait(200);
@ -110,7 +110,9 @@ describe("Menu Button Widget Functionality", () => {
cy.moveToContentTab();
// Select menu items source as Dynamic
cy.get(`${commonlocators.menuButtonMenuItemsSource} .t--button-tab-DYNAMIC`)
cy.get(
`${commonlocators.menuButtonMenuItemsSource} .t--button-group-DYNAMIC`,
)
.last()
.click({
force: true,

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Others/Progress_spec.js
View File

@ -66,7 +66,7 @@ describe("Progress Widget", function() {
// Circular progress
it("Property: type, Change type to Circular", function() {
// Switch to circular mode
cy.get(".t--button-tab-circular").click({ force: true });
cy.get(".t--button-group-circular").click({ force: true });
cy.get("[data-cy='circular']").should("exist");
});
it("Property: isIndeterminate, Toggle infinite loading", function() {

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/RTE/RichTextEditor_spec.js
View File

@ -246,10 +246,10 @@ describe("RichTextEditor Widget Functionality", function() {
// Changing the input type to markdown and again testing the cursor position
cy.openPropertyPane("richtexteditorwidget");
cy.get(".t--button-tab-markdown").click({ force: true });
cy.get(".t--button-group-markdown").click({ force: true });
setRTEContent(testString);
testCursorPoistion(testStringLen, tinyMceId);
cy.get(".t--button-tab-html").click({ force: true });
cy.get(".t--button-group-html").click({ force: true });
});
it("13. Check if different font size texts are supported inside the RTE widget", function() {

6
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Switch/Switch_spec.js
View File

@ -84,7 +84,7 @@ describe("Switch Widget Functionality", function() {
"left",
);
// align right
cy.get(".t--property-control-alignment .t--button-tab-RIGHT")
cy.get(".t--property-control-alignment .t--button-group-RIGHT")
.first()
.click();
cy.wait(200);
@ -106,7 +106,7 @@ describe("Switch Widget Functionality", function() {
.last()
.click({ force: true });
cy.wait(200);
cy.get(".t--button-tab-Left").click({ force: true });
cy.get(".t--button-group-Left").click({ force: true });
cy.wait(200);
cy.PublishtheApp();
cy.get(publish.switchwidget + " " + ".bp3-align-right").should("exist");
@ -150,7 +150,7 @@ describe("Switch Widget Functionality", function() {
it("11. Switch Functionality To change label style of switch", function() {
cy.openPropertyPane("switchwidget");
cy.moveToStyleTab();
cy.get(".t--property-control-emphasis .t--button-tab-BOLD").click({
cy.get(".t--property-control-emphasis .t--button-group-BOLD").click({
force: true,
});
cy.PublishtheApp();

12
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Image_resize_spec.js
View File

@ -14,17 +14,17 @@ describe("Table Widget Image Resize feature validation", function() {
cy.editColumn("image");
cy.moveToStyleTab();
cy.get(".t--button-tab-MEDIUM").click();
cy.get(".t--button-group-MEDIUM").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "64px");
});
cy.get(".t--button-tab-LARGE").click();
cy.get(".t--button-group-LARGE").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "128px");
});
cy.get(".t--button-tab-DEFAULT").click();
cy.get(".t--button-group-DEFAULT").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "32px");
});
@ -47,17 +47,17 @@ describe("Table Widget Image Resize feature validation", function() {
cy.editColumn("image");
cy.moveToStyleTab();
cy.get(".t--button-tab-MEDIUM").click();
cy.get(".t--button-group-MEDIUM").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "64px");
});
cy.get(".t--button-tab-LARGE").click();
cy.get(".t--button-group-LARGE").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "128px");
});
cy.get(".t--button-tab-DEFAULT").click();
cy.get(".t--button-group-DEFAULT").click();
cy.getTableV2DataSelector("1", "3").then((selector) => {
cy.get(`${selector} img`).should("have.css", "height", "32px");
});

10
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Inline_editing_spec.js
View File

@ -307,26 +307,26 @@ describe("Table widget inline editing functionality", () => {
cy.get(".t--property-control-updatemode .bp3-popover-target")
.last()
.click();
cy.get(".t--button-tab-CUSTOM").click({ force: true });
cy.get(".t--button-group-CUSTOM").click({ force: true });
cy.get("[data-rbd-draggable-id='EditActions1']").should("not.exist");
cy.makeColumnEditable("task");
cy.get("[data-rbd-draggable-id='EditActions1']").should("not.exist");
cy.get(".t--property-control-updatemode .bp3-popover-target")
.last()
.click();
cy.get(".t--button-tab-ROW_LEVEL").click({ force: true });
cy.get(".t--button-group-ROW_LEVEL").click({ force: true });
cy.get("[data-rbd-draggable-id='EditActions1']").should("exist");
cy.get(".t--property-control-updatemode .bp3-popover-target")
.last()
.click();
cy.get(".t--button-tab-CUSTOM").click({ force: true });
cy.get(".t--button-group-CUSTOM").click({ force: true });
cy.get("[data-rbd-draggable-id='EditActions1']").should("not.exist");
cy.makeColumnEditable("step");
cy.makeColumnEditable("task");
cy.get(".t--property-control-updatemode .bp3-popover-target")
.last()
.click();
cy.get(".t--button-tab-ROW_LEVEL").click({ force: true });
cy.get(".t--button-group-ROW_LEVEL").click({ force: true });
cy.get("[data-rbd-draggable-id='EditActions1']").should("not.exist");
});
@ -787,7 +787,7 @@ describe("Table widget inline editing functionality", () => {
cy.openPropertyPane("tablewidgetv2");
cy.makeColumnEditable("step");
cy.get(".t--button-tab-CUSTOM").click({ force: true });
cy.get(".t--button-group-CUSTOM").click({ force: true });
cy.wait(1000);
// case 1: check if updatedRowIndex is 0, when cell at row 0 is updated.

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_GeneralProperty_spec.js
View File

@ -186,7 +186,7 @@ describe("Table Widget property pane feature validation", function() {
cy.get(widgetsPage.rowHeight)
.last()
.click({ force: true });
cy.get(".t--button-tab-SHORT").click({ force: true });
cy.get(".t--button-group-SHORT").click({ force: true });
cy.wait(2000);
cy.PublishtheApp();
cy.readTableV2dataValidateCSS("0", "1", "height", "29px", true);

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_spec.js
View File

@ -195,7 +195,7 @@ describe("Table Widget V2 Functionality", function() {
cy.get(".t--property-pane-back-btn").click();
cy.makeColumnEditable("step");
cy.get(".t--button-tab-ROW_LEVEL").click();
cy.get(".t--button-group-ROW_LEVEL").click();
cy.get(".t--table-filter-columns-dropdown").click();
cy.get(".t--dropdown-option").should("not.contain", "Save / Discard");
});

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/checkboxCell_spec.js
View File

@ -71,7 +71,7 @@ describe("Checkbox column type funtionality test", () => {
.contains("STYLE")
.click({ force: true });
// Check horizontal alignment
cy.get(".t--property-control-horizontalalignment .t--button-tab-CENTER")
cy.get(".t--property-control-horizontalalignment .t--button-group-CENTER")
.first()
.click();
@ -80,7 +80,7 @@ describe("Checkbox column type funtionality test", () => {
});
// Check vertical alignment
cy.get(".t--property-control-verticalalignment .t--button-tab-BOTTOM")
cy.get(".t--property-control-verticalalignment .t--button-group-BOTTOM")
.first()
.click();

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/switchCell_spec.js
View File

@ -71,7 +71,7 @@ describe("Switch column type funtionality test", () => {
.contains("STYLE")
.click({ force: true });
// Check horizontal alignment
cy.get(".t--property-control-horizontalalignment .t--button-tab-CENTER")
cy.get(".t--property-control-horizontalalignment .t--button-group-CENTER")
.first()
.click();
@ -80,7 +80,7 @@ describe("Switch column type funtionality test", () => {
});
// Check vertical alignment
cy.get(".t--property-control-verticalalignment .t--button-tab-BOTTOM")
cy.get(".t--property-control-verticalalignment .t--button-group-BOTTOM")
.first()
.click();

6
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/pagesize_spec.js
View File

@ -11,13 +11,13 @@ describe("Table widget v2", function() {
cy.openPropertyPane("tablewidgetv2");
cy.moveToStyleTab();
cy.get(".t--button-tab-SHORT").click({ force: true });
cy.get(".t--button-group-SHORT").click({ force: true });
cy.get(".t--widget-textwidget .bp3-ui-text").should("contain", "7");
cy.get(".t--button-tab-DEFAULT").click({ force: true });
cy.get(".t--button-group-DEFAULT").click({ force: true });
cy.get(".t--widget-textwidget .bp3-ui-text").should("contain", "5");
cy.get(".t--button-tab-TALL").click({ force: true });
cy.get(".t--button-group-TALL").click({ force: true });
cy.get(".t--widget-textwidget .bp3-ui-text").should("contain", "4");
});
});

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Text/Text_new_feature_spec.js
View File

@ -137,7 +137,7 @@ describe("Text Widget color/font/alignment Functionality", function() {
it("Test to validate enable scroll feature", function() {
cy.moveToContentTab();
cy.get(".t--button-tab-SCROLL").click({ force: true });
cy.get(".t--button-group-SCROLL").click({ force: true });
cy.wait("@updateLayout");
cy.get(commonlocators.headingTextStyle).trigger("mouseover", {
force: true,

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Text/Text_truncate_spec.js
View File

@ -8,7 +8,7 @@ describe("Text Widget Truncate Functionality", function() {
it("Check default overflow property is No overflow", function() {
cy.openPropertyPane("textwidget");
cy.get(".t--button-tab-NONE")
cy.get(".t--button-group-NONE")
.last()
.should("have.attr", "aria-selected", "true");
cy.closePropertyPane();
@ -34,7 +34,7 @@ describe("Text Widget Truncate Functionality", function() {
it("Enable Truncate Text option and Validate", function() {
cy.wait(2000);
cy.get("body").type("{esc}");
cy.get(".t--button-tab-TRUNCATE").click({ force: true });
cy.get(".t--button-group-TRUNCATE").click({ force: true });
cy.wait("@updateLayout");
cy.get(
`.appsmith_widget_${dsl.dsl.children[0].widgetId} .t--widget-textwidget-truncate`,

2
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/WidgetCopyPaste_spec.js
View File

@ -166,4 +166,4 @@ describe("Widget Copy paste", function() {
//verify a pasted list widget
cy.get(widgetsPage.listWidget).should("have.length", 1);
});
});
});

4
app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/OnLoadTests/JSOnLoad_cyclic_dependency_errors_spec.js
View File

@ -40,7 +40,7 @@ describe("Cyclic Dependency Informational Error Messagaes", function() {
.last()
.find(`${datasource.createQuery}`)
.click({ force: true });
//Step5.1: Click the editing field
cy.get(".t--action-name-edit-field").click({ force: true });
@ -170,4 +170,4 @@ describe("Cyclic Dependency Informational Error Messagaes", function() {
1,
);
});
});
});

20
app/client/cypress/locators/Widgets.json
View File

@ -58,7 +58,7 @@
"deleteWidget": ".t--modal-widget>div .t--widget-delete-control",
"textbuttonWidget": ".t--draggable-buttonwidget button.bp3-button[type='button']",
"textInputval": ".t--draggable-textwidget span.t--widget-name",
"textCenterAlign": ".t--property-control-alignment .t--button-tab-CENTER",
"textCenterAlign": ".t--property-control-alignment .t--button-group-CENTER",
"ColumnAction": ".t--property-control-rowbutton button",
"SearchTextChangeAction": ".t--property-control-onsearchtextchanged button",
"tableSearchTextChangeSelected": ".t--property-control-onsearchtextchanged",
@ -86,15 +86,15 @@
"editCreatedColumn": ".t--property-control-createdcolumns input",
"alignOpt": ".t--dropdown-option",
"tableCol": ".draggable-header ",
"centerAlign": ".t--button-tab-CENTER",
"rightAlign": ".t--button-tab-RIGHT",
"leftAlign": ".t--button-tab-LEFT",
"bold": ".t--button-tab-BOLD",
"italics": ".t--button-tab-ITALIC",
"underline": ".t--button-tab-UNDERLINE",
"verticalTop": ".t--button-tab-TOP",
"verticalCenter": ".t--button-tab-CENTER",
"verticalBottom": ".t--button-tab-BOTTOM",
"centerAlign": ".t--button-group-CENTER",
"rightAlign": ".t--button-group-RIGHT",
"leftAlign": ".t--button-group-LEFT",
"bold": ".t--button-group-BOLD",
"italics": ".t--button-group-ITALIC",
"underline": ".t--button-group-UNDERLINE",
"verticalTop": ".t--button-group-TOP",
"verticalCenter": ".t--button-group-CENTER",
"verticalBottom": ".t--button-group-BOTTOM",
"textColor": ".t--property-control-textcolor input",
"boadercolorPicker": ".t--property-control-bordercolour input",
"boxShadowColorPicker": ".t--property-control-shadowcolor input",

8
app/client/cypress/support/commands.js
View File

@ -1673,7 +1673,7 @@ Cypress.Commands.add("checkLabelForWidget", (options) => {
const containerSelector = `${widgetSelector} ${options.containerSelector}`;
const labelPositionSelector = ".t--property-control-position";
const labelAlignmentRightSelector =
".t--property-control-alignment .t--button-tab-right";
".t--property-control-alignment .t--button-group-right";
const labelWidth = options.labelWidth;
// Drag a widget
@ -1690,17 +1690,17 @@ Cypress.Commands.add("checkLabelForWidget", (options) => {
.contains(labelText);
// Set the label position: Auto
cy.get(".t--button-tab-Auto").click({ force: true });
cy.get(".t--button-group-Auto").click({ force: true });
// Assert label position: Auto
cy.get(containerSelector).should("have.css", "flex-direction", "column");
// Change the label position to Top
cy.get(".t--button-tab-Top").click({ force: true });
cy.get(".t--button-group-Top").click({ force: true });
// Assert label position: Top
cy.get(containerSelector).should("have.css", "flex-direction", "column");
// Change the label position to Left
cy.get(".t--button-tab-Left").click({ force: true });
cy.get(".t--button-group-Left").click({ force: true });
// Assert label position: Left
cy.get(containerSelector).should("have.css", "flex-direction", "row");

2
app/client/package.json
View File

@ -46,7 +46,7 @@
"cypress-log-to-output": "^1.1.2",
"dayjs": "^1.10.6",
"deep-diff": "^1.0.2",
"design-system": "npm:@appsmithorg/design-system@1.0.41",
"design-system": "npm:@appsmithorg/design-system@1.0.42",
"downloadjs": "^1.4.7",
"draft-js": "^0.11.7",
"exceljs-lightweight": "^1.14.0",

2
app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx
View File

@ -212,7 +212,7 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
</MethodDetailsWrapper>
<StyledAuthButton
category={
method.isConnected ? Category.primary : Category.tertiary
method.isConnected ? Category.primary : Category.secondary
}
className={`t--settings-sub-category-${
method.needsUpgrade

7
app/client/src/components/propertyControls/BorderRadiusOptionsControl.tsx
View File

@ -1,9 +1,8 @@
import * as React from "react";
import { TooltipComponent } from "design-system";
import { ButtonGroup, TooltipComponent } from "design-system";
import BaseControl, { ControlData, ControlProps } from "./BaseControl";
import { borderRadiusOptions } from "constants/ThemeConstants";
import { ButtonTab } from "design-system";
import {
DSEventDetail,
DSEventTypes,
@ -64,7 +63,7 @@ class BorderRadiusOptionsControl extends BaseControl<
handleAdsEvent = (e: CustomEvent<DSEventDetail>) => {
if (
e.detail.component === "ButtonTab" &&
e.detail.component === "ButtonGroup" &&
e.detail.event === DSEventTypes.KEYPRESS
) {
emitInteractionAnalyticsEvent(this.componentRef.current, {
@ -80,7 +79,7 @@ class BorderRadiusOptionsControl extends BaseControl<
public render() {
return (
<ButtonTab
<ButtonGroup
options={options}
ref={this.componentRef}
selectButton={(value, isUpdatedViaKeyboard = false) => {

7
app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx
View File

@ -1,10 +1,9 @@
import * as React from "react";
import BaseControl, { ControlData, ControlProps } from "./BaseControl";
import { TooltipComponent } from "design-system";
import { ButtonGroup, TooltipComponent } from "design-system";
import { boxShadowOptions } from "constants/ThemeConstants";
import CloseLineIcon from "remixicon-react/CloseLineIcon";
import { ButtonTab } from "design-system";
import {
DSEventDetail,
DSEventTypes,
@ -58,7 +57,7 @@ class BoxShadowOptionsControl extends BaseControl<
handleAdsEvent = (e: CustomEvent<DSEventDetail>) => {
if (
e.detail.component === "ButtonTab" &&
e.detail.component === "ButtonGroup" &&
e.detail.event === DSEventTypes.KEYPRESS
) {
emitInteractionAnalyticsEvent(this.componentRef.current, {
@ -74,7 +73,7 @@ class BoxShadowOptionsControl extends BaseControl<
public render() {
return (
<ButtonTab
<ButtonGroup
options={options}
ref={this.componentRef}
selectButton={(value, isUpdatedViaKeyboard = false) => {

10
app/client/src/components/propertyControls/ButtonTabControl.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import BaseControl, { ControlData, ControlProps } from "./BaseControl";
import { ButtonTab, ButtonTabOption } from "design-system";
import { ButtonGroup, ButtonGroupOption } from "design-system";
import produce from "immer";
import {
DSEventDetail,
@ -28,7 +28,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
handleAdsEvent = (e: CustomEvent<DSEventDetail>) => {
if (
e.detail.component === "ButtonTab" &&
e.detail.component === "ButtonGroup" &&
e.detail.event === DSEventTypes.KEYPRESS
) {
emitInteractionAnalyticsEvent(this.componentRef.current, {
@ -67,7 +67,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
render() {
const { options, propertyValue } = this.props;
return (
<ButtonTab
<ButtonGroup
options={options}
ref={this.componentRef}
selectButton={this.selectButton}
@ -77,7 +77,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
}
static getControlType() {
return "BUTTON_TABS";
return "BUTTON_GROUP";
}
static canDisplayValueInUI(config: ControlData, value: any): boolean {
@ -98,7 +98,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
}
export interface ButtonTabControlProps extends ControlProps {
options: ButtonTabOption[];
options: ButtonGroupOption[];
defaultValue: string;
}

8
app/client/src/components/propertyControls/IconTabControl.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import BaseControl, { ControlData, ControlProps } from "./BaseControl";
import { ButtonTab, ButtonTabOption } from "design-system";
import { ButtonGroup, ButtonGroupOption } from "design-system";
import {
DSEventDetail,
DSEventTypes,
@ -27,7 +27,7 @@ class IconTabControl extends BaseControl<IconTabControlProps> {
handleAdsEvent = (e: CustomEvent<DSEventDetail>) => {
if (
e.detail.component === "ButtonTab" &&
e.detail.component === "ButtonGroup" &&
e.detail.event === DSEventTypes.KEYPRESS
) {
emitInteractionAnalyticsEvent(this.componentRef.current, {
@ -52,7 +52,7 @@ class IconTabControl extends BaseControl<IconTabControlProps> {
render() {
const { fullWidth, options, propertyValue } = this.props;
return (
<ButtonTab
<ButtonGroup
fullWidth={fullWidth}
options={options}
ref={this.componentRef}
@ -78,7 +78,7 @@ class IconTabControl extends BaseControl<IconTabControlProps> {
}
export interface IconTabControlProps extends ControlProps {
options: ButtonTabOption[];
options: ButtonGroupOption[];
defaultValue: string;
fullWidth: boolean;
}

8
app/client/src/components/propertyControls/LabelAlignmentOptionsControl.tsx
View File

@ -3,7 +3,7 @@ import styled from "styled-components";
import { Alignment } from "@blueprintjs/core";
import BaseControl, { ControlProps } from "./BaseControl";
import { ButtonTab, ButtonTabOption } from "design-system";
import { ButtonGroup, ButtonGroupOption } from "design-system";
import {
DSEventDetail,
DSEventTypes,
@ -22,7 +22,7 @@ const ControlContainer = styled.div`
export interface LabelAlignmentOptionsControlProps extends ControlProps {
propertyValue?: Alignment;
options: ButtonTabOption[];
options: ButtonGroupOption[];
defaultValue: Alignment;
}
@ -52,7 +52,7 @@ class LabelAlignmentOptionsControl extends BaseControl<
handleAdsEvent = (e: CustomEvent<DSEventDetail>) => {
if (
e.detail.component === "ButtonTab" &&
e.detail.component === "ButtonGroup" &&
e.detail.event === DSEventTypes.KEYPRESS
) {
emitInteractionAnalyticsEvent(this.componentRef.current, {
@ -70,7 +70,7 @@ class LabelAlignmentOptionsControl extends BaseControl<
const { options, propertyValue } = this.props;
return (
<ControlContainer>
<ButtonTab
<ButtonGroup
options={options}
ref={this.componentRef}
selectButton={this.handleAlign}

2
app/client/src/components/propertyControls/OpenConfigPanelControl.tsx
View File

@ -44,7 +44,7 @@ class OpenConfigPanelControl extends BaseControl<OpenConfigPanelControlProps> {
<Wrapper>
<StyledPropertyPaneButtonWrapper>
<OpenNextPannelButton
category={Category.tertiary}
category={Category.secondary}
className={`t--${widgetName}-open-next-panel-button`}
icon={icon}
iconPosition="right"

2
app/client/src/pages/Applications/ImportApplicationModalOld.tsx
View File

@ -104,7 +104,7 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
</FilePickerWrapper>
<ButtonWrapper>
<ImportButton
// category={ButtonCategory.tertiary}
// category={ButtonCategory.secondary}
cypressSelector={"t--workspace-import-app-button"}
disabled={!appFileToBeUploaded}
isLoading={importingApplication}

2
app/client/src/pages/Editor/DataSourceEditor/SaveOrDiscardDatasourceModal.tsx
View File

@ -56,7 +56,7 @@ function SaveOrDiscardDatasourceModal(props: SaveOrDiscardModalProps) {
<div className="">
<div className="flex items-center justify-end space-x-3">
<Button
category={Category.tertiary}
category={Category.secondary}
className="t--datasource-modal-do-not-save"
onClick={onDiscard}
size={Size.medium}

10
app/client/src/pages/Editor/FirstTimeUserOnboarding/Checklist.tsx
View File

@ -339,7 +339,7 @@ export default function OnboardingChecklist() {
() => ONBOARDING_CHECKLIST_ACTIONS.CONNECT_A_DATASOURCE,
)
? Category.primary
: Category.tertiary
: Category.secondary
}
className="t--checklist-datasource-button"
data-testid="checklist-datasource-button"
@ -389,7 +389,7 @@ export default function OnboardingChecklist() {
suggestedNextAction ===
createMessage(() => ONBOARDING_CHECKLIST_ACTIONS.CREATE_A_QUERY)
? Category.primary
: Category.tertiary
: Category.secondary
}
className="t--checklist-action-button"
data-testid="checklist-action-button"
@ -441,7 +441,7 @@ export default function OnboardingChecklist() {
suggestedNextAction ===
createMessage(() => ONBOARDING_CHECKLIST_ACTIONS.ADD_WIDGETS)
? Category.primary
: Category.tertiary
: Category.secondary
}
className="t--checklist-widget-button"
data-testid="checklist-widget-button"
@ -491,7 +491,7 @@ export default function OnboardingChecklist() {
() => ONBOARDING_CHECKLIST_ACTIONS.CONNECT_DATA_TO_WIDGET,
)
? Category.primary
: Category.tertiary
: Category.secondary
}
className="t--checklist-connection-button"
data-testid="checklist-connection-button"
@ -534,7 +534,7 @@ export default function OnboardingChecklist() {
() => ONBOARDING_CHECKLIST_ACTIONS.DEPLOY_APPLICATIONS,
)
? Category.primary
: Category.tertiary
: Category.secondary
}
className="t--checklist-deploy-button"
data-testid="checklist-deploy-button"

8
app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeBorderRadiusControl.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { AppTheme } from "entities/AppTheming";
import { ButtonTab, TooltipComponent } from "design-system";
import { ButtonGroup, TooltipComponent } from "design-system";
import { invertedBorderRadiusOptions } from "constants/ThemeConstants";
interface ThemeBorderRadiusControlProps {
@ -39,7 +39,7 @@ function ThemeBorderRadiusControl(props: ThemeBorderRadiusControlProps) {
? [invertedBorderRadiusOptions[selectedOption]]
: [];
const buttonTabOptions = Object.keys(options).map((optionKey) => ({
const buttonGroupOptions = Object.keys(options).map((optionKey) => ({
icon: (
<TooltipComponent
content={optionKey}
@ -56,8 +56,8 @@ function ThemeBorderRadiusControl(props: ThemeBorderRadiusControlProps) {
}));
return (
<ButtonTab
options={buttonTabOptions}
<ButtonGroup
options={buttonGroupOptions}
selectButton={onChangeBorder}
values={selectedOptionKey}
/>

10
app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx
View File

@ -1,8 +1,6 @@
import React, { useCallback } from "react";
import { ButtonTab } from "design-system";
import { AppTheme } from "entities/AppTheming";
import { TooltipComponent } from "design-system";
import { ButtonGroup, TooltipComponent } from "design-system";
import CloseLineIcon from "remixicon-react/CloseLineIcon";
import { invertedBoxShadowOptions } from "constants/ThemeConstants";
@ -42,7 +40,7 @@ function ThemeBoxShadowControl(props: ThemeBoxShadowControlProps) {
? [invertedBoxShadowOptions[selectedOption]]
: [];
const buttonTabOptions = Object.keys(options).map((optionKey) => ({
const buttonGroupOptions = Object.keys(options).map((optionKey) => ({
icon: (
<TooltipComponent
content={optionKey}
@ -63,8 +61,8 @@ function ThemeBoxShadowControl(props: ThemeBoxShadowControlProps) {
}));
return (
<ButtonTab
options={buttonTabOptions}
<ButtonGroup
options={buttonGroupOptions}
selectButton={onChangeShadow}
values={selectedOptionKey}
/>

2
app/client/src/widgets/BaseInputWidget/widget/index.tsx
View File

@ -376,7 +376,7 @@ class BaseInputWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/styleConfig.ts
View File

@ -94,7 +94,7 @@ export default [
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
View File

@ -365,7 +365,7 @@ class CheckboxGroupWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/CheckboxWidget/widget/index.tsx
View File

@ -207,7 +207,7 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/DatePickerWidget2/widget/index.tsx
View File

@ -392,7 +392,7 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/DropdownWidget/widget/index.tsx
View File

@ -297,7 +297,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
{
propertyName: "labelStyle",
label: "Label Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/InputWidget/widget/index.tsx
View File

@ -541,7 +541,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
{
propertyName: "labelStyle",
label: "Label Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/JSONFormWidget/widget/propertyConfig/properties/common.ts
View File

@ -366,7 +366,7 @@ const COMMON_PROPERTIES = {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

@ -429,7 +429,7 @@ class MultiSelectTreeWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
View File

@ -327,7 +327,7 @@ class MultiSelectWidget extends BaseWidget<
{
propertyName: "labelStyle",
label: "Label Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

@ -543,7 +543,7 @@ class MultiSelectWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/styleConfig.ts
View File

@ -94,7 +94,7 @@ export default [
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

4
app/client/src/widgets/QRGeneratorWidget/widget/index.tsx
View File

@ -267,7 +267,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
{
propertyName: "fontStyle",
label: "Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",
@ -590,7 +590,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
{
propertyName: "fontStyle",
label: "Emphasis",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/RadioGroupWidget/widget/index.tsx
View File

@ -427,7 +427,7 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/styleConfig.ts
View File

@ -94,7 +94,7 @@ export default [
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/RichTextEditorWidget/widget/index.tsx
View File

@ -288,7 +288,7 @@ class RichTextEditorWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/SelectWidget/widget/index.tsx
View File

@ -468,7 +468,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

@ -400,7 +400,7 @@ class SingleSelectTreeWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/SwitchGroupWidget/widget/index.tsx
View File

@ -310,7 +310,7 @@ class SwitchGroupWidget extends BaseWidget<
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/SwitchWidget/widget/index.tsx
View File

@ -196,7 +196,7 @@ class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
propertyName: "labelStyle",
label: "Emphasis",
helpText: "Control if the label should be bold or italics",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

4
app/client/src/widgets/TableWidget/widget/propertyConfig.ts
View File

@ -662,7 +662,7 @@ export default [
{
propertyName: "fontStyle",
label: "Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",
@ -1693,7 +1693,7 @@ export default [
{
propertyName: "fontStyle",
label: "Font Style",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
updateHook: updateColumnStyles,
dependencies: ["primaryColumns", "derivedColumns"],
options: [

2
app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/TextFormatting.ts
View File

@ -64,7 +64,7 @@ export default {
propertyName: "fontStyle",
label: "Emphasis",
helpText: "Controls the style of the text in the column",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

2
app/client/src/widgets/TableWidgetV2/widget/propertyConfig/styleConfig.ts
View File

@ -72,7 +72,7 @@ export default [
propertyName: "fontStyle",
label: "Emphasis",
helpText: "Controls the style of the text in the column",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
updateHook: updateColumnStyles,
dependencies: ["primaryColumns"],
options: [

2
app/client/src/widgets/TextWidget/widget/index.tsx
View File

@ -313,7 +313,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
propertyName: "fontStyle",
label: "Emphasis",
helpText: "Controls the font emphasis of the text displayed",
controlType: "BUTTON_TABS",
controlType: "BUTTON_GROUP",
options: [
{
icon: "BOLD_FONT",

8
app/client/yarn.lock
View File

@ -6202,10 +6202,10 @@ depd@~1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
"design-system@npm:@appsmithorg/design-system@1.0.41":
version "1.0.41"
resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.41.tgz#983f4ca2f99825842f80fd2b47cbaa14e67ea5c0"
integrity sha512-p99nx2N3pHHDioEH46vlmCyKmQXv3gGh3NGHlqbj3J2XTxReQypkQXcLxrgHC9/9LWvu5jU7ZLedoblSdIghgw==
"design-system@npm:@appsmithorg/design-system@1.0.42":
version "1.0.42"
resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.42.tgz#b3db1d09528a2ccc7c509de39cb78e723015828e"
integrity sha512-BHe9uEHT+sVNwPi4bJ6DP+Wq0QNIi69eEJ6q8dsKmzLXlD4XUJd2hGd6ekKn25f72QvChVmHd/fkvTydnGoiNA==
dependencies:
emoji-mart "3.0.1"