feat: add filepicker carbon styles

bpmn-io · Sep 9, 2024 · e5ace5e · e5ace5e
1 parent e4ff280
commit e5ace5e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/packages/form-js-carbon-styles/src/carbon-styles.js b/packages/form-js-carbon-styles/src/carbon-styles.js
@@ -677,7 +677,8 @@ const RADIO_STYLES = css`
 
 const BUTTON_STYLES = css`
  .fjs-container {
- .fjs-form-field.fjs-form-field-button .fjs-button {
+ .fjs-form-field.fjs-form-field-button .fjs-button,
+ .fjs-form-field.fjs-form-field-filepicker .fjs-button {
  font-size: var(--cds-body-short-01-font-size);
  font-weight: var(--cds-body-short-01-font-weight);
  line-height: var(--cds-body-short-01-line-height);

diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss
@@ -796,7 +796,8 @@
 // Button styles /////////////
 
 .fjs-container {
- .fjs-form-field.fjs-form-field-button .fjs-button {
+ .fjs-form-field.fjs-form-field-button .fjs-button,
+ .fjs-form-field.fjs-form-field-filepicker .fjs-button {
  font-size: var(--cds-body-short-01-font-size);
  font-weight: var(--cds-body-short-01-font-weight);
  line-height: var(--cds-body-short-01-line-height);

diff --git a/packages/form-js-carbon-styles/test/spec/complex.json b/packages/form-js-carbon-styles/test/spec/complex.json
@@ -643,6 +643,12 @@
  "height": 30,
  "id": "Field_1a82jjsdasd"
  },
+ {
+ "type": "filepicker",
+ "key": "filepicker",
+ "accept": ".png,.jpg",
+ "multiple": true
+ },
  {
  "action": "reset",
  "label": "reset",

diff --git a/packages/form-js-playground/test/spec/form.json b/packages/form-js-playground/test/spec/form.json
@@ -1,6 +1,12 @@
 {
  "$schema": "../../../form-json-schema/resources/schema.json",
  "components": [
+ {
+ "type": "filepicker",
+ "key": "filepicker",
+ "accept": ".png,.jpg",
+ "multiple": true
+ },
  {
  "type": "expression",
  "key": "expressionResult",

diff --git a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
@@ -97,7 +97,7 @@ export function FilePicker(props) {
  type="button"
  disabled={isInputDisabled}
  readonly={readonly}
- className="fjs-button"
+ className="fjs-button fjs-filepicker-button"
  onClick={() => {
  fileInputRef.current.click();
  }}>