diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts index df1b1b0575d8..6f2bb3ff6e60 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts @@ -67,15 +67,5 @@ describe( anvilSnapshot.matchSnapshotForDeployMode(`AppThemingCorner${corner}`); }); }); - - it("6. Icon Style", () => { - ["Filled", "Outlined"].forEach((iconStyle) => { - anvilSnapshot.setIconStyle(iconStyle); - - anvilSnapshot.matchSnapshotForCanvasMode(`AppThemingIcon${iconStyle}`); - anvilSnapshot.matchSnapshotForPreviewMode(`AppThemingIcon${iconStyle}`); - anvilSnapshot.matchSnapshotForDeployMode(`AppThemingIcon${iconStyle}`); - }); - }); }, ); diff --git a/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts b/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts index a3c06bec87f0..356e16994c36 100644 --- a/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts +++ b/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts @@ -19,7 +19,6 @@ export class AnvilSnapshot { densityOptions: "[data-testid=t--anvil-theme-settings-density] > div", sizingOptions: "[data-testid=t--anvil-theme-settings-sizing] > div", cornersOptions: "[data-testid=t--anvil-theme-settings-corners] > div", - iconStyleOptions: "[data-testid=t--anvil-theme-settings-icon-style] > div", }; /** @@ -163,14 +162,6 @@ export class AnvilSnapshot { }); }; - public setIconStyle = (iconStyle: string) => { - this.updateThemeOption(() => { - cy.get(this.locators.iconStyleOptions) - .contains(iconStyle) - .click({ force: true }); - }); - }; - public updateThemeOption = (callback: () => void) => { this.appSettings.OpenAppSettings(); this.appSettings.GoToThemeSettings(); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 27840f4cf483..7cee09699342 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -10,7 +10,7 @@ import { } from "./"; import type { ColorMode } from "../../color"; -import type { TokenSource, IconStyle } from "../../token"; +import type { TokenSource } from "../../token"; const tokensAccessor = new TokensAccessor({ ...(defaultTokens as TokenSource), @@ -22,14 +22,12 @@ export interface UseThemeProps { borderRadius?: string; userDensity?: number; userSizing?: number; - iconStyle?: IconStyle; } export function useTheme(props: UseThemeProps = {}) { const { borderRadius, colorMode = "light", - iconStyle = "outlined", seedColor, userDensity = 1, userSizing = 1, @@ -88,9 +86,6 @@ export function useTheme(props: UseThemeProps = {}) { tokensAccessor.updateOuterSpacing(outerSpacing); tokensAccessor.updateInnerSpacing(innerSpacing); - // Icon style - tokensAccessor.updateIconStyle(iconStyle); - // Icon size if (iconSize != null) { tokensAccessor.updateIconSize(iconSize); @@ -110,7 +105,6 @@ export function useTheme(props: UseThemeProps = {}) { ...tokensAccessor.getSizing(), ...tokensAccessor.getOuterSpacing(), ...tokensAccessor.getInnerSpacing(), - iconStyle: tokensAccessor.getIconStyle(), ...tokensAccessor.getIconSize(), ...tokensAccessor.getStrokeWidth(), }; @@ -122,7 +116,6 @@ export function useTheme(props: UseThemeProps = {}) { sizing, outerSpacing, innerSpacing, - iconStyle, iconSize, strokeWidth, ]); diff --git a/app/client/packages/design-system/theming/src/theme/src/types.ts b/app/client/packages/design-system/theming/src/theme/src/types.ts index d4972b616737..f2972c47453b 100644 --- a/app/client/packages/design-system/theming/src/theme/src/types.ts +++ b/app/client/packages/design-system/theming/src/theme/src/types.ts @@ -2,12 +2,11 @@ import type { ReactNode } from "react"; import type { CSSProperties } from "react"; import type { ColorMode } from "../../color"; -import type { Typography, ThemeToken, IconStyle } from "../../token"; +import type { Typography, ThemeToken } from "../../token"; export type Theme = ThemeToken & { typography?: Typography; colorMode?: ColorMode; - iconStyle?: IconStyle; }; export interface ThemeProviderProps { diff --git a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts index da53c0a5b7cf..05c3bcbfb310 100644 --- a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts +++ b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts @@ -8,7 +8,6 @@ import type { TokenSource, TokenType, Typography, - IconStyle, } from "./types"; export class TokensAccessor { @@ -23,7 +22,6 @@ export class TokensAccessor { private innerSpacing?: TokenObj; private sizing?: TokenObj; private zIndex?: TokenObj; - private iconStyle?: IconStyle; private strokeWidth?: TokenObj; private iconSize?: TokenObj; @@ -33,7 +31,6 @@ export class TokensAccessor { boxShadow, colorMode, iconSize, - iconStyle, innerSpacing, opacity, outerSpacing, @@ -54,7 +51,6 @@ export class TokensAccessor { this.innerSpacing = innerSpacing; this.typography = typography; this.zIndex = zIndex; - this.iconStyle = iconStyle; this.strokeWidth = strokeWidth; this.iconSize = iconSize; } @@ -112,10 +108,6 @@ export class TokensAccessor { this.sizing = sizing; }; - updateIconStyle = (iconStyle: IconStyle) => { - this.iconStyle = iconStyle; - }; - updateStrokeWidth = (strokeWidth: TokenObj) => { this.strokeWidth = strokeWidth; }; @@ -139,7 +131,6 @@ export class TokensAccessor { ...this.getStrokeWidth(), ...this.getIconSize(), colorMode: this.getColorMode(), - iconStyle: this.getIconStyle(), }; }; @@ -224,10 +215,6 @@ export class TokensAccessor { return this.colorMode; }; - getIconStyle = () => { - return this.iconStyle; - }; - getStrokeWidth = () => { if (this.strokeWidth == null) return {} as ThemeToken; diff --git a/app/client/packages/design-system/theming/src/token/src/types.ts b/app/client/packages/design-system/theming/src/token/src/types.ts index 262e54218cdb..5a457153f690 100644 --- a/app/client/packages/design-system/theming/src/token/src/types.ts +++ b/app/client/packages/design-system/theming/src/token/src/types.ts @@ -34,7 +34,6 @@ export interface TokenSource { sizing?: TokenObj; outerSpacing?: TokenObj; innerSpacing?: TokenObj; - iconStyle?: IconStyle; strokeWidth?: TokenObj; iconSize?: TokenObj; } @@ -106,8 +105,6 @@ export type Typography = { [key in keyof typeof TYPOGRAPHY_VARIANTS]: TypographyVariantMetric; }; -export type IconStyle = "outlined" | "filled"; - export const APP_MAX_WIDTH = { Unlimited: "UNLIMITED", Large: "LARGE", diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx index ef7276806bdd..9dbcb8efb551 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx @@ -1,6 +1,5 @@ import type { Component, Ref } from "react"; import React, { Suspense, forwardRef, lazy, useMemo } from "react"; -import { useThemeContext } from "@appsmith/wds-theming"; import { ICONS } from "./icons"; import styles from "./styles.module.css"; @@ -8,25 +7,13 @@ import type { IconProps } from "./types"; import { FallbackIcon } from "./FallbackIcon"; const _Icon = (props: IconProps, ref: Ref) => { - const { color, filled: filledProp, name, size = "medium", ...rest } = props; - const theme = useThemeContext(); - const filled = theme.iconStyle === "filled" || filledProp; + const { color, name, size = "medium", ...rest } = props; const Icon = useMemo(() => { const pascalName = ICONS[name]; return lazy(async () => import("@tabler/icons-react").then((module) => { - if (Boolean(filled)) { - const filledVariant = `${pascalName}Filled`; - - if (filledVariant in module) { - return { - default: module[filledVariant] as React.ComponentType, - }; - } - } - if (pascalName in module) { return { default: module[pascalName] as React.ComponentType, @@ -36,7 +23,7 @@ const _Icon = (props: IconProps, ref: Ref) => { return { default: FallbackIcon }; }), ); - }, [name, filled]); + }, [name]); return ( ( - - - - - ), -}; - export const AllIcons: Story = { render: () => (
name !== "createReactComponent") - .filter((name) => !name.endsWith("Filled")) .map((name) => { content += `\n "${kebabCase(name).replace("icon-", "")}": "${name}",`; }); diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts index 8af037a86a97..25bda3ec55eb 100644 --- a/app/client/src/constants/AppConstants.ts +++ b/app/client/src/constants/AppConstants.ts @@ -89,7 +89,6 @@ export interface ThemeSetting { density: number; sizing: number; fontFamily: string; - iconStyle: "FILLED" | "OUTLINED"; appMaxWidth: AppMaxWidth; } @@ -129,7 +128,6 @@ export const defaultThemeSetting: ThemeSetting = { borderRadius: "6px", density: 1, sizing: 1, - iconStyle: "OUTLINED", appMaxWidth: APP_MAX_WIDTH.Large, }; diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 249a0f84ae70..93c87a3e8353 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -49,8 +49,6 @@ import { widgetInitialisationSuccess } from "../../actions/widgetActions"; import { ThemeProvider as WDSThemeProvider, useTheme, - type ColorMode, - type IconStyle, } from "@appsmith/wds-theming"; import { KBViewerFloatingButton } from "ee/pages/AppViewer/KnowledgeBase/KBViewerFloatingButton"; import urlBuilder from "ee/entities/URLRedirect/URLAssembly"; @@ -114,11 +112,10 @@ function AppViewer(props: Props) { const wdsThemeProps = { borderRadius: themeSetting.borderRadius, seedColor: themeSetting.accentColor, - colorMode: themeSetting.colorMode.toLowerCase() as ColorMode, + colorMode: themeSetting.colorMode.toLowerCase(), userSizing: themeSetting.sizing, userDensity: themeSetting.density, - iconStyle: themeSetting.iconStyle.toLowerCase() as IconStyle, - }; + } as Parameters[0]; const { theme } = useTheme(isAnvilLayout ? wdsThemeProps : {}); const focusRef = useWidgetFocus(); diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index eff0d078ea77..2a25d73b1d5d 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -58,7 +58,6 @@ const Canvas = (props: CanvasProps) => { colorMode: themeSetting.colorMode.toLowerCase(), userSizing: themeSetting.sizing, userDensity: themeSetting.density, - iconStyle: themeSetting.iconStyle.toLowerCase(), } as Parameters[0]; // in case of non-WDS theme, we will pass an empty object to useTheme hook // so that fixedLayout theme does not break because of calculations done in useTheme diff --git a/app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts b/app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts index 87947c97ddaa..06da8ef2964b 100644 --- a/app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts +++ b/app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts @@ -45,11 +45,6 @@ export const THEME_SETTINGS_BORDER_RADIUS_OPTIONS = [ { label: "Pill", value: "20px" }, ]; -export const THEME_SETTINGS_ICON_STYLE_OPTIONS = [ - { label: "Filled", value: "FILLED" }, - { label: "Outlined", value: "OUTLINED" }, -]; - export const THEME_SETTING_COLOR_PRESETS = { LIGHT: ["#0080ff", "#6b35ff", "#d54137", "#f09326", "#02925c"], DARK: ["#0080ff", "#5b02ea", "#c12c26", "#e98b11", "#03854e"], diff --git a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx index 729ea98b417d..6143acb5a1b7 100644 --- a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx +++ b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx @@ -19,7 +19,6 @@ import styles from "./styles.module.css"; import { THEME_SETTINGS_BORDER_RADIUS_OPTIONS, THEME_SETTINGS_DENSITY_OPTIONS, - THEME_SETTINGS_ICON_STYLE_OPTIONS, THEME_SETTINGS_SIZING_OPTIONS, THEME_SETTINGS_COLOR_MODE_OPTIONS, THEME_SETTING_COLOR_PRESETS, @@ -236,29 +235,6 @@ function WDSThemePropertyPane() { - {/* Icon Style */} - -
- Icon Style - { - updateTheme({ - ...theme, - iconStyle: value as ThemeSetting["iconStyle"], - }); - }} - options={THEME_SETTINGS_ICON_STYLE_OPTIONS} - value={theme.iconStyle} - /> -
- - {/* Layout Style */}