Skip to content

Commit 53fa8dd

Browse files
rugoncalvesrugoncalves
committed
Re-adding the properties push and pull
1 parent 39a9b1e commit 53fa8dd

File tree

6 files changed

+213
-5
lines changed

6 files changed

+213
-5
lines changed

‎core/api.txt‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,13 +628,26 @@ ion-col,prop,orderMd,string | undefined,undefined,false,false
628628
ion-col,prop,orderSm,string | undefined,undefined,false,false
629629
ion-col,prop,orderXl,string | undefined,undefined,false,false
630630
ion-col,prop,orderXs,string | undefined,undefined,false,false
631+
ion-col,prop,pull,string | undefined,undefined,false,false
632+
ion-col,prop,pullLg,string | undefined,undefined,false,false
633+
ion-col,prop,pullMd,string | undefined,undefined,false,false
634+
ion-col,prop,pullSm,string | undefined,undefined,false,false
635+
ion-col,prop,pullXl,string | undefined,undefined,false,false
636+
ion-col,prop,pullXs,string | undefined,undefined,false,false
637+
ion-col,prop,push,string | undefined,undefined,false,false
638+
ion-col,prop,pushLg,string | undefined,undefined,false,false
639+
ion-col,prop,pushMd,string | undefined,undefined,false,false
640+
ion-col,prop,pushSm,string | undefined,undefined,false,false
641+
ion-col,prop,pushXl,string | undefined,undefined,false,false
642+
ion-col,prop,pushXs,string | undefined,undefined,false,false
631643
ion-col,prop,size,string | undefined,undefined,false,false
632644
ion-col,prop,sizeLg,string | undefined,undefined,false,false
633645
ion-col,prop,sizeMd,string | undefined,undefined,false,false
634646
ion-col,prop,sizeSm,string | undefined,undefined,false,false
635647
ion-col,prop,sizeXl,string | undefined,undefined,false,false
636648
ion-col,prop,sizeXs,string | undefined,undefined,false,false
637649
ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
650+
ion-col,css-prop,--col-unit-size
638651
ion-col,css-prop,--ion-grid-column-padding
639652
ion-col,css-prop,--ion-grid-column-padding-lg
640653
ion-col,css-prop,--ion-grid-column-padding-md

