Merge pull request #361 from MisRob/kdropdown-updates

"Update kdropdown menu api #346" follow-up

CHANGELOG.md

@@ -3,14 +3,30 @@
 Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page.
 
 ## Develop (version not yet known)
+
 - [#351] - Wrap `KCheckbox` default slot's content in <label>
 - [#355] - Add `KSelect` to KDS
-- [#346] - Update KDropdownMenu API: `KDropdownMenu` no longer contains a button. `KDropdownMenu` can be used in `KButton` or `KIconButton` `slots`. Both `slots` and `text` can now be used in `KButton` - `slots` do not take precedence over `text`.
+- [#346] - `KDropdownMenu` no longer contains a button. Relatedly, all props that relate to buttons were removed from `KDropdownMenu`, namely `text`, `appearance`, `disabled`. Therefore, when migrating to this version, `KDropdownMenu` needs to be wrapped in `KButton` or `KIconButton`'s' `menu` slot and these obsolete props moved to button components from `KDropdownMenu`.
+- [#346] - `KDropdownMenu` has a new prop `hasIcons` (whether or not the options display an icon). 
+- [#346] - `KButton`: The default slot doesn't take precedence over `text` prop anymore (the default slot content will be rendered above `text` if provided).
+- [#361] - `KButton` exposes `hasDropdown` prop which will show the dropdown icon in a button.
+- [#361] - Fixes 'Property or method "disabled" is not defined on the instance but referenced during render.' raised by `KDropdownMenu`
+
+<!-- Referenced PRs -->
+[#351]: https://github.com/learningequality/kolibri-design-system/pull/351
+[#355]: https://github.com/learningequality/kolibri-design-system/pull/355
+[#346]: https://github.com/learningequality/kolibri-design-system/pull/346
+[#361]: https://github.com/learningequality/kolibri-design-system/pull/361
 
 ## Version 1.4.x
+
 - [#185] - Handle arrow key navigation and improve focusOutline
 - [#338] - Allow for new 'nav' slot inline in the toolbar
 
+<!-- Referenced PRs -->
+[#185]: https://github.com/learningequality/kolibri-design-system/pull/185
+[#338]: https://github.com/learningequality/kolibri-design-system/pull/338
+
 ## Version 1.3.1
 
 - [#309] - Add jest testing environment to KDS

docs/pages/buttons.vue

@@ -137,8 +137,7 @@
         Buttons can also have drop-down menus. 
       </p>
       <p> 
-        The API for this has been updated, and now the <code>KDropdownMenu</code> component can be added using <code>template</code> with <code>#menu</code> to a <code>slot</code> in either a <code>KButton</code> or a <code>KIconButton</code>. 
-        Previously, the <code>KDropdownMenu</code> component was responsible for the button rendering as well as the menu, but now, it only manages the menu itself.
+        <code>KDropdownMenu</code> component can be added using <code>#menu</code> slot in either a <code>KButton</code> or a <code>KIconButton</code>. 
       </p>
 
       <DocsShow>
@@ -175,7 +174,7 @@
         </KButtonGroup>
 
       </DocsShow>
-      <p>For more guidance, see the <code>KDropdownMenu</code> component.</p>
+      <p>For more guidance, see the <DocsLibraryLink component="KDropdownMenu" /> component.</p>
     </DocsPageSection>
 
     <DocsPageSection title="Visual specs" anchor="#specs" />

docs/pages/kdropdownmenu.vue

@@ -10,7 +10,6 @@
         Notable possible for configuring the menu include: icons, text, secondary text, and dividers.
       </p>
       <p>
-        Prior to 09/2022, this component also managed the button associated with the dropdown menu, but the API has changed for a clearer division of responsibilities. 
         Please see the <DocsInternalLink href="/buttons#dropdowns" text="Dropdown section of the Buttons and links page" /> on the buttons page for more details about how to use with a button, and a code example.
       </p>
     </DocsPageSection>

lib/KDropdownMenu.vue

@@ -1,7 +1,6 @@
 <template>
 
   <UiPopover
-    v-if="!disabled"
     ref="popover"
     :z-index="12"
     :containFocus="true"

lib/buttons-and-links/KButton.vue

@@ -24,12 +24,10 @@
     />
     <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
     <slot name="menu"></slot>
-    <!-- @slot Slot alternative to the `text` prop -->
+
     <slot v-if="$slots.default"></slot>
 
-    <template>
-      <span class="link-text" :style="textStyle">{{ text }}</span>
-    </template>
+    <span class="link-text" :style="textStyle">{{ text }}</span>
 
     <!-- @slot Slot alternative to the `iconAfter` prop -->
     <slot name="iconAfter"></slot>
@@ -90,8 +88,7 @@
         default: 'button',
       },
       /**
-       * @ignore
-       * Adds a dropdown arrow - internal use only
+       * Adds a dropdown arrow
        */
       hasDropdown: {
         type: Boolean,