fix: storybook build and small improvements for stories (#39936)
## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14084583856> > Commit: ea22c91b1c823c98e73471752381ce73a36e2061 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14084583856&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity` > Spec: > <hr>Wed, 26 Mar 2025 14:14:38 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - An optional hint display in theme settings provides users with additional guidance when enabled. - The theming interface is now consistently available across all views. - **Bug Fixes** - Revised theme mode detection now accurately differentiates between light and dark modes. - **Style** - Enhanced styling of color scheme controls improves label readability and overall visual consistency. - **Chores** - Updated versioning for several dependencies to fixed versions to ensure consistent behavior. These improvements aim to deliver a more intuitive and reliable user experience. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Valera Melnikov
GitHub
parent
074fe6fd37
commit
e49fb48077
|
|
@ -374,7 +374,7 @@
|
|||
"postcss-normalize": "^10.0.1",
|
||||
"postcss-preset-env": "^7.0.1",
|
||||
"postcss-url": "^10.1.3",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier": "3.2.5",
|
||||
"prop-types": "^15.8.1",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react-is": "^16.12.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { type FunctionComponent } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import {
|
||||
Popover,
|
||||
|
|
@ -14,16 +14,17 @@ import { ControlledPopover as ControlledPopoverExample } from "./ControlledPopov
|
|||
*
|
||||
* Based on the [headless Popover component](/?path=/docs/design-system-headless-popover--docs).
|
||||
*
|
||||
* A popover is a floating element that displays information that requires immediate attention, appearing over the page content and blocking interactions with the page until it is dismissed.
|
||||
* A popover is a floating element that displays information that requires immediate attention, appearing over the page content and blocking interactions with the page until it is
|
||||
* dismissed.
|
||||
*/
|
||||
|
||||
const meta: Meta<typeof Popover> = {
|
||||
component: Popover,
|
||||
title: "WDS/Headless/Popover",
|
||||
subcomponents: {
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverModalContent,
|
||||
PopoverTrigger: PopoverTrigger as FunctionComponent<unknown>,
|
||||
PopoverContent: PopoverContent as FunctionComponent<unknown>,
|
||||
PopoverModalContent: PopoverModalContent as FunctionComponent<unknown>,
|
||||
},
|
||||
render: (args) => (
|
||||
<Popover {...args}>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { type FunctionComponent } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Modal } from "@appsmith/wds";
|
||||
import { ModalHeader, ModalFooter, ModalContent } from "@appsmith/wds";
|
||||
|
|
@ -15,9 +15,9 @@ const meta: Meta<typeof Modal> = {
|
|||
component: Modal,
|
||||
title: "WDS/Widgets/Modal",
|
||||
subcomponents: {
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalContent,
|
||||
ModalHeader: ModalHeader as FunctionComponent<unknown>,
|
||||
ModalFooter: ModalFooter as FunctionComponent<unknown>,
|
||||
ModalContent: ModalContent as FunctionComponent<unknown>,
|
||||
},
|
||||
render: () => <SimpleModal />,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export const ThemingPopup: React.FC<PanelProps> = ({ leftShift, onClose }) => {
|
|||
return (
|
||||
<Wrapper style={{ left: `${leftShift}px` }}>
|
||||
<ThemeSettings
|
||||
isHintVisible
|
||||
isDarkMode={globals.colorMode === "dark"}
|
||||
setDarkMode={(value) =>
|
||||
updateGlobal("colorMode", value ? "dark" : "light")
|
||||
|
|
|
|||
|
|
@ -6,14 +6,5 @@ addons.register("widgets/theming", () => {
|
|||
type: types.TOOL,
|
||||
title: "Theming tool",
|
||||
render: ThemingTool,
|
||||
match: (args) => {
|
||||
const { viewMode, storyId } = args;
|
||||
|
||||
// show the addon only on wds
|
||||
return Boolean(
|
||||
(storyId && storyId?.includes("widgets")) ||
|
||||
storyId?.includes("testing"),
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -42,3 +42,8 @@ body,
|
|||
.docblock-argstable-body td {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
label[for="control-color-scheme"][aria-label="color-scheme"] > span {
|
||||
font-size: 13px !important;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,24 +14,24 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "^1.6.1",
|
||||
"@storybook/addon-a11y": "^8.2.7",
|
||||
"@storybook/addon-controls": "^8.2.7",
|
||||
"@storybook/addon-docs": "^8.2.7",
|
||||
"@storybook/addon-measure": "^8.2.7",
|
||||
"@storybook/addon-outline": "^8.2.7",
|
||||
"@storybook/addon-toolbars": "^8.2.7",
|
||||
"@storybook/addon-viewport": "^8.2.7",
|
||||
"@storybook/blocks": "^8.2.7",
|
||||
"@storybook/components": "^8.2.7",
|
||||
"@storybook/core-events": "^8.3.2",
|
||||
"@storybook/manager-api": "^8.2.7",
|
||||
"@storybook/preset-create-react-app": "^8.2.7",
|
||||
"@storybook/react-vite": "^8.2.7",
|
||||
"@storybook/addon-a11y": "8.2.7",
|
||||
"@storybook/addon-controls": "8.2.7",
|
||||
"@storybook/addon-docs": "8.2.7",
|
||||
"@storybook/addon-measure": "8.2.7",
|
||||
"@storybook/addon-outline": "8.2.7",
|
||||
"@storybook/addon-toolbars": "8.2.7",
|
||||
"@storybook/addon-viewport": "8.2.7",
|
||||
"@storybook/blocks": "8.2.7",
|
||||
"@storybook/components": "8.2.7",
|
||||
"@storybook/core-events": "8.2.7",
|
||||
"@storybook/manager-api": "8.2.7",
|
||||
"@storybook/preset-create-react-app": "8.2.7",
|
||||
"@storybook/react-vite": "8.2.7",
|
||||
"@storybook/test-runner": "^0.19.1",
|
||||
"@storybook/theming": "^8.2.7",
|
||||
"@storybook/theming": "8.2.7",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"chromatic": "^11.3.0",
|
||||
"storybook": "^8.6.4",
|
||||
"storybook": "8.2.7",
|
||||
"vite": "^6.2.1",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const ColorTable = ({
|
|||
const [isDarkMode, setDarkMode] = useState<boolean | undefined>(false);
|
||||
const { theme } = useTheme({
|
||||
seedColor,
|
||||
colorMode: isDarkMode != null ? "dark" : "light",
|
||||
colorMode: Boolean(isDarkMode) ? "dark" : "light",
|
||||
});
|
||||
const { color } = theme;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Form } from "@storybook/components";
|
||||
import React, { useCallback } from "react";
|
||||
import { Flex, Text } from "@appsmith/wds";
|
||||
import { Flex } from "@appsmith/wds";
|
||||
import { ColorControl, BooleanControl, RangeControl } from "@storybook/blocks";
|
||||
import styled from "styled-components";
|
||||
import { debounce } from "lodash";
|
||||
|
|
@ -36,12 +36,14 @@ interface ThemeSettingsProps {
|
|||
setUserDensity?: (value: number) => void;
|
||||
setUserSizing?: (value: number) => void;
|
||||
direction?: "column" | "row";
|
||||
isHintVisible?: boolean;
|
||||
}
|
||||
|
||||
export const ThemeSettings = ({
|
||||
borderRadius,
|
||||
direction = "column",
|
||||
isDarkMode,
|
||||
isHintVisible = false,
|
||||
seedColor,
|
||||
setBorderRadius,
|
||||
setDarkMode,
|
||||
|
|
@ -65,7 +67,7 @@ export const ThemeSettings = ({
|
|||
gap="4px"
|
||||
marginBottom="-8px"
|
||||
>
|
||||
<Text>Dark mode</Text>
|
||||
<small>Dark mode</small>
|
||||
<BooleanControl
|
||||
name="color-scheme"
|
||||
onChange={setDarkMode}
|
||||
|
|
@ -76,7 +78,7 @@ export const ThemeSettings = ({
|
|||
|
||||
{setSeedColor && (
|
||||
<Flex direction="column" gap="4px">
|
||||
<Text>Seed</Text>
|
||||
<small>Seed</small>
|
||||
<ColorControl
|
||||
defaultValue={seedColor}
|
||||
name="seed-color"
|
||||
|
|
@ -88,7 +90,7 @@ export const ThemeSettings = ({
|
|||
|
||||
{setBorderRadius && (
|
||||
<Flex direction="column" gap="4px">
|
||||
<Text>Border Radius</Text>
|
||||
<small>Border Radius</small>
|
||||
<StyledSelect
|
||||
defaultValue={borderRadius}
|
||||
id="border-radius"
|
||||
|
|
@ -105,7 +107,7 @@ export const ThemeSettings = ({
|
|||
|
||||
{setUserDensity && (
|
||||
<Flex direction="column" gap="4px">
|
||||
<Text>Density</Text>
|
||||
<small>Density</small>
|
||||
<RangeControl
|
||||
max={120}
|
||||
min={80}
|
||||
|
|
@ -121,7 +123,7 @@ export const ThemeSettings = ({
|
|||
|
||||
{setUserSizing && (
|
||||
<Flex direction="column" gap="4px">
|
||||
<Text>Sizing</Text>
|
||||
<small>Sizing</small>
|
||||
<RangeControl
|
||||
max={120}
|
||||
min={80}
|
||||
|
|
@ -134,6 +136,13 @@ export const ThemeSettings = ({
|
|||
/>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{isHintVisible && (
|
||||
<small style={{ borderTop: "1px solid #ccc", paddingTop: "10px" }}>
|
||||
This add-on tests WDS widget theming and may impact other stories.
|
||||
Dark mode works correctly only for WDS component pages.
|
||||
</small>
|
||||
)}
|
||||
</Flex>
|
||||
</AddonPanel>
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user