docs: 📝 Edit single button color

baptisteArno · May 23, 2022 · c57ed07 · c57ed07 · vercel · May 23, 2022
1 parent f07db7f
commit c57ed07
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/apps/docs/docs/editor/theme.md b/apps/docs/docs/editor/theme.md
@@ -25,3 +25,21 @@ For example, if I want my buttons to be more rounded, and have a fancy gradient
   src="/img/theme/fancy-button.png"
   alt="Fancy button"
 />
+
+### Customize a single button color
+
+Thanks to custom CSS, you can customize the color of a single button for example by using the `data-itemid` attribute:
+
+```css
+[data-itemid='cl3iunm4p000f2e6gfr8cznnn'] {
+  background-color: gray;
+  border-color: gray;
+}
+```
+
+To find the item ID of a button, right-click on the button and inspect the element:
+
+<img
+    src="/img/theme/button-inspect.png"
+    alt="Button inspect"
+  />
diff --git a/apps/docs/static/img/theme/button-inspect.png b/apps/docs/static/img/theme/button-inspect.png
diff --git a/apps/docs/static/img/theme/edit-single-button.png b/apps/docs/static/img/theme/edit-single-button.png
diff --git a/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx b/packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx
@@ -54,6 +54,7 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
                   : 'selectable')
               }
               data-testid="button"
+              data-itemid={item.id}
             >
               {item.content}
             </button>