Fix/adjustments

packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx

@@ -12,17 +12,17 @@ export class PopoverContent {
   @Prop() scrollable = 0
 
   /**
-   * If `true` the field spans over the whole width.
+   * Define the max width of the popover content.
    */
   @Prop() contentWidth = 0
 
-  get contentStyle() {
-    let scrollable = {}
-    let contentWidth = {}
+  /**
+   * If `true` the content has a min width of 100%.
+   */
+  @Prop() expanded = false
 
-    if (this.contentWidth > 0) {
-      contentWidth = { 'max-width': this.contentWidth }
-    }
+  get innerStyle() {
+    let scrollable = {}
 
     if (this.scrollable > 0) {
       scrollable = {
@@ -33,14 +33,32 @@ export class PopoverContent {
 
     return {
       ...scrollable,
+    }
+  }
+
+  get contentStyle() {
+    let contentWidth = {}
+
+    if (this.contentWidth > 0) {
+      contentWidth = { 'max-width': `${this.contentWidth}px` }
+    }
+
+    return {
       ...contentWidth,
     }
   }
 
   render() {
     return (
-      <Host class="popover-content has-background-white has-radius-normal has-shadow" role="menu">
-        <div class="inner" style={this.contentStyle}>
+      <Host
+        class={{
+          'popover-content has-background-white has-radius-normal has-shadow': true,
+          'is-expanded': this.expanded,
+        }}
+        role="menu"
+        style={this.contentStyle}
+      >
+        <div class="inner" style={this.innerStyle}>
           <slot></slot>
         </div>
       </Host>

packages/components/src/components/bal-popover/bal-popover.scss

@@ -16,6 +16,10 @@ bal-popover-content {
   display: none;
   z-index: 20;
   min-width: 260px;
+
+  &.is-expanded {
+    min-width: 100%;
+  }
 }
 
 bal-popover.is-active bal-popover-content {

packages/components/src/components/form/bal-checkbox/bal-checkbox.scss

@@ -97,7 +97,7 @@ bal-checkbox {
       transform: rotate(45deg);
     }
 
-    input[type='checkbox']:disabled:not(.is-disabled-hidden) + label {
+    input[type='checkbox'].is-disabled:not(.is-disabled-hidden) + label {
       cursor: not-allowed;
       opacity: 0.5;
     }
@@ -122,7 +122,7 @@ bal-checkbox {
         border-right: 2px solid $white;
       }
 
-      input[type='checkbox']:hover:not([disabled]) + label:before {
+      input[type='checkbox']:hover:not(.is-disabled) + label:before {
         border-color: $white;
       }
     }

packages/components/src/components/form/bal-checkbox/bal-checkbox.tsx

@@ -63,10 +63,15 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
   @Prop({ mutable: true }) checked = false
 
   /**
-   * If `true`, the user cannot interact with the checkbox.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true`, the value will not be send with a form submit
    */
@@ -163,7 +168,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
         aria-focused={this.hasFocus ? 'true' : null}
         class={{
           'is-inverted': this.inverted,
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
           'is-focused': this.hasFocus,
           'bal-checkbox': this.interface === 'checkbox',
           'bal-switch': this.interface === 'switch',
@@ -172,7 +177,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
       >
         <input
           class={{
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-disabled-hidden': this.hidden,
             'data-test-checkbox-input': true,
           }}
@@ -184,6 +189,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
           value={this.value}
           aria-checked={`${this.checked}`}
           disabled={this.disabled || this.hidden}
+          readonly={this.readonly}
           onFocus={e => this.onInputFocus(e)}
           onBlur={e => this.onInputBlur(e)}
           onClick={this.onClick}
@@ -192,7 +198,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
         <label
           class={{
             'option-label': true,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'data-test-checkbox-label': true,
           }}
           htmlFor={this.inputId}

packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts

@@ -45,7 +45,7 @@ const SingleTemplate = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group>
@@ -62,7 +62,7 @@ const GroupTemplate = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group v-bind="args" v-model="args.value">
@@ -85,7 +85,7 @@ const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group :vertical="args.vertical">

packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx

@@ -123,14 +123,14 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
   @Prop() required = false
 
   /**
-   * If `true` the use can only select a date.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
-  @Prop() readonly = false
+  @Prop() disabled = false
 
   /**
-   * If `true` the component is disabled.
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
-  @Prop() disabled = false
+  @Prop() readonly = false
 
   /**
    * The text to display when the select is empty.
@@ -470,15 +470,15 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
   }
 
   private onIconClick = (event: MouseEvent) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.popoverElement.toggle()
     }
     stopEventBubbling(event)
     this.balClick.emit(event)
   }
 
   private onInputClick = (event: MouseEvent) => {
-    if (!this.triggerIcon && !this.disabled) {
+    if (!this.triggerIcon && !this.disabled && !this.readonly) {
       this.popoverElement.toggle()
     }
     stopEventBubbling(event)
@@ -589,7 +589,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
       >
         <bal-popover onBalChange={this.onPopoverChange} ref={el => (this.popoverElement = el as HTMLBalPopoverElement)}>
@@ -622,9 +622,9 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
           class={{
             'input': true,
             'data-test-input': true,
-            'clickable': !this.disabled && !this.triggerIcon,
+            'clickable': !this.disabled && !this.readonly && !this.triggerIcon,
             'is-inverted': this.inverted,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-danger': this.invalid,
           }}
           ref={el => (this.nativeInput = el as HTMLInputElement)}

packages/components/src/components/form/bal-datepicker/stories/bal-datepicker.stories.ts

@@ -34,7 +34,7 @@ const component = BalComponentStory({
 
 export default component.story
 
-const excludedControls = ['allowedDates', 'readonly', 'name', 'required']
+const excludedControls = ['allowedDates', 'name', 'required']
 
 const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
@@ -45,7 +45,7 @@ const Template = args => ({
     }
   },
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
   <bal-field-label>Label</bal-field-label>
   <bal-field-control>
     <bal-datepicker v-bind="args" v-model="args.value"></bal-datepicker>

packages/components/src/components/form/bal-field/bal-field.tsx

@@ -12,10 +12,15 @@ export class Field {
   @Prop() invalid = false
 
   /**
-   * If `true` the field loses opacity
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true` the field can be used on blue background.
    */
@@ -37,13 +42,15 @@ export class Field {
     })
   }
 
+  @Watch('readonly')
   @Watch('disabled')
   @Watch('loading')
   @Watch('inverted')
   restHandler() {
-    this.notifyComponents<{ disabled: boolean; loading: boolean; inverted: boolean }>(
+    this.notifyComponents<{ readonly: boolean; disabled: boolean; loading: boolean; inverted: boolean }>(
       [...this.inputElements, ...this.formControlElement],
       input => {
+        input.readonly = this.readonly
         input.disabled = this.disabled
         input.loading = this.loading
         input.inverted = this.inverted
@@ -72,7 +79,7 @@ export class Field {
           class={{
             'form': true,
             'is-inverted': this.inverted,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
           }}
         >
           <slot></slot>

packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx

@@ -37,10 +37,15 @@ export class FileUpload {
   @Prop() hasFileList = true
 
   /**
-   * If `true` the button is disabled
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * Accepted MIME-Types like `image/png,image/jpeg`.
    */
@@ -98,28 +103,28 @@ export class FileUpload {
 
   @Listen('dragenter', { capture: false, passive: false })
   dragenterHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = true
     }
   }
 
   @Listen('dragover', { capture: false, passive: false })
   dragoverHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = true
     }
   }
 
   @Listen('dragleave', { capture: false, passive: false })
   dragleaveHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = false
     }
   }
 
   @Listen('drop', { capture: false, passive: false })
   dropHandler(event: DragEvent) {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = false
       const dataTransfer = event.dataTransfer
       if (dataTransfer) {
@@ -213,7 +218,7 @@ export class FileUpload {
   }
 
   removeFile(indexToRemove: number): void {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       const list = []
       const removedFiles = []
       for (let index = 0; index < this.files.length; index++) {
@@ -260,13 +265,13 @@ export class FileUpload {
     )
 
     return (
-      <Host class={['bal-file-upload', this.disabled || this.loading ? 'is-disabled' : ''].join(' ')}>
+      <Host class={['bal-file-upload', this.disabled || this.loading || this.readonly ? 'is-disabled' : ''].join(' ')}>
         <div class="file">
           <label
             class={[
               'file-label',
               this.isOver ? 'is-hovered' : '',
-              this.disabled || this.loading ? 'is-disabled' : '',
+              this.disabled || this.loading || this.readonly ? 'is-disabled' : '',
             ].join(' ')}
           >
             <input
@@ -275,6 +280,7 @@ export class FileUpload {
               name="resume"
               multiple={this.multiple}
               disabled={this.disabled || this.loading}
+              readonly={this.readonly}
               accept={this.accept}
               onChange={this.onChange}
               ref={el => (this.fileInput = el as HTMLInputElement)}