relative positions

README.md

@@ -28,7 +28,6 @@ A collection of tools for common UI requirements for Decentraland scenes.
 - [Contribute](#contribute)
 - [CI/CD](#cicd)
 
-
 ## Install the library
 
 ## Via the Decentraland Editor
@@ -44,14 +43,14 @@ To use any of the helpers provided by the utils library, follow the steps in [Ma
 4. Import the library into the scene's script. Add this line at the start of your `index.ts` file, or any other TypeScript files that require it:
 
 ```ts
-import  *  as  ui  from  'dcl-ui-toolkit'
+import * as ui from 'dcl-ui-toolkit'
 ```
 
 5. Add following to your scene intialization code:
 
-    ```ts
-    ReactEcsRenderer.setUiRenderer(ui.render)
-    ```
+   ```ts
+   ReactEcsRenderer.setUiRenderer(ui.render)
+   ```
 
 6. Add the following permissions for fetching media on the 'scene.json' file. See [Required Permissions](https://docs.decentraland.org/creator/development-guide/sdk7/scene-metadata/#required-permissions) for more details:
 
@@ -63,30 +62,30 @@ import  *  as  ui  from  'dcl-ui-toolkit'
 		"decentraland.org"
 	],
 ```
- 
+
 ## Via the CLI
-  
+
 To use any of the helpers provided by the utils library
 
 1. Install it as an `npm` package. Run this command in your scene's project folder:
 
-    ```
-    npm install dcl-ui-toolkit
-    ```
+   ```
+   npm install dcl-ui-toolkit
+   ```
 
 2. Run `dcl start` or `dcl build` so the dependencies are correctly installed.
 
 3. Import the library into the scene's script. Add this line at the start of your `game.ts` file, or any other TypeScript files that require it:
 
-    ```ts
-    import * as ui from 'dcl-ui-toolkit'
-    ```
-4. Add following to your scene intialization code:
+   ```ts
+   import * as ui from 'dcl-ui-toolkit'
+   ```
 
-    ```ts
-    ReactEcsRenderer.setUiRenderer(ui.render)
-    ```
+4. Add following to your scene intialization code:
 
+   ```ts
+   ReactEcsRenderer.setUiRenderer(ui.render)
+   ```
 
 5. Add the following permissions for fetching media on the 'scene.json' file. See [Required Permissions](https://docs.decentraland.org/creator/development-guide/sdk7/scene-metadata/#required-permissions) for more details:
 
@@ -99,7 +98,6 @@ To use any of the helpers provided by the utils library
 	],
 ```
 
-
 ## Text Announcement
 
 To display a text announcement on the center of the screen for a specified amount of time, use the `Announcement` class.
@@ -570,8 +568,6 @@ const prompt = ui.createComponent(ui.OkPrompt, {
   },
   acceptLabel: 'Ok',
   useDarkTheme: true,
-  width: 450,
-  height: 300,
   startHidden: false,
 })
 
@@ -620,7 +616,7 @@ When instancing a new Option Prompt, you can pass the following parameters:
 ```ts
 ReactEcsRenderer.setUiRenderer(ui.render)
 
-const prompt = ui.createComponent(ui.OptionPrompt, {
+const optionPrompt = ui.createComponent(ui.OptionPrompt, {
   title: 'Pick an option!',
   text: 'What will you choose?',
   acceptLabel: 'Pick A',
@@ -636,7 +632,7 @@ const prompt = ui.createComponent(ui.OptionPrompt, {
   startHidden: false,
 })
 
-prompt.show()
+optionPrompt.show()
 ```
 
 <img src="screenshots/option-prompt.png" width="400">
@@ -1029,22 +1025,16 @@ export const customPrompt = ui.createComponent(ui.CustomPrompt, {
 
 const promptTitle = customPrompt.addText({
   value: 'What will you do?',
-  xPosition: 0,
-  yPosition: 250,
   color: Color4.Yellow(),
   size: 30,
 })
 
 const promptText = customPrompt.addText({
   value: "It's an important decision",
-  xPosition: 0,
-  yPosition: 200,
 })
 
 const promptCheckbox = customPrompt.addCheckbox({
   text: "Don't show again",
-  xPosition: -80,
-  yPosition: 150,
   onCheck: () => {
     console.log('checkbox checked')
   },
@@ -1055,8 +1045,6 @@ const promptCheckbox = customPrompt.addCheckbox({
 
 const promptSwitch = customPrompt.addSwitch({
   text: 'Turn me',
-  xPosition: -60,
-  yPosition: 50,
   onCheck: () => {
     console.log('switch checked')
   },
@@ -1067,8 +1055,6 @@ const promptSwitch = customPrompt.addSwitch({
 
 const promptTextBox = customPrompt.addTextBox({
   placeholder: 'Enter text',
-  xPosition: 0,
-  yPosition: 100,
   onChange: (value) => {
     console.log('textbox changed:', value)
   },
@@ -1077,8 +1063,6 @@ const promptTextBox = customPrompt.addTextBox({
 const promptButtonE = customPrompt.addButton({
   style: ui.ButtonStyles.E,
   text: 'Yeah',
-  xPosition: 0,
-  yPosition: -150,
   onMouseDown: () => {
     console.log('Yeah clicked')
   },
@@ -1087,17 +1071,13 @@ const promptButtonE = customPrompt.addButton({
 const promptButtonF = customPrompt.addButton({
   style: ui.ButtonStyles.F,
   text: 'Nope',
-  xPosition: 0,
-  yPosition: -225,
   onMouseDown: () => {
     console.log('Nope clicked')
   },
 })
 
 const promptIcon = customPrompt.addIcon({
   image: 'images/scene-thumbnail.png',
-  xPosition: 0,
-  yPosition: -50,
 })
 
 customPrompt.show()
@@ -1110,51 +1090,38 @@ customPrompt.show()
 If you want to combine elements from the UI Toolkit with your own [custom UI elements](https://docs.decentraland.org/creator/development-guide/sdk7/onscreen-ui/) in the same scene, you need to render all of the UI via a single call to the `ReactEcsRenderer.setUiRenderer` function. You can combine both into a single call in the following way:
 
 ```ts
-const uiComponent = () => (
-    [
-        ui.render(),
-        // Functions returning custom UI
-    ]
-)
+const uiComponent = () => [
+  ui.render(),
+  // Functions returning custom UI
+]
 
 ReactEcsRenderer.setUiRenderer(uiComponent)
 ```
 
 For example:
 
 ```ts
-const uiComponent = () => (
-    [
-        ui.render(),
-        MyCustomUI()
-    ]
-)
+const uiComponent = () => [ui.render(), MyCustomUI()]
 
 ReactEcsRenderer.setUiRenderer(uiComponent)
 
-
 function MyCustomUI() {
-
-	return <UiEntity
-		uiTransform={{
-			flexDirection: 'column',
-			alignItems: 'center',
-			justifyContent: 'space-between',
-			positionType: 'absolute',
-			position: { right: "3%", bottom: '3%' }
-		}}
-	>
-		<Label
-			value="Hello World!"
-			fontSize={18}
-			textAlign="middle-center"
-		/>
-	</UiEntity>
+  return (
+    <UiEntity
+      uiTransform={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        positionType: 'absolute',
+        position: { right: '3%', bottom: '3%' },
+      }}
+    >
+      <Label value="Hello World!" fontSize={18} textAlign="middle-center" />
+    </UiEntity>
+  )
 }
 ```
 
-
-
 ---
 
 ## Contribute

src/ui-entities/prompts/FillInPrompt/index.tsx

@@ -68,13 +68,17 @@ export class FillInPrompt extends Prompt {
       onClose = fillInPromptInitialConfig.onClose,
       width = fillInPromptInitialConfig.width,
       height = fillInPromptInitialConfig.height,
+      minWidth = fillInPromptInitialConfig.minWidth,
+      minHeight = fillInPromptInitialConfig.minHeight,
     }: FillInPromptConfig) {
     super(
       {
         startHidden,
         style: useDarkTheme ? PromptStyles.DARK : PromptStyles.LIGHT,
         width: width,
         height: height,
+        minWidth: minWidth,
+        minHeight: minHeight,
         onClose,
       })
 

src/ui-entities/prompts/OkPrompt/index.tsx

@@ -63,13 +63,17 @@ export class OkPrompt extends Prompt {
       filter = okPromptInitialConfig.filter,
       width = okPromptInitialConfig.width,
       height = okPromptInitialConfig.height,
+      minWidth = okPromptInitialConfig.minWidth,
+      minHeight = okPromptInitialConfig.minHeight,
     }: OkPromptConfig) {
     super(
       {
         startHidden,
         style: useDarkTheme ? PromptStyles.DARK : PromptStyles.LIGHT,
         width: width,
         height: height,
+        minWidth: minWidth,
+        minHeight: minHeight,
         onClose,
       })
 

src/ui-entities/prompts/OptionPrompt/index.tsx

@@ -85,13 +85,17 @@ export class OptionPrompt extends Prompt {
       onClose = optionPromptInitialConfig.onClose,
       width = optionPromptInitialConfig.width,
       height = optionPromptInitialConfig.height,
+      minWidth = optionPromptInitialConfig.minWidth,
+      minHeight = optionPromptInitialConfig.minHeight,
     }: OptionPromptConfig) {
     super(
       {
         startHidden,
         style: useDarkTheme ? PromptStyles.DARK : PromptStyles.LIGHT,
         width: width,
         height: height,
+        minWidth: minWidth,
+        minHeight: minHeight,
         onClose,
       })
 

src/ui-entities/prompts/Prompt/components/Button/index.tsx

@@ -62,7 +62,7 @@ const promptButtonInitialConfig: Omit<Required<PromptButtonConfig>, 'parent'> =
   text: '',
   xPosition: 0,
   yPosition: 0,
-  positionAbsolute: true,
+  positionAbsolute: false,
   onMouseDown: () => { },
   style: PromptButtonStyles.ROUNDSILVER,
   buttonSize: 'auto'
@@ -170,7 +170,8 @@ export class PromptButton extends InPromptUIObject {
       uiTransform: {
         justifyContent: 'flex-end',
         width: typeof (buttonSize) == 'number' ? buttonSize as number : 'auto',
-        height: this._height,
+        height: 'auto',
+        minHeight: 46,
         margin: { top: 30, bottom: 20 },
         maxWidth: 300,
       },
@@ -189,7 +190,7 @@ export class PromptButton extends InPromptUIObject {
 
     this.imageElementCorner = {
       uiTransform: {
-        height: this._height,
+        height: this.imageElement.height,
         width: 12
       },
       uiBackground: {
@@ -207,7 +208,7 @@ export class PromptButton extends InPromptUIObject {
 
     this.imageElementEdge = {
       uiTransform: {
-        height: this._height,
+        height: this.imageElement.height,
         width: 12,
         margin: { right: 10 }
       },
@@ -233,6 +234,7 @@ export class PromptButton extends InPromptUIObject {
         position: {
           top: '50%',
         },
+        margin: {right: 10},
       },
       uiBackground: {
         textureMode: 'stretch',
@@ -272,7 +274,7 @@ export class PromptButton extends InPromptUIObject {
 
   public render(key?: string): ReactEcs.JSX.Element {
     this._xPosition = this.promptWidth / -2 + this._width / 2 + this.xPosition
-    this._yPosition = this.promptHeight / 2 + this._height / -2 + this.yPosition
+    this._yPosition = this.promptHeight / 2 + this.imageElement.height / -2 + this.yPosition
 
     return (
       <UiEntity
@@ -282,6 +284,7 @@ export class PromptButton extends InPromptUIObject {
             ? {
               ...this.imageElement.uiTransform,
               display: this.visible ? 'flex' : 'none',
+              margin: { right: 10, left: 10, bottom:20, top: 20 },
             }
             : {
               ...this.imageElement.uiTransform,