‎core/src/components.d.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -951,6 +951,66 @@ export namespace Components {
951951
* The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
952952
*/
953953
"orderXs"?: string;
954+
/**
955+
* The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
956+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
957+
*/
958+
"pull"?: string;
959+
/**
960+
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
961+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
962+
*/
963+
"pullLg"?: string;
964+
/**
965+
* The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
966+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
967+
*/
968+
"pullMd"?: string;
969+
/**
970+
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
971+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
972+
*/
973+
"pullSm"?: string;
974+
/**
975+
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
976+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
977+
*/
978+
"pullXl"?: string;
979+
/**
980+
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
981+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
982+
*/
983+
"pullXs"?: string;
984+
/**
985+
* The amount to push the column, in terms of how many columns it should shift to the end of the total available.
986+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
987+
*/
988+
"push"?: string;
989+
/**
990+
* The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
991+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
992+
*/
993+
"pushLg"?: string;
994+
/**
995+
* The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
996+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
997+
*/
998+
"pushMd"?: string;
999+
/**
1000+
* The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
1001+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
1002+
*/
1003+
"pushSm"?: string;
1004+
/**
1005+
* The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
1006+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
1007+
*/
1008+
"pushXl"?: string;
1009+
/**
1010+
* The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
1011+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
1012+
*/
1013+
"pushXs"?: string;
9541014
/**
9551015
* The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
9561016
*/
@@ -6861,6 +6921,66 @@ declare namespace LocalJSX {
68616921
* The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
68626922
*/
68636923
"orderXs"?: string;
6924+
/**
6925+
* The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
6926+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6927+
*/
6928+
"pull"?: string;
6929+
/**
6930+
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
6931+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6932+
*/
6933+
"pullLg"?: string;
6934+
/**
6935+
* The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
6936+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6937+
*/
6938+
"pullMd"?: string;
6939+
/**
6940+
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
6941+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6942+
*/
6943+
"pullSm"?: string;
6944+
/**
6945+
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
6946+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6947+
*/
6948+
"pullXl"?: string;
6949+
/**
6950+
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
6951+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6952+
*/
6953+
"pullXs"?: string;
6954+
/**
6955+
* The amount to push the column, in terms of how many columns it should shift to the end of the total available.
6956+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6957+
*/
6958+
"push"?: string;
6959+
/**
6960+
* The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
6961+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6962+
*/
6963+
"pushLg"?: string;
6964+
/**
6965+
* The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
6966+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6967+
*/
6968+
"pushMd"?: string;
6969+
/**
6970+
* The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
6971+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6972+
*/
6973+
"pushSm"?: string;
6974+
/**
6975+
* The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
6976+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6977+
*/
6978+
"pushXl"?: string;
6979+
/**
6980+
* The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
6981+
* @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
6982+
*/
6983+
"pushXs"?: string;
68646984
/**
68656985
* The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
68666986
*/

‎core/src/components/col/col.tsx‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { ComponentInterface } from '@stencil/core';
2-
import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
2+
import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
3+
import { printIonWarning } from '@utils/logging';
34
import { matchBreakpoint } from '@utils/media';
45

56
import { getIonTheme } from '../../global/ionic-global';
67

8+
79
// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
810
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
911

@@ -89,6 +91,67 @@ export class Col implements ComponentInterface {
8991
*/
9092
@Prop() orderXl?: string;
9193

94+
/**
95+
* The amount to pull the column, in terms of how many columns it should shift to the start of
96+
* the total available.
97+
*/
98+
@Prop() pull?: string;
99+
/**
100+
* The amount to pull the column for xs screens, in terms of how many columns it should shift
101+
* to the start of the total available.
102+
*/
103+
@Prop() pullXs?: string;
104+
/**
105+
* The amount to pull the column for sm screens, in terms of how many columns it should shift
106+
* to the start of the total available.
107+
*/
108+
@Prop() pullSm?: string;
109+
/**
110+
* The amount to pull the column for md screens, in terms of how many columns it should shift
111+
* to the start of the total available.
112+
*/
113+
@Prop() pullMd?: string;
114+
/**
115+
* The amount to pull the column for lg screens, in terms of how many columns it should shift
116+
* to the start of the total available.
117+
*/
118+
@Prop() pullLg?: string;
119+
/**
120+
* The amount to pull the column for xl screens, in terms of how many columns it should shift
121+
* to the start of the total available.
122+
*/
123+
@Prop() pullXl?: string;
124+
/**
125+
* The amount to push the column, in terms of how many columns it should shift to the end
126+
* of the total available.
127+
*/
128+
@Prop() push?: string;
129+
/**
130+
* The amount to push the column for xs screens, in terms of how many columns it should shift
131+
* to the end of the total available.
132+
*/
133+
@Prop() pushXs?: string;
134+
/**
135+
* The amount to push the column for sm screens, in terms of how many columns it should shift
136+
* to the end of the total available.
137+
*/
138+
@Prop() pushSm?: string;
139+
/**
140+
* The amount to push the column for md screens, in terms of how many columns it should shift
141+
* to the end of the total available.
142+
*/
143+
@Prop() pushMd?: string;
144+
/**
145+
* The amount to push the column for lg screens, in terms of how many columns it should shift
146+
* to the end of the total available.
147+
*/
148+
@Prop() pushLg?: string;
149+
/**
150+
* The amount to push the column for xl screens, in terms of how many columns it should shift
151+
* to the end of the total available.
152+
*/
153+
@Prop() pushXl?: string;
154+
92155
/**
93156
* The size of the column, in terms of how many columns it should take up out of the total
94157
* available. If `"auto"` is passed, the column will be the size of its content.

‎packages/angular/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -572,14 +572,14 @@ export declare interface IonChip extends Components.IonChip {}
572572

573573

574574
@ProxyCmp({
575-
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
575+
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
576576
})
577577
@Component({
578578
selector: 'ion-col',
579579
changeDetection: ChangeDetectionStrategy.OnPush,
580580
template: '<ng-content></ng-content>',
581581
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
582-
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
582+
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
583583
})
584584
export class IonCol {
585585
protected el: HTMLIonColElement;

‎packages/angular/standalone/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -642,14 +642,14 @@ export declare interface IonChip extends Components.IonChip {}
642642

643643
@ProxyCmp({
644644
defineCustomElementFn: defineIonCol,
645-
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
645+
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme']
646646
})
647647
@Component({
648648
selector: 'ion-col',
649649
changeDetection: ChangeDetectionStrategy.OnPush,
650650
template: '<ng-content></ng-content>',
651651
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
652-
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
652+
inputs: ['mode', 'offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'order', 'orderLg', 'orderMd', 'orderSm', 'orderXl', 'orderXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs', 'theme'],
653653
standalone: true
654654
})
655655
export class IonCol {

‎packages/vue/src/proxies.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,18 @@ export const IonCol: StencilVueComponent<JSX.IonCol> = /*@__PURE__*/ defineConta
286286
'orderMd',
287287
'orderLg',
288288
'orderXl',
289+
'pull',
290+
'pullXs',
291+
'pullSm',
292+
'pullMd',
293+
'pullLg',
294+
'pullXl',
295+
'push',
296+
'pushXs',
297+
'pushSm',
298+
'pushMd',
299+
'pushLg',
300+
'pushXl',
289301
'size',
290302
'sizeXs',
291303
'sizeSm',

0 commit comments

Comments
 (0)