@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/Label/{style.module.css → style.css}

@@ -27,7 +27,7 @@
 
 @layer antd {
   /* Label column */
-  :global(.ant-form-item .ant-form-item-label) {
+  .ant-form-item .ant-form-item-label {
     flex-grow: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -35,11 +35,11 @@
     vertical-align: middle;
   }
 
-  :global(.ant-form-item .ant-form-item-label-left) {
+  .ant-form-item .ant-form-item-label-left {
     text-align: start;
   }
 
-  :global(.ant-form-item .ant-form-item-label > label) {
+  .ant-form-item .ant-form-item-label > label {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -50,7 +50,7 @@
   }
 
   /* Required asterisk */
-  :global(.ant-form-item .ant-form-item-label > label.ant-form-item-required)::before {
+  .ant-form-item .ant-form-item-label > label.ant-form-item-required::before {
     display: inline-block;
     margin-inline-end: var(--ant-margin-xxs, 4px);
     color: var(--ant-form-label-required-mark-color, var(--ant-color-error));
@@ -61,7 +61,7 @@
   }
 
   /* Colon after label */
-  :global(.ant-form-item .ant-form-item-label > label)::after {
+  .ant-form-item .ant-form-item-label > label::after {
     content: ':';
     position: relative;
     margin-block: 0;
@@ -69,32 +69,32 @@
     margin-inline-end: var(--ant-form-label-colon-margin-inline-end, 8px);
   }
 
-  :global(.ant-form-item .ant-form-item-label > label.ant-form-item-no-colon)::after {
+  .ant-form-item .ant-form-item-label > label.ant-form-item-no-colon::after {
     content: '\a0';
   }
 
   /* Control column */
-  :global(.ant-form-item .ant-form-item-control) {
+  .ant-form-item .ant-form-item-control {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
   }
 
-  :global(.ant-form-item .ant-form-item-control-input) {
+  .ant-form-item .ant-form-item-control-input {
     position: relative;
     display: flex;
     align-items: center;
     min-height: var(--ant-control-height);
   }
 
-  :global(.ant-form-item .ant-form-item-control-input-content) {
+  .ant-form-item .ant-form-item-control-input-content {
     flex: auto;
     max-width: 100%;
   }
 
   /* Help text / extra */
-  :global(.ant-form-item .ant-form-item-explain),
-  :global(.ant-form-item .ant-form-item-extra) {
+  .ant-form-item .ant-form-item-explain,
+  .ant-form-item .ant-form-item-extra {
     clear: both;
     color: var(--ant-color-text-description);
     font-size: var(--ant-font-size);
@@ -102,44 +102,44 @@
   }
 
   /* Validation feedback colors */
-  :global(.ant-form-item .ant-form-item-explain-error) {
+  .ant-form-item .ant-form-item-explain-error {
     color: var(--ant-color-error);
   }
 
-  :global(.ant-form-item .ant-form-item-explain-warning) {
+  .ant-form-item .ant-form-item-explain-warning {
     color: var(--ant-color-warning);
   }
 
-  :global(.ant-form-item .ant-form-item-explain-success) {
+  .ant-form-item .ant-form-item-explain-success {
     color: var(--ant-color-success);
   }
 
   /* Feedback icons */
-  :global(.ant-form-item .ant-form-item-feedback-icon) {
+  .ant-form-item .ant-form-item-feedback-icon {
     font-size: var(--ant-font-size);
     text-align: center;
     visibility: visible;
     pointer-events: none;
   }
 
-  :global(.ant-form-item .ant-form-item-feedback-icon-success) {
+  .ant-form-item .ant-form-item-feedback-icon-success {
     color: var(--ant-color-success);
   }
 
-  :global(.ant-form-item .ant-form-item-feedback-icon-error) {
+  .ant-form-item .ant-form-item-feedback-icon-error {
     color: var(--ant-color-error);
   }
 
-  :global(.ant-form-item .ant-form-item-feedback-icon-warning) {
+  .ant-form-item .ant-form-item-feedback-icon-warning {
     color: var(--ant-color-warning);
   }
 
-  :global(.ant-form-item .ant-form-item-feedback-icon-validating) {
+  .ant-form-item .ant-form-item-feedback-icon-validating {
     color: var(--ant-color-primary);
   }
 
   /* Custom: feedback icon spacing */
-  :global(.ldf-feedback-icon) {
+  .ldf-feedback-icon {
     margin-inline-start: var(--ant-margin-xxs, 4px);
   }
 }
@@ -151,35 +151,35 @@
   These rules must live OUTSIDE @layer antd so they beat antd's unlayered
   CSS-in-JS output in the cascade.
 */
-:global(.ant-form-item-has-error .ant-radio-inner) {
+.ant-form-item-has-error .ant-radio-inner {
   border-color: var(--ant-color-error) !important;
 }
 
-:global(.ant-form-item-has-error .ant-checkbox-inner) {
+.ant-form-item-has-error .ant-checkbox-inner {
   border-color: var(--ant-color-error) !important;
 }
 
-:global(.ant-form-item-has-error .ant-radio-button-wrapper) {
+.ant-form-item-has-error .ant-radio-button-wrapper {
   border-color: var(--ant-color-error) !important;
 }
 
-:global(.ant-form-item-has-error .ant-segmented) {
+.ant-form-item-has-error .ant-segmented {
   border-color: var(--ant-color-error);
 }
 
 /* Warning state */
-:global(.ant-form-item-has-warning .ant-radio-inner) {
+.ant-form-item-has-warning .ant-radio-inner {
   border-color: var(--ant-color-warning) !important;
 }
 
-:global(.ant-form-item-has-warning .ant-checkbox-inner) {
+.ant-form-item-has-warning .ant-checkbox-inner {
   border-color: var(--ant-color-warning) !important;
 }
 
-:global(.ant-form-item-has-warning .ant-radio-button-wrapper) {
+.ant-form-item-has-warning .ant-radio-button-wrapper {
   border-color: var(--ant-color-warning) !important;
 }
 
-:global(.ant-form-item-has-warning .ant-segmented) {
+.ant-form-item-has-warning .ant-segmented {
   border-color: var(--ant-color-warning);
 }

package/dist/blocks/Label/tests/Label.e2e.yaml

@@ -0,0 +1,247 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: label
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # Note: Using Span as content to avoid nested Label from TextInput
+  # ============================================
+
+  - id: label_basic
+    type: Label
+    properties:
+      title: Basic Label
+    blocks:
+      - id: label_basic_content
+        type: Span
+        properties:
+          content: Content here
+
+  - id: label_no_title
+    type: Label
+    blocks:
+      - id: label_no_title_content
+        type: Span
+        properties:
+          content: No title content
+
+  # ============================================
+  # COLON TESTS
+  # ============================================
+
+  - id: label_with_colon
+    type: Label
+    properties:
+      title: With Colon
+      colon: true
+    blocks:
+      - id: label_colon_content
+        type: Span
+        properties:
+          content: Colon content
+
+  - id: label_no_colon
+    type: Label
+    properties:
+      title: No Colon
+      colon: false
+    blocks:
+      - id: label_no_colon_content
+        type: Span
+        properties:
+          content: No colon content
+
+  # ============================================
+  # DISABLED TEST
+  # ============================================
+
+  - id: label_disabled
+    type: Label
+    properties:
+      title: This Should Not Appear
+      disabled: true
+    blocks:
+      - id: label_disabled_content
+        type: Span
+        properties:
+          content: Disabled content
+
+  # ============================================
+  # EXTRA TEXT TESTS
+  # ============================================
+
+  - id: label_with_extra
+    type: Label
+    properties:
+      title: With Extra
+      extra: This is helpful extra text
+    blocks:
+      - id: label_extra_content
+        type: Span
+        properties:
+          content: Extra content
+
+  - id: label_extra_html
+    type: Label
+    properties:
+      title: Extra with HTML
+      extra: <strong>Bold</strong> extra text
+    blocks:
+      - id: label_extra_html_content
+        type: Span
+        properties:
+          content: HTML extra content
+
+  # ============================================
+  # INLINE LAYOUT TESTS
+  # ============================================
+
+  - id: label_inline
+    type: Label
+    properties:
+      title: Inline Label
+      inline: true
+    blocks:
+      - id: label_inline_content
+        type: Span
+        properties:
+          content: Inline content
+
+  - id: label_inline_with_span
+    type: Label
+    properties:
+      title: Span Label
+      inline: true
+      span: 8
+    blocks:
+      - id: label_span_content
+        type: Span
+        properties:
+          content: Span content
+
+  # ============================================
+  # ALIGN TESTS
+  # ============================================
+
+  - id: label_align_left
+    type: Label
+    properties:
+      title: Left Aligned
+      inline: true
+      align: left
+    blocks:
+      - id: label_align_left_content
+        type: Span
+        properties:
+          content: Left aligned content
+
+  - id: label_align_right
+    type: Label
+    properties:
+      title: Right Aligned
+      inline: true
+      align: right
+    blocks:
+      - id: label_align_right_content
+        type: Span
+        properties:
+          content: Right aligned content
+
+  # ============================================
+  # SIZE TESTS - Use actual inputs with label disabled
+  # ============================================
+
+  - id: label_size_small
+    type: Label
+    properties:
+      title: Small Label
+      size: small
+    blocks:
+      - id: label_small_input
+        type: TextInput
+        properties:
+          size: small
+          label:
+            disabled: true
+
+  - id: label_size_default
+    type: Label
+    properties:
+      title: Default Label
+      size: default
+    blocks:
+      - id: label_default_input
+        type: TextInput
+        properties:
+          label:
+            disabled: true
+
+  - id: label_size_large
+    type: Label
+    properties:
+      title: Large Label
+      size: large
+    blocks:
+      - id: label_large_input
+        type: TextInput
+        properties:
+          size: large
+          label:
+            disabled: true
+
+  # ============================================
+  # TITLE WITH HTML
+  # ============================================
+
+  - id: label_html_title
+    type: Label
+    properties:
+      title: <em>Italic</em> Title
+    blocks:
+      - id: label_html_title_content
+        type: Span
+        properties:
+          content: HTML title content
+
+  # ============================================
+  # REQUIRED INDICATOR
+  # ============================================
+
+  - id: label_required
+    type: Label
+    required: true
+    properties:
+      title: Required Field
+    blocks:
+      - id: label_required_content
+        type: Span
+        properties:
+          content: Required content
+
+  # ============================================
+  # CONTENT AREA TEST
+  # ============================================
+
+  - id: label_with_content
+    type: Label
+    properties:
+      title: Content Area
+    blocks:
+      - id: nested_content
+        type: Span
+        properties:
+          content: Nested content block

package/dist/blocks/Label/tests.yaml

@@ -0,0 +1,212 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- id: default
+  type: Label
+- id: properties.title
+  type: Label
+  properties:
+    title: Label title
+- id: properties.title long
+  type: Label
+  properties:
+    title: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: 'properties.align: right'
+  type: Label
+  properties:
+    title: Label title
+    align: right
+- id: 'properties.align: left'
+  type: Label
+  properties:
+    title: Label title
+    align: left
+- id: 'properties.colon: false'
+  type: Label
+  properties:
+    title: Label title
+    colon: false
+- id: 'properties.colon: true'
+  type: Label
+  properties:
+    title: Label title
+    colon: true
+- id: 'properties.disabled: true'
+  type: Label
+  properties:
+    title: Label title
+    disabled: true
+- id: 'properties.inline: true'
+  type: Label
+  properties:
+    inline: true
+    title: Label title
+- id: 'properties.extra: Extra long with inline true'
+  type: Label
+  properties:
+    inline: true
+    title: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: 'properties.extra: Extra text'
+  type: Label
+  properties:
+    extra: Extra text
+    title: Label title
+- id: 'properties.extra: Extra long'
+  type: Label
+  properties:
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    title: Label title
+- id: 'properties.extra: Extra long with inline = true'
+  type: Label
+  properties:
+    inline: true
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    title: Label title
+- id: 'properties.extra: Extra long with inline = true, size = small'
+  type: Label
+  properties:
+    inline: true
+    size: small
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    title: Label title
+- id: 'properties.extra: Extra long with inline = true, size = large'
+  type: Label
+  properties:
+    inline: true
+    size: large
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    title: Label title
+- id: 'properties.extraStyle: border 1px purple'
+  type: Label
+  properties:
+    title: Label title
+    extra: Extra text
+    extraStyle:
+      border: 1px solid purple
+- id: 'properties.feedbackStyle: border 1px blue'
+  type: Label
+  properties:
+    title: Label title
+    extra: The extra content
+    feedbackStyle:
+      border: 1px solid blue
+- id: 'properties.span: 2'
+  type: Label
+  properties:
+    span: 2
+    title: This is the long label title wrapped by short span
+- id: 'properties.span: 2 with long work title'
+  type: Label
+  properties:
+    span: 2
+    title: Thisisthelonglabeltitlea
+- id: inline and long extra default size
+  type: Label
+  properties:
+    inline: true
+    title: |
+      Lorem ipsum dolor sit amet
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: inline and long extra small size
+  type: Label
+  properties:
+    size: small
+    inline: true
+    title: |
+      Lorem ipsum dolor sit amet
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: inline and long extra large size
+  type: Label
+  properties:
+    size: large
+    inline: true
+    title: |
+      Lorem ipsum dolor sit amet
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right and long extra for default size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    title: |
+      Lorem
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right and long extra for small size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    size: small
+    title: |
+      Lorem
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right and long extra for large size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    size: large
+    title: |
+      Lorem
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right, long title and long extra for default size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    title: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right, long title and long extra for small size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    size: small
+    title: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: span, align right, long title and long extra for large size
+  type: Label
+  properties:
+    span: 8
+    align: right
+    size: large
+    title: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+    extra: |
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
+- id: 'properties.title: html in title'
+  type: Label
+  properties:
+    title: <span style="background:yellow;">html in title</span>
+- id: 'properties.extra: html in extra'
+  type: Label
+  properties:
+    title: label title
+    extra: <span style="background:yellow;">html in extra</span>