feat[DSTSUP-17]: add placeholder text styles for b2b theme (#3656)

marigold-ui · Jan 19, 2024 · c1fb6aa · c1fb6aa
1 parent 299941b
commit c1fb6aa
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/tiny-plums-prove.md b/.changeset/tiny-plums-prove.md
@@ -0,0 +1,6 @@
+---
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+---
+
+feat[DSTSUP-17]: add placeholder text styles for b2b theme
diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
@@ -87,7 +87,12 @@ export const Basic: StoryObj<typeof Select> = {
     const [selected, setSelected] = useState<string | number>('');
     return (
       <>
-        <Select {...args} onChange={setSelected} disabledKeys={['Firefly']}>
+        <Select
+          {...args}
+          onChange={setSelected}
+          disabledKeys={['Firefly']}
+          placeholder="Select Item"
+        >
           <Select.Option id="Harry Potter">Harry Potter</Select.Option>
           <Select.Option id="Lord of the Rings">
             Lord of the Rings

diff --git a/packages/components/src/TextField/TextField.stories.tsx b/packages/components/src/TextField/TextField.stories.tsx
@@ -125,7 +125,12 @@ export const Controlled: Story = {
     const [value, setValue] = React.useState('');
     return (
       <>
-        <TextField {...args} value={value} onChange={setValue} />
+        <TextField
+          {...args}
+          value={value}
+          onChange={setValue}
+          placeholder="Placeholder"
+        />
         <pre>
           <strong>Input Value:</strong>
           {value}

diff --git a/themes/theme-b2b/src/components/DateField.styles.ts b/themes/theme-b2b/src/components/DateField.styles.ts
@@ -1,6 +1,11 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
-import { inputBackground, inputBox, inputSpacing } from './Input.styles';
+import {
+  inputBackground,
+  inputBox,
+  inputPlaceholder,
+  inputSpacing,
+} from './Input.styles';
 
 export const DateField: ThemeComponent<'DateField'> = {
   field: cva([
@@ -24,6 +29,7 @@ export const DateField: ThemeComponent<'DateField'> = {
     'focus:bg-bg-accent focus:text-text-inverted',
     'aria-[readonly]:focus:border-border-base aria-[readonly]:focus:outline-none',
     'aria-[readonly]:text-text-base-disabled aria-[readonly]:bg-transparent',
+    inputPlaceholder(),
   ]),
   action: cva(''),
 };
diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts
@@ -17,6 +17,10 @@ export const inputError = (selector: string = 'error') =>
 export const inputHover = (selector: string = 'hover') =>
   `${selector}:border-border-base-hover`;
 
+export const inputPlaceholder = (
+  selector: string = 'data-[placeholder=true]'
+) => `${selector}:text-text-base-disabled`;
+
 export const Input: ThemeComponent<'Input'> = {
   icon: cva('left-2'),
   action: cva('right-0'),
@@ -28,6 +32,7 @@ export const Input: ThemeComponent<'Input'> = {
     inputHover(),
     inputError('group-error/field'),
     inputSpacing,
+    inputPlaceholder(),
     'leading-[2]',
     'read-only:focus:border-border-base read-only:focus:outline-none',
     // Extra padding for when an icon/action is present

diff --git a/themes/theme-b2b/src/components/Select.styles.ts b/themes/theme-b2b/src/components/Select.styles.ts
@@ -7,6 +7,7 @@ import {
   inputError,
   inputFocus,
   inputHover,
+  inputPlaceholder,
   inputSpacing,
 } from './Input.styles';
 
@@ -20,6 +21,7 @@ export const Select: ThemeComponent<'Select'> = {
     inputHover(),
     inputBackground,
     inputSpacing,
+    inputPlaceholder('[&>[data-placeholder=true]]'),
     'appearance-none leading-8',
     'cursor-pointer',
     'aria-expanded:bg-bg-base-active ',