Skip to content

Commit

Permalink
docs: update migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamdehaven
adamdehaven committed Nov 1, 2023
1 parent 9012fc7 commit ef617b8
Showing 1 changed file with 72 additions and 81 deletions.
153 changes: 72 additions & 81 deletions docs/guide/migrating-to-version-9.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@ Kongponents styles are no longer designed to be utilized standalone, separately

### KAlert

#### Structure

#### Constants, Types & Interfaces

* `appearances` const is no longer exported by the KAlert component. Instead, you can import `AlertAppearances` from `@kong/kongponents` directly.

#### Props

#### Slots

#### Events

#### Structure

#### Constants, Types & Interfaces

* `appearances` const is no longer exported by the KAlert component. Instead, you can import `AlertAppearances` from `@kong/kongponents` directly.

### KBadge

#### Structure
Expand All @@ -40,17 +40,8 @@ Kongponents styles are no longer designed to be utilized standalone, separately

### KBreadcrumbs


### KButton

#### Structure

* `icon-btn` class has been renamed to `icon-button`

#### Constants, Types & Interfaces

* `appearances` and `sizes` constants are no longer exported by the KButton component. Instead, you can import `ButtonAppearances` and `ButtonSizes` from `@kong/kongponents` directly

#### Props

* some values `appearance` prop accepts were changed:
Expand All @@ -68,6 +59,14 @@ Kongponents styles are no longer designed to be utilized standalone, separately

* `icon` slot is removed (TODO: [beta])

#### Structure

* `icon-btn` class has been renamed to `icon-button`

#### Constants, Types & Interfaces

* `appearances` and `sizes` constants are no longer exported by the KButton component. Instead, you can import `ButtonAppearances` and `ButtonSizes` from `@kong/kongponents` directly

### KCard


Expand All @@ -76,39 +75,32 @@ Kongponents styles are no longer designed to be utilized standalone, separately

### KCheckbox

#### Props

* `testMode` prop has been removed
* `help` property of `labelAttributes` prop has been deprecated in favor of `info`

#### Structure

* `k-input` class has been changed to `checkbox-input`
* `k-checkbox-label` class has been changed to `checkbox-label`
* `k-checkbox-description` class has been changed to `checkbox-description`
* `has-desc` class has been been changed to `has-description`

#### Constants, Types & Interfaces
### KCodeBlock

#### Props

* `testMode` prop has been removed
* `help` property of `labelAttributes` prop has been deprecated in favor of `info`
* New `maxHeight` prop to control the `max-height` of the code block. Defaults to `none`

#### Slots

#### Events

### KCodeBlock

#### Structure

#### Constants, Types & Interfaces

#### Props

* New `maxHeight` prop to control the `max-height` of the code block. Defaults to `none`

#### Slots

#### Events


### KCollapse


Expand All @@ -119,6 +111,16 @@ Kongponents styles are no longer designed to be utilized standalone, separately

Component has been renamed to `KDropdown`

#### Props

* `label` prop has been deprecated in favor of the new `trigger-text` prop (usage is the same)
* `appearance` prop has been changed in favor of the `selectionMenu` prop for the selection menu functionality. `appearance` now controls the underlying `KButton` `appearance` prop (note that default `appearance` for component when `selectionMenu` is `true` changed from `tertiary` to `primary`)
* `buttonAppearance` prop has been removed in favor of `appearance`, still controlling the `KButton` `appearance` prop
* `testMode` prop has been removed
* `icon` prop is removed (TODO: [beta])
* `caretColor` prop is removed
* `isDangerous` `KDropdownItem` prop has been deprecated in favor of `danger`

#### Structure

* `k-dropdown-menu` class has been removed (`k-dropdown` class remains)
Expand All @@ -139,20 +141,6 @@ Component has been renamed to `KDropdown`
* `AppearanceArray` const has been removed
* `Appearance` type has been removed

#### Props

