Skip to content

Commit

Permalink
fix(panel, flow-item): fix header padding regression (#9936)
Browse files Browse the repository at this point in the history
**Related Issue:** #9921

## Summary

Fix unintentional header padding adjustment for medium/default scale.
  • Loading branch information
jcfranco authored Aug 1, 2024
1 parent 1661362 commit f618380
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 2 deletions.
100 changes: 100 additions & 0 deletions packages/calcite-components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,93 +9,193 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, Sync } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
import { ButtonMessages } from "./components/button/assets/button/t9n";
import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { OverlayPositioning as OverlayPositioning1 } from "./components";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
import { InputMessages } from "./components/input/assets/input/t9n";
import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
import { ListDragDetail } from "./components/list/interfaces";
import { ItemData } from "./components/list-item/interfaces";
import { ListMessages } from "./components/list/assets/list/t9n";
import { SelectionAppearance } from "./components/list/resources";
import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
import { MenuMessages } from "./components/menu/assets/menu/t9n";
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
import { ModalMessages } from "./components/modal/assets/modal/t9n";
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
import { PopoverMessages } from "./components/popover/assets/popover/t9n";
import { RatingMessages } from "./components/rating/assets/rating/t9n";
import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
import { TableMessages } from "./components/table/assets/table/t9n";
import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
import { TipMessages } from "./components/tip/assets/tip/t9n";
import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, Sync } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
export { ButtonMessages } from "./components/button/assets/button/t9n";
export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { DateLocaleData } from "./components/date-picker/utils";
export { HoverRange } from "./utils/date";
export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { OverlayPositioning as OverlayPositioning1 } from "./components";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
export { InputMessages } from "./components/input/assets/input/t9n";
export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
export { ListDragDetail } from "./components/list/interfaces";
export { ItemData } from "./components/list-item/interfaces";
export { ListMessages } from "./components/list/assets/list/t9n";
export { SelectionAppearance } from "./components/list/resources";
export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
export { MenuMessages } from "./components/menu/assets/menu/t9n";
export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
export { ModalMessages } from "./components/modal/assets/modal/t9n";
export { NoticeMessages } from "./components/notice/assets/notice/t9n";
export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
export { PopoverMessages } from "./components/popover/assets/popover/t9n";
export { RatingMessages } from "./components/rating/assets/rating/t9n";
export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
export { TableMessages } from "./components/table/assets/table/t9n";
export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
export { TipMessages } from "./components/tip/assets/tip/t9n";
export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
Expand Down
11 changes: 9 additions & 2 deletions packages/calcite-components/src/components/panel/panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

:host([scale="s"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
--calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available

.header-content {
.heading {
Expand All @@ -34,6 +35,7 @@

:host([scale="m"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-md);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);

.header-content {
.heading {
Expand All @@ -48,6 +50,7 @@

:host([scale="l"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);

.header-content {
.heading {
Expand Down Expand Up @@ -163,11 +166,15 @@
}

.content-top,
.content-bottom,
.header-content {
.content-bottom {
padding: var(--calcite-internal-panel-default-padding);
}

.header-content {
padding-block: var(--calcite-internal-panel-header-vertical-padding);
padding-inline: var(--calcite-internal-panel-default-padding);
}

.footer {
@apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
border-block-start: 1px solid var(--calcite-color-border-3);
Expand Down

0 comments on commit f618380

Please sign in to comment.