refactor: Dropped inline property

Author: rkaraivanov

src/components/tooltip/tooltip.spec.ts

@@ -76,7 +76,6 @@ describe('Tooltip', () => {
       expect(tooltip.dir).to.be.empty;
       expect(tooltip.open).to.be.false;
       expect(tooltip.disableArrow).to.be.false;
-      expect(tooltip.inline).to.be.false;
       expect(tooltip.offset).to.equal(6);
       expect(tooltip.placement).to.equal('top');
       expect(tooltip.anchor).to.be.undefined;

src/components/tooltip/tooltip.ts

@@ -34,11 +34,16 @@ type TooltipStateOptions = {
 };
 
 /**
+ * Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).
+ * It offers features such as placement customization, delays, sticky mode, and animations.
+ *
  * @element igc-tooltip
  *
- * @slot - default slot
+ * @slot - Default slot of the tooltip component.
  * @slot close-button - Slot for custom sticky-mode close action (e.g., an icon/button).
  *
+ * @csspart base - The wrapping container of the tooltip content.
+ *
  * @fires igcOpening - Emitted before the tooltip begins to open. Can be canceled to prevent opening.
  * @fires igcOpened - Emitted after the tooltip has successfully opened and is visible.
  * @fires igcClosing - Emitted before the tooltip begins to close. Can be canceled to prevent closing.
@@ -140,15 +145,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   @property({ attribute: 'disable-arrow', type: Boolean, reflect: true })
   public disableArrow = false;
 
-  /**
-   * Improves positioning for inline based elements, such as links.
-   *
-   * @attr inline
-   * @default false
-   */
-  @property({ type: Boolean, reflect: true })
-  public inline = false;
-
   /**
    * The offset of the tooltip from the anchor in pixels.
    *
@@ -420,7 +416,6 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         .arrowOffset=${this._arrowOffset}
         .shiftPadding=${8}
         ?open=${this.open}
-        ?inline=${this.inline}
         flip
         shift
       >

stories/tooltip.stories.ts

@@ -28,7 +28,12 @@ const metadata: Meta<IgcTooltipComponent> = {
   title: 'Tooltip',
   component: 'igc-tooltip',
   parameters: {
-    docs: { description: { component: '' } },
+    docs: {
+      description: {
+        component:
+          'Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus).\nIt offers features such as placement customization, delays, sticky mode, and animations.',
+      },
+    },
     actions: {
       handles: ['igcOpening', 'igcOpened', 'igcClosing', 'igcClosed'],
     },
@@ -47,13 +52,6 @@ const metadata: Meta<IgcTooltipComponent> = {
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
-    inline: {
-      type: 'boolean',
-      description:
-        'Improves positioning for inline based elements, such as links.',
-      control: 'boolean',
-      table: { defaultValue: { summary: 'false' } },
-    },
     offset: {
       type: 'number',
       description: 'The offset of the tooltip from the anchor in pixels.',
@@ -133,7 +131,6 @@ const metadata: Meta<IgcTooltipComponent> = {
   args: {
     open: false,
     disableArrow: false,
-    inline: false,
     offset: 6,
     placement: 'top',
     showTriggers: 'pointerenter',
@@ -152,8 +149,6 @@ interface IgcTooltipArgs {
   open: boolean;
   /** Whether to disable the rendering of the arrow indicator for the tooltip. */
   disableArrow: boolean;
-  /** Improves positioning for inline based elements, such as links. */
-  inline: boolean;
   /** The offset of the tooltip from the anchor in pixels. */
   offset: number;
   /** Where to place the floating element relative to the parent anchor element. */
@@ -327,7 +322,7 @@ export const Inline: Story = {
       </div>
     </igc-tooltip>
 
-    <igc-tooltip anchor="style-sheet-language" inline>
+    <igc-tooltip anchor="style-sheet-language">
       <p inert>
         A <strong>style sheet language</strong>, or
         <strong>style language</strong>, is a computer language that expresses
@@ -338,7 +333,7 @@ export const Inline: Story = {
       </p>
     </igc-tooltip>
 
-    <igc-tooltip class="rich-tooltip" anchor="html" inline>
+    <igc-tooltip class="rich-tooltip" anchor="html">
       <div inert class="rich">
         <p>
           Hypertext Markup Language (HTML) is the standard markup language for
@@ -511,10 +506,8 @@ export const Default: Story = {
 
 function createDynamicTooltip() {
   const tooltip = document.createElement('igc-tooltip');
-  tooltip.message = `I'm created on demand at ${new Date().toLocaleTimeString()}`;
+  tooltip.message = `Created on demand at ${new Date().toLocaleTimeString()}`;
   tooltip.anchor = 'dynamic-target';
-  tooltip.showTriggers = 'focus, click';
-  tooltip.hideTriggers = 'blur';
   tooltip.id = 'dynamic';
 
   const previousTooltip = document.querySelector('#dynamic');