Skip to content

Commit c95c403

Browse files
deleoniodeleonio
authored
fix: update layout classes for better responsiveness (#7631)
2 parents 9cc0b3e + c7dfc93 commit c95c403

File tree

1 file changed

+23
-21
lines changed

1 file changed

+23
-21
lines changed

‎packages/samples/react/src/scenarios/change-tabindex.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const ChangeTabindex: FC = () => {
3737

3838
<div className="w-full grid gap-4">
3939
<KolCard _label="Button" _level={0}>
40-
<div className="flex flex-wrap gap-4">
40+
<div className="grid sm:flex flex-wrap gap-4 items-end">
4141
<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
4242
<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
4343
<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
@@ -46,7 +46,7 @@ export const ChangeTabindex: FC = () => {
4646
</KolCard>
4747

4848
<KolCard _label="ButtonLink" _level={0}>
49-
<div className="flex flex-wrap gap-4">
49+
<div className="grid sm:flex flex-wrap gap-4 items-end">
5050
<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
5151
<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
5252
<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
@@ -55,7 +55,7 @@ export const ChangeTabindex: FC = () => {
5555
</KolCard>
5656

5757
<KolCard _label="Combobox" _level={0}>
58-
<div className="flex flex-wrap gap-4">
58+
<div className="grid sm:flex flex-wrap gap-4 items-end">
5959
<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
6060
<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
6161
<KolCombobox
@@ -72,7 +72,7 @@ export const ChangeTabindex: FC = () => {
7272
</KolCard>
7373

7474
<KolCard _label="InputCheckbox" _level={0}>
75-
<div className="flex flex-wrap gap-4">
75+
<div className="grid sm:flex flex-wrap gap-4 items-end">
7676
<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
7777
<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
7878
<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
@@ -81,7 +81,7 @@ export const ChangeTabindex: FC = () => {
8181
</KolCard>
8282

8383
<KolCard _label="InputColor" _level={0}>
84-
<div className="flex flex-wrap gap-4">
84+
<div className="grid sm:flex flex-wrap gap-4 items-end">
8585
<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
8686
<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
8787
<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -90,7 +90,7 @@ export const ChangeTabindex: FC = () => {
9090
</KolCard>
9191

9292
<KolCard _label="InputDate" _level={0}>
93-
<div className="flex flex-wrap gap-4">
93+
<div className="grid sm:flex flex-wrap gap-4 items-end">
9494
<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
9595
<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
9696
<KolInputDate
@@ -105,7 +105,7 @@ export const ChangeTabindex: FC = () => {
105105
</KolCard>
106106

107107
<KolCard _label="InputEmail" _level={0}>
108-
<div className="flex flex-wrap gap-4">
108+
<div className="grid sm:flex flex-wrap gap-4 items-end">
109109
<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
110110
<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
111111
<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -114,7 +114,7 @@ export const ChangeTabindex: FC = () => {
114114
</KolCard>
115115

116116
<KolCard _label="InputFile" _level={0}>
117-
<div className="flex flex-wrap gap-4">
117+
<div className="grid sm:flex flex-wrap gap-4 items-end">
118118
<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
119119
<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
120120
<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -123,7 +123,7 @@ export const ChangeTabindex: FC = () => {
123123
</KolCard>
124124

125125
<KolCard _label="InputNumber" _level={0}>
126-
<div className="flex flex-wrap gap-4">
126+
<div className="grid sm:flex flex-wrap gap-4 items-end">
127127
<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
128128
<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
129129
<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -132,7 +132,7 @@ export const ChangeTabindex: FC = () => {
132132
</KolCard>
133133

134134
<KolCard _label="InputPassword" _level={0}>
135-
<div className="flex flex-wrap gap-4">
135+
<div className="grid sm:flex flex-wrap gap-4 items-end">
136136
<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
137137
<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
138138
<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -141,7 +141,7 @@ export const ChangeTabindex: FC = () => {
141141
</KolCard>
142142

143143
<KolCard _label="InputRadio" _level={0}>
144-
<div className="flex flex-wrap gap-4">
144+
<div className="grid sm:flex flex-wrap gap-4 items-end">
145145
<KolInputRadio
146146
_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
147147
_label="InputRadio 1, Tabindex 4"
@@ -169,7 +169,7 @@ export const ChangeTabindex: FC = () => {
169169
</KolCard>
170170

171171
<KolCard _label="InputRange" _level={0}>
172-
<div className="flex flex-wrap gap-4">
172+
<div className="grid sm:flex flex-wrap gap-4 items-end">
173173
<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
174174
<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
175175
<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -178,7 +178,7 @@ export const ChangeTabindex: FC = () => {
178178
</KolCard>
179179

180180
<KolCard _label="InputText" _level={0}>
181-
<div className="flex flex-wrap gap-4">
181+
<div className="grid sm:flex flex-wrap gap-4 items-end">
182182
<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
183183
<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
184184
<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -187,7 +187,7 @@ export const ChangeTabindex: FC = () => {
187187
</KolCard>
188188

189189
<KolCard _label="LinkButton" _level={0}>
190-
<div className="flex flex-wrap gap-4">
190+
<div className="grid sm:flex flex-wrap gap-4 items-end">
191191
<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
192192
<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
193193
<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
@@ -196,14 +196,16 @@ export const ChangeTabindex: FC = () => {
196196
</KolCard>
197197

198198
<KolCard _label="Link" _level={0}>
199-
<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
200-
<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
201-
<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
202-
<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
199+
<div className="grid sm:flex flex-wrap gap-4 items-end">
200+
<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
201+
<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
202+
<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
203+
<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
204+
</div>
203205
</KolCard>
204206

205207
<KolCard _label="SingleSelect" _level={0}>
206-
<div className="flex flex-wrap gap-4">
208+
<div className="grid sm:flex flex-wrap gap-4 items-end">
207209
<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
208210
<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
209211
<KolSingleSelect
@@ -219,7 +221,7 @@ export const ChangeTabindex: FC = () => {
219221
</KolCard>
220222

221223
<KolCard _label="SplitButton" _level={0}>
222-
<div className="flex flex-wrap gap-4">
224+
<div className="grid sm:flex flex-wrap gap-4 items-end">
223225
<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
224226
Dropdown-Inhalt
225227
</KolSplitButton>
@@ -236,7 +238,7 @@ export const ChangeTabindex: FC = () => {
236238
</KolCard>
237239

238240
<KolCard _label="Textarea" _level={0}>
239-
<div className="flex flex-wrap gap-4">
241+
<div className="grid sm:flex flex-wrap gap-4 items-end">
240242
<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
241243
<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
242244
<KolTextarea

0 commit comments

Comments
 (0)
⚡