diff --git a/packages/builder/package.json b/packages/builder/package.json index f8a2f6b60d..0e6eae7a7c 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -63,7 +63,7 @@ } }, "dependencies": { - "@budibase/bbui": "^1.55.2", + "@budibase/bbui": "^1.56.0", "@budibase/client": "^0.6.2", "@budibase/colorpicker": "^1.0.1", "@budibase/string-templates": "^0.6.2", diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index a260789b5e..6f78484339 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -80,7 +80,7 @@ class="icon" data-cy={`${key}-binding-button`} on:click={bindingDrawer.show}> - + {/if} @@ -144,7 +144,7 @@ border-top-right-radius: var(--border-radius-m); border-bottom-right-radius: var(--border-radius-m); color: var(--grey-7); - font-size: 16px; + font-size: 14px; } .icon:hover { color: var(--ink); diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 803b961fcd..0416a6bc81 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -842,10 +842,10 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@budibase/bbui@^1.55.2": - version "1.55.2" - resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8" - integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg== +"@budibase/bbui@^1.56.0": + version "1.56.0" + resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.0.tgz#91376f11b43706fd380291e9a5283760996eb62b" + integrity sha512-OEFC7MapbJk7Bd7oo79cVOq9BIcK1x8XPHLC1lB2N4hts37IygzB4Egg6JZBD7rh7CqU8ppc4W7wkfQbaXEO1Q== dependencies: markdown-it "^12.0.2" quill "^1.3.7" diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 65352761b9..8e8a8c1db3 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -183,18 +183,8 @@ }, { "type": "text", - "label": "Text 1", - "key": "text1" - }, - { - "type": "text", - "label": "Text 2", - "key": "text2" - }, - { - "type": "text", - "label": "Text 3", - "key": "text3" + "label": "Subheading", + "key": "subheading" }, { "type": "screen", diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte index f7644a4e41..b06ce53ebe 100644 --- a/packages/standard-components/src/StackedList.svelte +++ b/packages/standard-components/src/StackedList.svelte @@ -6,9 +6,7 @@ export let imageUrl = "" export let heading = "" - export let text1 = "" - export let text2 = "" - export let text3 = "" + export let subheading = "" export let destinationUrl = "" $: showImage = !!imageUrl @@ -16,16 +14,16 @@
- @@ -34,61 +32,51 @@ a { text-decoration: none; color: inherit; + cursor: pointer; } .container { - padding: 20px; + padding: 1rem 1.5rem; + min-height: 3rem; + display: block; + align-items: flex-start; + } + + .stackedlist { + display: flex; + flex-direction: row; + overflow: hidden; + max-width: 100%; + } + + .subheading { + opacity: 0.6; } .content { - display: grid; - grid-template-columns: 120px 300px 1fr 1fr 1fr; - align-items: center; - gap: 20px; - min-height: 80px; - } - - @media (max-width: 800px) { - .content { - display: grid; - grid-template-columns: 1fr; - gap: 20px; - } - } - .image-block { - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - } - - .image { - padding: 2px; - max-width: 80px; - max-height: 80px; - margin-right: 20px; + min-width: 0; + max-width: 100%; + flex: 1 1 auto; } .heading { - font-size: 24px; - margin: 0; - min-width: 200px; + font-weight: 600; } - .text { - font-size: 16px; - font-weight: 400; + .image-block { + display: flex; + flex: 0 0 auto; + margin-right: 1.5rem; + color: inherit; + text-decoration: none; } - .text3 { - text-align: end; - font-size: 16px; - font-weight: 400; - } - - @media (max-width: 800px) { - .text3 { - text-align: start; - } + .image { + display: block; + overflow: hidden; + width: 3rem; + max-width: 100%; + -webkit-user-select: none; + user-select: none; + border-radius: 99px; }