* `label` prop has been deprecated in favor of the new `trigger-text` prop (usage is the same)
* `appearance` prop has been changed in favor of the `selectionMenu` prop for the selection menu functionality. `appearance` now controls the underlying `KButton` `appearance` prop (note that default `appearance` for component when `selectionMenu` is `true` changed from `tertiary` to `primary`)
* `buttonAppearance` prop has been removed in favor of `appearance`, still controlling the `KButton` `appearance` prop
* `testMode` prop has been removed
* `icon` prop is removed (TODO: [beta])
* `caretColor` prop is removed
* `isDangerous` `KDropdownItem` prop has been deprecated in favor of `danger`

#### Slots

#### Events

### KEmptyState


Expand All @@ -170,17 +158,6 @@ Component has been renamed to `KDropdown`

### KInput

#### Structure

* `form-control` class has been removed
* `over-char-limit` class has been removed
* `help` class has been changed to `help-text`

#### Constants, Types & Interfaces

* `SizeArray` and `IconPositionArray` constants have been removed
* `Size` and `IconPosition` types have been removed

#### Props

* `overlayLabel` prop has been removed
Expand All @@ -198,34 +175,36 @@ Component has been renamed to `KDropdown`

* `icon:click` event has been removed. Instead, when using `before` and/or `after` slots, you can provide your custom click handlers bound to clicks on slotted content. See KInput's [slots](/components/input#after) for more details

### KInputSwitch
#### Structure

* `form-control` class has been removed
* `over-char-limit` class has been removed
* `help` class has been changed to `help-text`

### KLabel
#### Constants, Types & Interfaces

#### Structure
* `SizeArray` and `IconPositionArray` constants have been removed
* `Size` and `IconPosition` types have been removed

* `k-input-label` class has been renamed to `k-label`
### KInputSwitch

#### Constants, Types & Interfaces
### KLabel

#### Props

* `help` prop has been deprecated in favor of `info`
* `testMode` prop has been removed

### KMenu
#### Structure

* `k-input-label` class has been renamed to `k-label`

### KMenu

### KMethod Badge


### KModal

#### Structure

#### Constants, Types & Interfaces

#### Props

* New `maxWidth` prop to control the `max-width` of the modal. Defaults to `500px`
Expand All @@ -234,6 +213,10 @@ Component has been renamed to `KDropdown`

#### Events

#### Structure

#### Constants, Types & Interfaces


### KModalFullscreen

Expand All @@ -249,8 +232,6 @@ Component has been renamed to `KDropdown`

### KPrompt

#### Constants, Types & Interfaces

#### Props

* New `maxHeight` prop to control the `max-height` of the prompt. Defaults to `400px`
Expand All @@ -259,7 +240,7 @@ Component has been renamed to `KDropdown`

#### Events


#### Constants, Types & Interfaces

### Komponent

Expand All @@ -271,31 +252,24 @@ Removed as of `v9`. Use `KTooltip` instead.

### KRadio

#### Structure

* `k-input` class on the `input[type="radio"]` has been changed to `radio-input`
* `k-radio-default` class has been removed
* `k-radio-card` class has been changed to `radio-card`
* `k-radio-label` class has been changed to `radio-label`
* `k-radio-description` class has been changed to `radio-description`

#### Constants, Types & Interfaces

#### Props

* `testMode` prop has been removed
* `type` prop has been deprecated in favor of `card` prop
* `help` property of `labelAttributes` prop has been deprecated in favor of `info`

#### Slots
#### Structure

#### Events
* `k-input` class on the `input[type="radio"]` has been changed to `radio-input`
* `k-radio-default` class has been removed
* `k-radio-card` class has been changed to `radio-card`
* `k-radio-label` class has been changed to `radio-label`
* `k-radio-description` class has been changed to `radio-description`

### Krumbs

Removed as of `v9`. Use `KBreadcumbs` instead.


### KSegmentedControl


Expand Down Expand Up @@ -334,3 +308,20 @@ Removed as of `v9`. Use `KBreadcumbs` instead.

### KView Switcher

<style lang="scss" scoped>
// Add a border above component headings
h4 + h3,
p + h3,
ul + h3 {
position: relative;

&:before {
content: '';
top: -10px;
width: 100%;
height: 1px;
background: var(--vp-c-divider);
position: absolute;
}
}
</style>

0 comments on commit ef617b8

Please sign in to comment.