feat(Text): add text placeholder

Author: tenphi

.changeset/text-placeholder-variant.md

@@ -0,0 +1,7 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `Text.Placeholder` variant with disabled opacity styling. This new text variant is useful for displaying placeholder content with reduced visual emphasis.
+
+

src/components/content/Text.tsx

@@ -99,27 +99,66 @@ const Text = forwardRef(function CubeText(allProps: CubeTextProps, ref) {
   );
 });
 
-const _Text = Object.assign(Text, {
-  Minor: forwardRef(function MinorText(props: CubeTextProps, ref) {
-    return <Text ref={ref} color="#minor" {...props} />;
-  }),
-  Danger: forwardRef(function DangerText(props: CubeTextProps, ref) {
-    return <Text ref={ref} role="alert" color="#danger-text" {...props} />;
-  }),
-  Success: forwardRef(function SuccessText(props: CubeTextProps, ref) {
-    return <Text ref={ref} color="#success-text" {...props} />;
-  }),
-  Strong: forwardRef(function StrongText(props: CubeTextProps<'strong'>, ref) {
-    return <Text ref={ref} as="strong" preset="strong" {...props} />;
-  }),
-  Emphasis: forwardRef(function StrongText(props: CubeTextProps<'em'>, ref) {
-    return <Text ref={ref} as="em" preset="em" {...props} />;
-  }),
-  Selection: forwardRef(function SelectionText(props: CubeTextProps, ref) {
-    return <Text ref={ref} color="#dark" fill="#note.30" {...props} />;
-  }),
+const MinorText = tasty(Text, {
+  styles: {
+    color: '#minor',
+  },
+});
+
+const DangerText = tasty(Text, {
+  role: 'alert',
+  styles: {
+    color: '#danger-text',
+  },
+});
+
+const SuccessText = tasty(Text, {
+  styles: {
+    color: '#success-text',
+  },
+});
+
+const StrongText = tasty(Text, {
+  as: 'strong',
+  preset: 'strong',
 });
 
+const EmphasisText = tasty(Text, {
+  as: 'em',
+  preset: 'em',
+});
+
+const SelectionText = tasty(Text, {
+  styles: {
+    color: '#dark',
+    fill: '#note.30',
+  },
+});
+
+const PlaceholderText = tasty(Text, {
+  styles: {
+    opacity: '$disabled-opacity',
+  },
+});
+
+const _Text = Object.assign(Text, {
+  Minor: MinorText,
+  Danger: DangerText,
+  Success: SuccessText,
+  Strong: StrongText,
+  Emphasis: EmphasisText,
+  Selection: SelectionText,
+  Placeholder: PlaceholderText,
+}) as typeof Text & {
+  Minor: typeof MinorText;
+  Danger: typeof DangerText;
+  Success: typeof SuccessText;
+  Strong: typeof StrongText;
+  Emphasis: typeof EmphasisText;
+  Selection: typeof SelectionText;
+  Placeholder: typeof PlaceholderText;
+};
+
 _Text.displayName = 'Text';
 
 export { _Text as Text };

src/components/fields/FilterPicker/FilterPicker.stories.tsx

@@ -1567,13 +1567,13 @@ export const InForm = () => {
 export const ComplexExample: Story = {
   args: {
     label: 'Advanced Filter System',
-    placeholder: 'Apply filters...',
     selectionMode: 'multiple',
     isCheckable: true,
     searchPlaceholder: 'Search all filters...',
     width: '30x',
     renderSummary: ({ selectedKeys, selectedLabels }) => {
-      if (selectedKeys.length === 0) return null;
+      if (selectedKeys.length === 0)
+        return <Text.Placeholder>Apply filters...</Text.Placeholder>;
       if (selectedKeys.length === 1) return `1 filter: ${selectedLabels[0]}`;
       if (selectedKeys.length <= 3)
         return `${selectedKeys.length} filters: ${selectedLabels.join(', ')}`;