diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 23a6a959c2063c..bd24be1e75a38e 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -9,6 +9,7 @@ ### Bug Fixes - DataViews: Fix `compact` density clipping and remove top/bottom padding. [#77054](https://github.com/WordPress/gutenberg/pull/77054) +- DataForm: Remove `text-transform` from `panel` field labels. [#77196](https://github.com/WordPress/gutenberg/pull/77196) ## 14.0.0 (2026-04-01) diff --git a/packages/dataviews/src/components/dataform-layouts/panel/style.scss b/packages/dataviews/src/components/dataform-layouts/panel/style.scss index 819bc4b9580677..4f53971e01a49c 100644 --- a/packages/dataviews/src/components/dataform-layouts/panel/style.scss +++ b/packages/dataviews/src/components/dataform-layouts/panel/style.scss @@ -92,7 +92,6 @@ line-height: $grid-unit-05 * 5; hyphens: auto; color: $gray-700; - text-transform: capitalize; .components-base-control__label { display: inline; diff --git a/packages/dataviews/src/dataform/stories/content.story.tsx b/packages/dataviews/src/dataform/stories/content.story.tsx index 53ca37a304a2b5..d819856590b54b 100644 --- a/packages/dataviews/src/dataform/stories/content.story.tsx +++ b/packages/dataviews/src/dataform/stories/content.story.tsx @@ -297,7 +297,7 @@ export const HighLevelHelpText: Story = { fields: [ { id: 'accountForm', - label: 'Account Information', + label: 'Account information', description: 'We collect this information to create your account and provide personalized services. Your data will be kept secure and used only for account management and service improvements.', children: [ 'name', 'email', 'phone' ], diff --git a/packages/dataviews/src/dataform/stories/data-adapter.tsx b/packages/dataviews/src/dataform/stories/data-adapter.tsx index 7e1c054ddc46af..f8455ac9e2686b 100644 --- a/packages/dataviews/src/dataform/stories/data-adapter.tsx +++ b/packages/dataviews/src/dataform/stories/data-adapter.tsx @@ -54,17 +54,17 @@ const DataAdapterComponent = () => { // for nested data based on the field id. { id: 'user.profile.name', - label: 'User Name', + label: 'User name', type: 'text', }, { id: 'user.profile.email', - label: 'User Email', + label: 'User email', type: 'email', }, { id: 'user.profile.tags', - label: 'User Tags', + label: 'User tags', type: 'array', placeholder: 'Enter comma-separated tags', description: @@ -101,13 +101,13 @@ const DataAdapterComponent = () => { // Example of deriving data by leveraging setValue method. { id: 'revenue.total', - label: 'Total Revenue', + label: 'Total revenue', type: 'integer', readOnly: true, }, { id: 'revenue.pricePerUnit', - label: 'Price Per Unit', + label: 'Price per unit', type: 'integer', setValue: ( { item, value } ) => ( { revenue: { @@ -174,7 +174,7 @@ const DataAdapterComponent = () => { fields: [ { id: 'userProfile', - label: 'User Profile', + label: 'User profile', children: [ 'user.profile.name', 'user.profile.email', diff --git a/packages/dataviews/src/dataform/stories/layout-card.tsx b/packages/dataviews/src/dataform/stories/layout-card.tsx index 84ac9c79a84f6a..5fb07a62c77647 100644 --- a/packages/dataviews/src/dataform/stories/layout-card.tsx +++ b/packages/dataviews/src/dataform/stories/layout-card.tsx @@ -44,7 +44,7 @@ const LayoutCardComponent = ( { const customerFields: Field< Customer >[] = [ { id: 'name', - label: 'Customer Name', + label: 'Customer name', type: 'text', }, { @@ -70,17 +70,17 @@ const LayoutCardComponent = ( { }, { id: 'shippingAddress', - label: 'Shipping Address', + label: 'Shipping address', type: 'text', }, { id: 'billingAddress', - label: 'Billing Address', + label: 'Billing address', type: 'text', }, { id: 'displayPayments', - label: 'Display Payments?', + label: 'Display payments?', type: 'boolean', }, { @@ -112,7 +112,7 @@ const LayoutCardComponent = ( { }, { id: 'dueDate', - label: 'Due Date', + label: 'Due date', type: 'text', render: ( { item } ) => { return Due on: { item.dueDate }; diff --git a/packages/dataviews/src/dataform/stories/layout-details.tsx b/packages/dataviews/src/dataform/stories/layout-details.tsx index dbcf1e9884049f..cbda9af67b53d0 100644 --- a/packages/dataviews/src/dataform/stories/layout-details.tsx +++ b/packages/dataviews/src/dataform/stories/layout-details.tsx @@ -123,7 +123,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'filesize', - label: 'File Size', + label: 'File size', type: 'integer', readOnly: true, }, @@ -170,7 +170,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'longDescription', - label: 'Long Description', + label: 'Long description', type: 'text', Edit: { control: 'textarea', @@ -179,7 +179,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'comment_status', - label: 'Comment Status', + label: 'Comment status', type: 'text', Edit: 'radio', elements: [ @@ -189,7 +189,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'ping_status', - label: 'Allow Pings/Trackbacks', + label: 'Allow pings/trackbacks', type: 'boolean', }, { @@ -223,7 +223,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'flight_status', - label: 'Flight Status', + label: 'Flight status', type: 'text', Edit: 'radio', elements: [ diff --git a/packages/dataviews/src/dataform/stories/layout-panel.tsx b/packages/dataviews/src/dataform/stories/layout-panel.tsx index e826257cbf394d..657493ab27d3ea 100644 --- a/packages/dataviews/src/dataform/stories/layout-panel.tsx +++ b/packages/dataviews/src/dataform/stories/layout-panel.tsx @@ -133,7 +133,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'filesize', - label: 'File Size', + label: 'File size', type: 'integer', readOnly: true, }, @@ -180,7 +180,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'longDescription', - label: 'Long Description', + label: 'Long description', type: 'text', Edit: { control: 'textarea', @@ -189,7 +189,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'comment_status', - label: 'Comment Status', + label: 'Comment status', type: 'text', Edit: 'radio', elements: [ @@ -199,7 +199,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'ping_status', - label: 'Allow Pings/Trackbacks', + label: 'Allow pings/trackbacks', type: 'boolean', }, { @@ -233,7 +233,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'flight_status', - label: 'Flight Status', + label: 'Flight status', type: 'text', Edit: 'radio', elements: [ @@ -360,7 +360,7 @@ const LayoutPanelComponent = ( { 'title', { id: 'status', - label: 'Status & Visibility', + label: 'Status & visibility', children: [ 'status', 'password' ], }, 'order', @@ -375,12 +375,12 @@ const LayoutPanelComponent = ( { }, { id: 'address1', - label: 'Combined Address', + label: 'Combined address', children: [ 'address1', 'address2', 'city' ], }, { id: 'flight_info', - label: 'Flight Information', + label: 'Flight information', children: [ 'origin', 'destination', @@ -396,7 +396,7 @@ const LayoutPanelComponent = ( { }, { id: 'passenger_details', - label: 'Passenger Details', + label: 'Passenger details', children: [ 'author', 'seat' ], layout: getPanelLayoutFromStoryArgs( { summary: [ 'author', 'seat' ], diff --git a/packages/dataviews/src/dataform/stories/layout-regular.tsx b/packages/dataviews/src/dataform/stories/layout-regular.tsx index 10517bd55a29e7..da68ab71ef9fbc 100644 --- a/packages/dataviews/src/dataform/stories/layout-regular.tsx +++ b/packages/dataviews/src/dataform/stories/layout-regular.tsx @@ -130,7 +130,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'filesize', - label: 'File Size', + label: 'File size', type: 'integer', readOnly: true, }, @@ -177,7 +177,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'longDescription', - label: 'Long Description', + label: 'Long description', type: 'text', Edit: { control: 'textarea', @@ -186,7 +186,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'comment_status', - label: 'Comment Status', + label: 'Comment status', type: 'text', Edit: 'radio', elements: [ @@ -196,7 +196,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'ping_status', - label: 'Allow Pings/Trackbacks', + label: 'Allow pings/trackbacks', type: 'boolean', }, { @@ -230,7 +230,7 @@ const fields: Field< SamplePost >[] = [ }, { id: 'flight_status', - label: 'Flight Status', + label: 'Flight status', type: 'text', Edit: 'radio', elements: [ diff --git a/packages/dataviews/src/dataform/stories/layout-row.tsx b/packages/dataviews/src/dataform/stories/layout-row.tsx index 3f07e557744daf..91716b5fd5b757 100644 --- a/packages/dataviews/src/dataform/stories/layout-row.tsx +++ b/packages/dataviews/src/dataform/stories/layout-row.tsx @@ -42,7 +42,7 @@ const LayoutRowComponent = ( { const customerFields: Field< Customer >[] = [ { id: 'name', - label: 'Customer Name', + label: 'Customer name', type: 'text', }, { @@ -57,37 +57,37 @@ const LayoutRowComponent = ( { }, { id: 'shippingAddress', - label: 'Shipping Address', + label: 'Shipping address', type: 'text', }, { id: 'shippingCity', - label: 'Shipping City', + label: 'Shipping city', type: 'text', }, { id: 'shippingPostalCode', - label: 'Shipping Postal Code', + label: 'Shipping postal code', type: 'text', }, { id: 'shippingCountry', - label: 'Shipping Country', + label: 'Shipping country', type: 'text', }, { id: 'billingAddress', - label: 'Billing Address', + label: 'Billing address', type: 'text', }, { id: 'billingCity', - label: 'Billing City', + label: 'Billing city', type: 'text', }, { id: 'billingPostalCode', - label: 'Billing Postal Code', + label: 'Billing postal code', type: 'text', }, { @@ -102,7 +102,7 @@ const LayoutRowComponent = ( { }, { id: 'hasDiscount', - label: 'Has Discount?', + label: 'Has discount?', type: 'boolean', }, { diff --git a/packages/dataviews/src/dataform/stories/validation.tsx b/packages/dataviews/src/dataform/stories/validation.tsx index d131d7f48e55c4..edeb445af3ba2b 100644 --- a/packages/dataviews/src/dataform/stories/validation.tsx +++ b/packages/dataviews/src/dataform/stories/validation.tsx @@ -739,7 +739,7 @@ const ValidationComponent = ( { }, { id: 'customEdit', - label: 'Custom Control', + label: 'Custom control', Edit: CustomEditControl, isValid: { required, @@ -783,7 +783,7 @@ const ValidationComponent = ( { { id: 'toggleGroup', type: 'text', - label: 'Toggle Group', + label: 'Toggle group', Edit: 'toggleGroup', elements: elements === 'async' @@ -858,7 +858,7 @@ const ValidationComponent = ( { { id: 'dateRange', type: 'date', - label: 'Date Range', + label: 'Date range', Edit: DateRangeEdit, isValid: { required, @@ -869,7 +869,7 @@ const ValidationComponent = ( { { id: 'datetime', type: 'datetime', - label: 'Date Time', + label: 'Date time', isValid: { required, elements: elements !== 'none' ? true : false, @@ -947,34 +947,34 @@ const ValidationComponent = ( { const groupedFields = [ { id: 'textFields', - label: 'Text Fields', + label: 'Text fields', children: [ 'text', 'textarea', 'password', 'customEdit' ], }, { id: 'numberFields', - label: 'Number Fields', + label: 'Number fields', children: [ 'integer', 'number' ], }, { id: 'contactFields', - label: 'Contact Fields', + label: 'Contact fields', children: [ 'email', 'telephone', 'url' ], }, { id: 'selectFields', - label: 'Selection Fields', + label: 'Selection fields', children: [ 'select', 'combobox', 'textWithRadio' ], }, { id: 'booleanFields', - label: 'Boolean Fields', + label: 'Boolean fields', children: [ 'boolean', 'toggle', 'toggleGroup' ], }, { id: 'color' }, { id: 'array' }, { id: 'dateFields', - label: 'Date Fields', + label: 'Date fields', children: [ 'date', 'dateRange', 'datetime' ], }, ];