fix(): fix usage of depricated is-empty to work in bal-radio

baloise · Nov 17, 2022 · 910a5ef · 910a5ef
1 parent f051f47
commit 910a5ef
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/components/src/components/bal-list/bal-list.tsx b/packages/components/src/components/bal-list/bal-list.tsx
@@ -44,6 +44,9 @@ export class List {
    */
   @Prop() inMainNav = false
 
+  componentWillLoad() {
+    this.invertedHandler()
+  }
   render() {
     const block = BEM.block('list')
 

diff --git a/packages/components/src/components/form/bal-radio/bal-radio.tsx b/packages/components/src/components/form/bal-radio/bal-radio.tsx
@@ -66,8 +66,10 @@ export class Radio implements ComponentInterface, Loggable {
    */
   @Prop() isEmpty = false
   @Watch('isEmpty') isEmptyHandler() {
-    this.labelHidden = this.isEmpty
-    console.warn('[DEPRECATED] - Use label-hidden instead')
+    if (this.isEmpty) {
+      this.labelHidden = this.isEmpty
+      console.warn('[DEPRECATED] - Use label-hidden instead')
+    }
   }
 
   /**
@@ -240,6 +242,10 @@ export class Radio implements ComponentInterface, Loggable {
 
   private onKeydown = (ev: any) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key))
 
+  componentWillLoad() {
+    this.isEmptyHandler()
+  }
+
   /**
    * RENDER
    * ------------------------------------------------------
@@ -272,6 +278,7 @@ export class Radio implements ComponentInterface, Loggable {
         }}
         onClick={this.onClick}
       >
+        g{' '}
         <input
           class={{
             ...inputEl.class(),

diff --git a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts
@@ -125,7 +125,7 @@ export const RadioBoxes = args => ({
         <div @click="checkB()" :class="value === '2' ? 'has-background-light-blue':''" class="clickable is-flex px-4 py-3 is-flex-direction-column is-justify-content-center is-align-items-center has-border-primary has-radius">
           <img src="https://www.baloise.ch/dam/jcr:3635255e-33e7-4adf-8b3e-99954faf6036/reiseversicherung.svg" >
           <p class="has-text-blue mb-2">Other Label</p>
-          <bal-radio class="p-0" name="box-example" value="2" label-hidden></bal-radio>
+          <bal-radio class="p-0" name="box-example" value="2" is-empty></bal-radio>
         </div>
       </div>
     </div>