null value

Author: burieberry

packages/boxel-ui/addon/src/components/color-palette/index.gts

@@ -10,8 +10,8 @@ import IconButton from '../icon-button/index.gts';
 
 interface Signature {
   Args: {
-    color: string;
-    onChange: (color: string) => void;
+    color: string | null;
+    onChange: (color: string | null) => void;
   };
   Element: HTMLDivElement;
 }
@@ -62,7 +62,7 @@ export default class ColorPalette extends Component<Signature> {
               @width='16px'
               @height='16px'
               class='remove'
-              {{on 'click' (fn @onChange '')}}
+              {{on 'click' (fn @onChange null)}}
               aria-label='Unset color'
             />
           </div>

packages/boxel-ui/addon/src/components/color-palette/usage.gts

@@ -6,9 +6,9 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPalette from './index.gts';
 
 export default class ColorPaletteUsage extends Component {
-  @tracked color = '';
+  @tracked color: string | null = null;
 
-  private handleColorChange = (newColor: string) => {
+  private handleColorChange = (newColor: string | null) => {
     this.color = newColor;
   };
 

packages/boxel-ui/addon/src/components/color-picker/index.gts

@@ -3,9 +3,9 @@ import Component from '@glimmer/component';
 
 interface Signature {
   Args: {
-    color: string;
+    color: string | null;
     disabled?: boolean;
-    onChange: (color: string) => void;
+    onChange: (color: string | null) => void;
     showHexString?: boolean;
   };
   Element: HTMLDivElement;

packages/boxel-ui/addon/src/components/color-picker/usage.gts

@@ -6,11 +6,11 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPicker from './index.gts';
 
 export default class ColorPickerUsage extends Component {
-  @tracked color = '';
+  @tracked color: string | null = null;
   @tracked disabled = false;
   @tracked showHexString = true;
 
-  private onChange = (newColor: string) => {
+  private onChange = (newColor: string | null) => {
     this.color = newColor;
   };
 

packages/experiments-realm/blog-post.gts

@@ -110,6 +110,9 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
 
       .categories {
         margin-top: var(--boxel-sp);
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs);
       }
 
       .category {
@@ -215,10 +218,10 @@ class FittedTemplate extends Component<typeof BlogPost> {
         height: 20px;
         margin-left: 7px;
         display: none;
+        overflow: hidden;
       }
 
       .category {
-        font-size: 0.6rem;
         height: 20px;
         padding: 3px 4px;
         border-radius: var(--boxel-border-radius-sm);
@@ -710,7 +713,11 @@ export class BlogPost extends CardDef {
           {{/if}}
           {{#if @model.categories.length}}
             <div class='categories'>
-              <@fields.categories @format='atom' @displayContainer={{false}} />
+              {{#each @model.categories as |category|}}
+                <div class='category' style={{categoryStyle category}}>
+                  {{category.shortName}}
+                </div>
+              {{/each}}
             </div>
           {{/if}}
           <h1><@fields.title /></h1>
@@ -841,6 +848,13 @@ export class BlogPost extends CardDef {
         .featured-image + .categories {
           margin-top: var(--boxel-sp-xl);
         }
+        .category {
+          display: inline-block;
+          padding: 3px var(--boxel-sp-xxxs);
+          border-radius: var(--boxel-border-radius-sm);
+          font: 500 var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
+        }
       </style>
     </template>
   };