fix: disabled removabled when selected or toggleable (#2759)

## Description:
Closes: #2398.
Previous PR: #2682

Added a variable _isRemovable_ to the sd-tag component. This variable
represents the _removable_ attribute being enabled, while checking if
the _toggleable_ or _selected_ attributes are disabled. Then, replaced
every place that checked if the removable attribute was enabled for this
new variable.

Also added a note to the docs about this. Let me know if it is enough or
if we should create more emphasis.


## Definition of Reviewable:
- [x] Documentation is created/updated
- [x] relevant tickets are linked

---------

Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com>

Author: martascorreia

.changeset/fine-ways-take.md

@@ -0,0 +1,6 @@
+---
+'@solid-design-system/components': minor
+'@solid-design-system/docs': minor
+---
+
+Changed `sd-tag`'s attribute `removable` to be disabled if the attributes `selected` or `toggleable` are enabled

packages/components/src/components/tag/tag.test.ts

@@ -40,6 +40,32 @@ describe('<sd-tag>', () => {
     });
   });
 
+  describe('removable attribute behaviour with selected or toggleable', () => {
+    it('should ignore removable when selected', async () => {
+      el = await fixture<SdTag>(html`<sd-tag removable selected>Tag</sd-tag>`);
+      const removable = el.shadowRoot!.querySelector('[part="removable-indicator"]');
+      expect(removable).to.not.exist;
+    });
+
+    it('should ignore removable when toggleable', async () => {
+      el = await fixture<SdTag>(html`<sd-tag removable toggleable>Tag</sd-tag>`);
+      const removable = el.shadowRoot!.querySelector('[part="removable-indicator"]');
+      expect(removable).to.not.exist;
+    });
+
+    it('should ignore removable when both selected and toggleable', async () => {
+      el = await fixture<SdTag>(html`<sd-tag removable selected toggleable>Tag</sd-tag>`);
+      const removable = el.shadowRoot!.querySelector('[part="removable-indicator"]');
+      expect(removable).to.not.exist;
+    });
+
+    it('should show removable when neither selected nor toggleable', async () => {
+      el = await fixture<SdTag>(html`<sd-tag removable>Tag</sd-tag>`);
+      const removable = el.shadowRoot!.querySelector('[part="removable-indicator"]');
+      expect(removable).to.exist;
+    });
+  });
+
   sizes.forEach(size => {
     describe(`when passed a size attribute ${size}`, () => {
       it(`should be accessible when size is "${size}"`, async () => {

packages/components/src/components/tag/tag.ts

@@ -122,7 +122,8 @@ export default class SdTag extends SolidElement {
 
   render() {
     const isLink = this.isLink();
-    const tag = isLink ? literal`a` : this.removable ? literal`div` : literal`button`;
+    const isRemovable = this.removable && !this.selected && !this.toggleable;
+    const tag = isLink ? literal`a` : isRemovable ? literal`div` : literal`button`;
 
     /* eslint-disable lit/no-invalid-html */
     /* eslint-disable lit/binding-positions */
@@ -138,7 +139,7 @@ export default class SdTag extends SolidElement {
         aria-labelledby="content"
         aria-disabled=${this.disabled ? 'true' : 'false'}
         aria-pressed=${ifDefined(this.toggleable ? this.selected : undefined)}
-        tabindex=${this.disabled || this.removable ? '-1' : '0'}
+        tabindex=${this.disabled || isRemovable ? '-1' : '0'}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         class=${cx(
@@ -151,14 +152,14 @@ export default class SdTag extends SolidElement {
           }[this.size],
           {
             /* padding */
-            lg: !this.removable ? 'px-4 py-2' : 'pl-4 pr-3 py-2',
-            sm: !this.removable ? 'px-3 py-[5px]' : 'pl-3 pr-2 py-2'
+            lg: !isRemovable ? 'px-4 py-2' : 'pl-4 pr-3 py-2',
+            sm: !isRemovable ? 'px-3 py-[5px]' : 'pl-3 pr-2 py-2'
           }[this.size],
           /* colors */
           !this.selected
             ? cx(
                 'sd-tag--default-color-border sd-tag--default-color-text disabled:sd-tag--disabled-color-border disabled:text-neutral-500',
-                !this.removable
+                !isRemovable
                   ? 'sd-tag--default-color-background hover:border-primary-500 hover:text-primary-500 hover:sd-tag--default--hover-color-background'
                   : 'sd-tag--default-color-background has-[button:hover]:border-primary-500 has-[button:hover]:text-primary-500'
               )
@@ -169,7 +170,7 @@ export default class SdTag extends SolidElement {
         <slot name="icon-left" class=${cx('flex-shrink-0', this.size === 'lg' ? 'text-base' : 'text-[0.75rem]')}></slot>
         <slot id="content" part='content'></slot>
         ${
-          this.removable && !isLink
+          isRemovable && !isLink
             ? html` <button class="sd-interactive flex items-center" type="button" @click=${this.handleRemove}>
                 <slot part="removable-indicator" name="removable-indicator">
                   <sd-icon library="_internal" name="close" label=${this.localize.term('remove')}></sd-icon>

packages/docs/src/stories/components/tag.stories.ts

@@ -70,6 +70,7 @@ export const Selected = {
 
 /**
  * Use the `removable` attribute to include the removability indicator.
+ * This attribute is disabled when using the attributes `selected` or `toggleable`.
  *
  * __Hint:__ Combine the `sd-remove` event and `hide` method to visually hide the tag
  * when the removable button is triggered.

packages/docs/src/stories/components/tag.test.stories.ts

@@ -115,6 +115,28 @@ export const Disabled = {
   }
 };
 
+export const RemovableAndSelectedAndToggleable = {
+  name: 'Removable x Selected x Toggleable',
+  render: (args: any) => {
+    return html`
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'selected' },
+          y: { type: 'attribute', name: 'removable' }
+        },
+        args
+      })}
+      ${generateTemplate({
+        axis: {
+          x: { type: 'attribute', name: 'toggleable' },
+          y: { type: 'attribute', name: 'removable' }
+        },
+        args
+      })}
+    `;
+  }
+};
+
 /**
  * Use the `default` slot to add content to the tag.
  * Use the `removable-indicator` slot to change the removability indicator.
@@ -225,6 +247,7 @@ export const Combination = generateScreenshotStory([
   removableAndSize,
   iconLeft,
   Disabled,
+  RemovableAndSelectedAndToggleable,
   Slots,
   Parts,
   Mouseless