From 37a06bd005612adb558b3945f81e989114f90950 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 30 Dec 2024 18:13:06 +0900 Subject: [PATCH 1/3] Upgrade sass to version 1.54.0 (#68380) * Upgrade sass to version 1.54.0 * scripts:update changelog Co-authored-by: t-hamano Co-authored-by: sirreal --- package-lock.json | 10 +++++----- package.json | 2 +- packages/scripts/CHANGELOG.md | 1 + packages/scripts/package.json | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 057ccb17acc0b9..06e8c147a3e0e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -145,7 +145,7 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", "rtlcss": "4.3.0", - "sass": "1.50.1", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", @@ -41552,9 +41552,9 @@ } }, "node_modules/sass": { - "version": "1.50.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz", - "integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==", + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz", + "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==", "license": "MIT", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -52361,7 +52361,7 @@ "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", "rtlcss": "^4.3.0", - "sass": "^1.50.1", + "sass": "^1.54.0", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", diff --git a/package.json b/package.json index 21b15a5fcc9ced..8d90f3cbda43fd 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", "rtlcss": "4.3.0", - "sass": "1.50.1", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index b088d1ecb65ab9..60acec7de6461e 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,6 +5,7 @@ ### Internal - The bundled `rtlcss-webpack-plugin` dependency has been replaced with a modified fork of the plugin to fix issues with the original package ([#68201](https://github.com/WordPress/gutenberg/pull/68201)). +- The bundled `sass` dependency has been updated from `^1.50.0` to `^1.54.0` ([#68380](https://github.com/WordPress/gutenberg/pull/68380)). ## 30.7.0 (2024-12-11) diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 168671d4cdf110..e6f9cf39335a78 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -81,7 +81,7 @@ "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", "rtlcss": "^4.3.0", - "sass": "^1.50.1", + "sass": "^1.54.0", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", From a28455cc8ed7e652b7f1bec86822674c49a2c088 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 15:49:32 +0530 Subject: [PATCH 2/3] Storybook: Add BorderRadiusControl story (#67383) * Storybook: Add BorderRadiusControl story * Update BorderRadiusControl story to CSF 3 * Update BorderRadiusControl story to enhance argTypes documentation * Add README for BorderRadiusControl component * Update BorderRadiusControl README with correct prop requirements and defaults * Update BorderRadiusControl README and Story * Remove Unnecessary file * Update README Co-authored-by: Sukhendu2002 Co-authored-by: t-hamano --- .../border-radius-control/README.md | 59 +++++++++++++++++++ .../stories/index.story.js | 58 ++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 packages/block-editor/src/components/border-radius-control/README.md create mode 100644 packages/block-editor/src/components/border-radius-control/stories/index.story.js diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md new file mode 100644 index 00000000000000..7b048dfdb7e0d2 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -0,0 +1,59 @@ +# BorderRadiusControl + +`BorderRadiusControl` is a React component that provides a user interface for managing border radius values. It allows users to control the border radius of each corner independently or link them together for uniform values. + +## Usage + +```jsx +/** + * WordPress dependencies + */ +import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; +import { useState } from '@wordpress/element'; + +const MyBorderRadiusControl = () => { + const [values, setValues] = useState({ + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }); + + return ( + + ); +}; +``` + +## Props + +### values + +An object containing the border radius values for each corner. + +- **Type:** `Object` +- **Required:** No +- **Default:** `undefined` + +The values object has the following schema: + +| Property | Description | Type | +| ----------- | ------------------------------------ | ------ | +| topLeft | Border radius for top left corner | string | +| topRight | Border radius for top right corner | string | +| bottomLeft | Border radius for bottom left corner | string | +| bottomRight | Border radius for bottom right corner| string | + +Each value should be a valid CSS border radius value (e.g., '10px', '1em'). + +### onChange + +Callback function that is called when any border radius value changes. + +- **Type:** `Function` +- **Required:** Yes + +The function receives the updated values object as its argument. \ No newline at end of file diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js new file mode 100644 index 00000000000000..28844a5e5cace1 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BorderRadiusControl from '../'; + +const meta = { + title: 'BlockEditor/BorderRadiusControl', + component: BorderRadiusControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: 'Control to display border radius options.', + }, + }, + }, + argTypes: { + values: { + control: 'object', + description: 'Border radius values.', + table: { + type: { summary: 'object' }, + }, + }, + onChange: { + action: 'onChange', + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Callback to handle onChange.', + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ values, setValues ] = useState( args.values ); + + return ( + { + setValues( ...changeArgs ); + onChange( ...changeArgs ); + } } + /> + ); + }, +}; From 4b847f9c0f550045c53e9630da398622283cee08 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Mon, 30 Dec 2024 20:12:18 +0530 Subject: [PATCH 3/3] Components: Fixing Text Contrast for Dark Mode (#68349) * fix: Fix darkmode label for text component * fix: darkmode for heading component * Fix snapshot tests * Fix Text test * CHANGELOG --------- Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Co-authored-by: im3dabasia Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 2 ++ .../test/__snapshots__/index.test.js.snap | 8 ++++---- packages/components/src/heading/hook.ts | 2 +- .../src/heading/test/__snapshots__/index.tsx.snap | 8 ++++---- packages/components/src/text/hook.ts | 4 ++-- packages/components/src/text/styles.ts | 2 +- .../components/src/text/test/__snapshots__/index.tsx.snap | 6 +++--- packages/components/src/text/test/index.tsx | 2 +- 8 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8853f4c94e689b..b12121bd3e189f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,8 @@ - `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)). - `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)). +- `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). +- `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). ### Deprecations diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index fd6cc2df3fcde7..b1adfd5d9221ab 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -63,7 +63,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -345,7 +345,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -637,7 +637,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index d242afe1fdb2f5..132595d69c4f76 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -14,7 +14,7 @@ export function useHeading( const { as: asProp, level = 2, - color = COLORS.gray[ 900 ], + color = COLORS.theme.foreground, isBlock = true, weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ], ...otherProps diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap index cf863c4b2bb2ef..675810948404fe 100644 --- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap @@ -2,12 +2,12 @@ exports[`props should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; text-wrap: pretty; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); font-size: calc(1.95 * 13px); font-weight: 600; display: block; @@ -30,7 +30,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", @@ -49,7 +49,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index a447b2ce5133be..243b00202460eb 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -105,8 +105,8 @@ export default function useText( getOptimalTextShade( optimizeReadabilityFor ) === 'dark'; sx.optimalTextColor = isOptimalTextColorDark - ? css( { color: COLORS.gray[ 900 ] } ) - : css( { color: COLORS.white } ); + ? css( { color: COLORS.theme.foreground } ) + : css( { color: COLORS.theme.foregroundInverted } ); } return cx( diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts index e777ed4f0941de..7d3b70e2ab2390 100644 --- a/packages/components/src/text/styles.ts +++ b/packages/components/src/text/styles.ts @@ -9,7 +9,7 @@ import { css } from '@emotion/react'; import { COLORS, CONFIG } from '../utils'; export const Text = css` - color: ${ COLORS.gray[ 900 ] }; + color: ${ COLORS.theme.foreground }; line-height: ${ CONFIG.fontLineHeightBase }; margin: 0; text-wrap: balance; /* Fallback for Safari. */ diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index 1b98c0853ac549..caa876cb24dc78 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -6,7 +6,7 @@ Snapshot Diff: + Base styles @@ -3,8 +3,9 @@ - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "font-size": "calc((13 / 13) * 13px)", "font-weight": "normal", "line-height": "1.4", @@ -19,7 +19,7 @@ Snapshot Diff: exports[`Text should render highlighted words with highlightCaseSensitive 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -52,7 +52,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = exports[`Text snapshot tests should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx index 5fad5582f4d46e..e6f6423b6b572d 100644 --- a/packages/components/src/text/test/index.tsx +++ b/packages/components/src/text/test/index.tsx @@ -25,7 +25,7 @@ describe( 'Text', () => { ); expect( screen.getByRole( 'heading' ) ).toHaveStyle( { - color: COLORS.white, + color: 'rgb( 255, 255, 255 )', } ); } );