From 667d6b9bb609b8330f8e4d7abdeb6e881c2fddd1 Mon Sep 17 00:00:00 2001 From: Mia Zbikowski Date: Tue, 9 Dec 2025 16:57:03 -0500 Subject: [PATCH] Remove style settings as valid setting types --- schemas/theme/setting.json | 121 ---------- .../fixtures/theme-settings-all-settings.json | 69 ------ tests/test-constants.ts | 3 - tests/theme-settings/styles.spec.ts | 218 ------------------ 4 files changed, 411 deletions(-) delete mode 100644 tests/theme-settings/styles.spec.ts diff --git a/schemas/theme/setting.json b/schemas/theme/setting.json index 0e2c137..bacad44 100644 --- a/schemas/theme/setting.json +++ b/schemas/theme/setting.json @@ -33,9 +33,6 @@ "range", "richtext", "select", - "style.layout_panel", - "style.size_panel", - "style.spacing_panel", "text", "text_alignment", "textarea", @@ -156,18 +153,6 @@ "if": { "required": ["type"], "properties": { "type": { "const": "select" } } }, "then": { "$ref": "#/definitions/select" } }, - { - "if": { "required": ["type"], "properties": { "type": { "const": "style.layout_panel" } } }, - "then": { "$ref": "#/definitions/style.layout_panel" } - }, - { - "if": { "required": ["type"], "properties": { "type": { "const": "style.size_panel" } } }, - "then": { "$ref": "#/definitions/style.size_panel" } - }, - { - "if": { "required": ["type"], "properties": { "type": { "const": "style.spacing_panel" } } }, - "then": { "$ref": "#/definitions/style.spacing_panel" } - }, { "if": { "required": ["type"], "properties": { "type": { "const": "text" } } }, "then": { "$ref": "#/definitions/text" } @@ -853,112 +838,6 @@ "type": "string", "pattern": "^-?[0-9]+$" }, - - "style.layout_panel": { - "allOf": [ - { "$ref": "#/definitions/inputSettingsStandardAttributes" }, - { "$ref": "#/definitions/conditionalSetting" } - ], - "properties": { - "type": { - "const": "style.layout_panel", - "description": "A setting of type style.layout_panel outputs style settings for layout.", - "markdownDescription": "A setting of type `style.layout_panel` outputs style settings for layout.\n\n---\n\n[Shopify reference](https://shopify.dev/docs/themes/architecture/settings/input-settings#style.layout_panel)" - }, - "default": { - "allOf": [ - { - "$ref": "#/definitions/style.flex_layout_properties" - } - ], - "properties": { - "@media (--mobile)": { - "type": "object", - "description": "Style settings for the mobile breakpoint", - "$ref": "#/definitions/style.flex_layout_properties", - "unevaluatedProperties": false - } - }, - "unevaluatedProperties": false - }, - "label": true, - "info": true, - "id": true, - "visible_if": true - }, - "additionalProperties": false - }, - - "style.size_panel": { - "allOf": [ - { "$ref": "#/definitions/inputSettingsStandardAttributes" }, - { "$ref": "#/definitions/conditionalSetting" } - ], - "properties": { - "type": { - "const": "style.size_panel", - "description": "A setting of type style.size_panel outputs style settings for size.", - "markdownDescription": "A setting of type `style.size_panel` outputs style settings for size.\n\n---\n\n[Shopify reference](https://shopify.dev/docs/themes/architecture/settings/input-settings#style.size_panel)" - }, - "default": { - "allOf": [ - { - "$ref": "#/definitions/style.size_properties" - } - ], - "properties": { - "@media (--mobile)": { - "type": "object", - "description": "Style settings for the mobile breakpoint", - "$ref": "#/definitions/style.size_properties", - "unevaluatedProperties": false - } - }, - "unevaluatedProperties": false - }, - "label": true, - "info": true, - "id": true, - "visible_if": true - }, - "additionalProperties": false - }, - - "style.spacing_panel": { - "allOf": [ - { "$ref": "#/definitions/inputSettingsStandardAttributes" }, - { "$ref": "#/definitions/conditionalSetting" } - ], - "properties": { - "type": { - "const": "style.spacing_panel", - "description": "A setting of type style.spacing_panel outputs style settings for spacing.", - "markdownDescription": "A setting of type `style.spacing_panel` outputs style settings for spacing.\n\n---\n\n[Shopify reference](https://shopify.dev/docs/themes/architecture/settings/input-settings#style.spacing_panel)" - }, - "default": { - "allOf": [ - { - "$ref": "#/definitions/style.spacing_properties" - } - ], - "properties": { - "@media (--mobile)": { - "type": "object", - "description": "Style settings for the mobile breakpoint", - "$ref": "#/definitions/style.spacing_properties", - "unevaluatedProperties": false - } - }, - "unevaluatedProperties": false - }, - "label": true, - "info": true, - "id": true, - "visible_if": true - }, - "additionalProperties": false - }, - "text": { "allOf": [ { "$ref": "#/definitions/inputSettingsStandardAttributes" }, diff --git a/tests/fixtures/theme-settings-all-settings.json b/tests/fixtures/theme-settings-all-settings.json index c1c8358..3448b55 100644 --- a/tests/fixtures/theme-settings-all-settings.json +++ b/tests/fixtures/theme-settings-all-settings.json @@ -270,75 +270,6 @@ "id": "paragraph", "label": "Paragraph" }, - { - "type": "style.layout_panel", - "id": "layout", - "label": "Layout", - "default": { - "flex-direction": "row", - "column-gap": "20px", - "row-gap": "2px", - "flex-wrap": "wrap", - "justify-content": "space-around", - "align-items": "center", - "align-content": "space-between", - "@media (--mobile)": { - "flex-direction": "column", - "gap": "0px" - } - } - }, - { - "type": "style.size_panel", - "id": "size", - "label": "Size", - "default": { - "flex-grow": "1", - "flex-shrink": "0", - "flex-basis": "auto", - "width": "100px", - "min-width": "50px", - "max-width": "200px", - "height": "100px", - "min-height": "50px", - "max-height": "200px", - "@media (--mobile)": { - "width": "50px", - "height": "50px" - } - } - }, - { - "type": "style.spacing_panel", - "id": "spacing", - "label": "Spacing", - "default": { - "padding": "10px", - "padding-top": "10px", - "padding-right": "15px", - "padding-bottom": "10px", - "padding-left": "15px", - "padding-block-start": "10px", - "padding-block-end": "10px", - "padding-block": "10px 15px", - "padding-inline-start": "15px", - "padding-inline-end": "15px", - "padding-inline": "15px 10px", - "margin": "20px", - "margin-top": "20px", - "margin-right": "25px", - "margin-bottom": "20px", - "margin-left": "25px", - "margin-block-start": "20px", - "@media (--mobile)": { - "margin-block-end": "20px", - "margin-block": "20px 25px", - "margin-inline": "25px 20px", - "margin-inline-start": "25px", - "margin-inline-end": "25px" - } - } - }, { "type": "text_alignment", "id": "alignment", diff --git a/tests/test-constants.ts b/tests/test-constants.ts index 0fbf8c0..34fb051 100644 --- a/tests/test-constants.ts +++ b/tests/test-constants.ts @@ -38,9 +38,6 @@ export const INPUT_SETTING_TYPES = [ 'range', 'richtext', 'select', - 'style.layout_panel', - 'style.size_panel', - 'style.spacing_panel', 'text_alignment', 'text', 'textarea', diff --git a/tests/theme-settings/styles.spec.ts b/tests/theme-settings/styles.spec.ts deleted file mode 100644 index 3f8f692..0000000 --- a/tests/theme-settings/styles.spec.ts +++ /dev/null @@ -1,218 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { validateSchema } from '../test-helpers'; - -const validate = validateSchema(); - -describe('Module: theme settings validation (config/settings_schema.json)', () => { - describe('Unit: styles', () => { - it('should allow valid style settings and breakpoints', async () => { - const settings = `[ - { - "name": "some category", - "settings": [ - { - "type": "style.layout_panel", - "id": "layout", - "label": "Layout", - "default": { - "gap": "10px 10px", - "row-gap": "10px", - "column-gap": "10px", - "flex-direction": "row", - "flex-wrap": "wrap", - "align-items": "center", - "@media (--mobile)": { - "flex-direction": "column", - "align-items": "stretch", - "gap": "0px" - } - } - }, - { - "type": "style.spacing_panel", - "id": "spacing", - "label": "Spacing", - "default": { - "padding": "10px 20px", - "margin": "10px 20px 10px 20px", - "@media (--mobile)": { - "padding-block": "10px 20px", - "margin-top": "0px", - "margin-inline": "20px", - "margin-inline-end": "1px" - } - } - }, - { - "type": "style.size_panel", - "id": "size", - "label": "Size", - "default": { - "flex-grow": "2", - "width": "25%", - "height": "25px", - "@media (--mobile)": { - "width": "100%", - "flex-grow": "0" - } - } - } - ] - } - ]`; - - const diagnostics = await validate('config/settings_schema.json', settings); - - expect(diagnostics).toHaveLength(0); - }); - - it('should report invalid style setting panel types', async () => { - const settings = `[ - { - "name": "some category", - "settings": [ - { - "type": "styles.layout_panel", - "id": "layout", - "label": "Layout", - "default": { - "gap": "20px" - } - } - ] - } - ]`; - - const diagnostics = await validate('config/settings_schema.json', settings); - - expect(diagnostics).toStrictEqual([ - expect.objectContaining({ - message: expect.stringContaining('Value is not accepted.'), - }), - ]); - - expect(diagnostics).toStrictEqual([ - expect.objectContaining({ - message: expect.stringContaining('style.layout_panel'), - }), - ]); - }); - - it('should report invalid style properties', async () => { - const settings = `[ - { - "name": "some category", - "settings": [ - { - "type": "style.layout_panel", - "id": "layout", - "label": "Layout", - "default": { - "flex-rap": "wrap" - } - }, - { - "type": "style.spacing_panel", - "id": "spacing", - "label": "Spacing", - "default": { - "pudding": "20px" - } - }, - { - "type": "style.size_panel", - "id": "size", - "label": "Size", - "default": { - "width": "fit-content", - "@media (--mobile)": { - "width": "100%", - "flex-shrunk": "0" - } - } - } - ] - } - ]`; - - const diagnostics = await validate('config/settings_schema.json', settings); - - expect(diagnostics).toStrictEqual([ - expect.objectContaining({ - message: 'Property flex-rap is not allowed.', - }), - expect.objectContaining({ - message: 'Property pudding is not allowed.', - }), - expect.objectContaining({ - message: 'Property flex-shrunk is not allowed.', - }), - ]); - }); - - it('should report invalid property values', async () => { - const settings = `[ - { - "name": "some category", - "settings": [ - { - "type": "style.layout_panel", - "id": "layout", - "label": "Layout", - "default": { - "row-gap": "-10px", - "column-gap": "-10px", - "gap": "-10px -10px", - "flex-wrap": "rap" - } - } - ] - } - ]`; - - const diagnostics = await validate('config/settings_schema.json', settings); - - expect(diagnostics).toHaveLength(4); - expect(diagnostics).toContainEqual( - expect.objectContaining({ - message: expect.stringContaining('Value is not accepted.'), - }), - ); - expect(diagnostics).toContainEqual( - expect.objectContaining({ - message: expect.stringContaining('String does not match the pattern'), - }), - ); - }); - - it('should report invalid breakpoints', async () => { - const settings = `[ - { - "name": "some category", - "settings": [ - { - "type": "style.size_panel", - "id": "size", - "label": "Size", - "default": { - "width": "fit-content", - "@media (--iphone)": { - "width": "100%", - "flex-shrink": "0" - } - } - } - ] - } - ]`; - - const diagnostics = await validate('config/settings_schema.json', settings); - - expect(diagnostics).toStrictEqual([ - expect.objectContaining({ - message: expect.stringContaining('Property @media (--iphone) is not allowed'), - }), - ]); - }); - }); -});