Skip to content
This repository was archived by the owner on Jul 31, 2024. It is now read-only.

Commit 7b24cd4

Browse files
vikas-cldcvrvikas-cldcvr
authored
FDS-660 f-log improvements (#259)
* FDS-660 f-log improvements * FDS-660 f-log changes * FDS-660 colors updated * FDS-660 colors updated * FDS-660 changelogs updated
1 parent a29cba9 commit 7b24cd4

File tree

17 files changed

+492
-188
lines changed

17 files changed

+492
-188
lines changed

‎.storybook/preview.ts

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export const decorators = [
9999
...AwsIconPack
100100
}
101101
});
102+
ConfigUtil.setConfig({ theme: "f-ollion-dark" });
102103
return html`
103104
<div
104105
style="background-color:var(--color-surface-default);color:var(--color-text-default);font-family:var(--flow-font);height:inherit;padding: 0px;"

‎packages/flow-core/CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
# Change Log
44

5+
## [2.9.6] - 2024-03-28
6+
7+
### Improvements
8+
9+
- `f-tab` : `variant="no-border"` added.
10+
- color tokens updated.
11+
512
## [2.9.5] - 2024-03-21
613

714
### Bug Fixes

‎packages/flow-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ollion/flow-core",
3-
"version": "2.9.5",
3+
"version": "2.9.6",
44
"description": "Core package of flow design system",
55
"module": "dist/flow-core.es.js",
66
"main": "dist/flow-core.cjs.js",

‎packages/flow-core/src/components/f-button/f-button-global.scss

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
// applies styles to only f-button element.
66
f-button {
7+
touch-action: manipulation;
8+
user-select: none;
79
height: fit-content;
810
display: inline-flex;
911
flex: 0 0 auto;

‎packages/flow-core/src/components/f-icon-button/f-icon-button-global.scss

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
f-icon-button {
44
@include base();
5+
touch-action: manipulation;
6+
user-select: none;
57
display: inline-flex;
68
vertical-align: top;
79
align-items: center;

‎packages/flow-core/src/components/f-tab/f-tab-global.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ f-tab {
1313
&[variant="fill"] {
1414
--color-tab-background: var(--color-surface-secondary);
1515
}
16-
&[variant="transparent"] {
16+
&[variant="transparent"],
17+
&[variant="no-border"] {
1718
--color-tab-background: "transparent";
1819
}
1920
}

‎packages/flow-core/src/components/f-tab/f-tab.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class FTab extends FRoot {
4646
* @attribute Variants are various representations of f-tab. f-tab can have filled tabs, or transparent tabs.
4747
*/
4848
@property({ type: String, reflect: true })
49-
variant?: "fill" | "transparent" = "transparent";
49+
variant?: "fill" | "transparent" | "no-border" = "transparent";
5050

5151
/**
5252
* @attribute Vertical tabs can be enabled using direction property. By default tabs are horizontal.
@@ -190,6 +190,18 @@ For vertical f-tab, content can align to top, middle, or bottom.
190190
</f-div> `
191191
: "";
192192

193+
const getBorder = () => {
194+
if (this.variant === "transparent") {
195+
if (this.direction === "horizontal") {
196+
return `small solid default bottom`;
197+
} else {
198+
return `small solid default right`;
199+
}
200+
}
201+
202+
return "none";
203+
};
204+
193205
/**
194206
* Final html to render
195207
*/
@@ -206,11 +218,7 @@ For vertical f-tab, content can align to top, middle, or bottom.
206218
id="f-tab-section"
207219
.height=${this.direction === "vertical" ? "100%" : "hug-content"}
208220
.width=${this.direction === "vertical" ? "hug-content" : "fill-container"}
209-
.border=${this.variant === "transparent"
210-
? this.direction === "horizontal"
211-
? `small solid default bottom`
212-
: `small solid default right`
213-
: "none"}
221+
.border=${getBorder()}
214222
.direction=${this.direction === "vertical" ? "column" : "row"}
215223
.align=${this.tabsAlignment}
216224
overflow="scroll"

‎packages/flow-core/src/mixins/scss/_color-tokens.scss

+242-50
Large diffs are not rendered by default.

‎packages/flow-core/src/mixins/scss/_text-tokens.scss

+91-91
Original file line numberDiff line numberDiff line change
@@ -187,187 +187,187 @@
187187

188188
[data-theme="f-ollion-dark"],
189189
[data-theme="f-ollion-light"] {
190-
--text-heading-small-font: 14px;
190+
--text-code-medium-font: 14px;
191191

192-
--text-heading-small-lineheight: 1.2;
192+
--text-code-medium-lineheight: 1.4;
193193

194-
--text-heading-small-medium: 500;
194+
--text-code-medium-medium: 350;
195195

196-
--text-heading-small-bold: 600;
196+
--text-code-medium-bold: 400;
197197

198-
--text-heading-small-regular: 400;
198+
--text-code-medium-regular: 325;
199199

200-
--text-heading-small-fontfamily: "Rhymes Display", "Montserrat", sans-serif;
200+
--text-code-medium-fontfamily: "Operator Mono", monospace;
201201

202-
--text-heading-x-large-font: 24px;
202+
--text-code-x-small-font: 10px;
203203

204-
--text-heading-x-large-lineheight: 1.2;
204+
--text-code-x-small-lineheight: 1.4;
205205

206-
--text-heading-x-large-medium: 500;
206+
--text-code-x-small-medium: 350;
207207

208-
--text-heading-x-large-bold: 600;
208+
--text-code-x-small-bold: 400;
209209

210-
--text-heading-x-large-regular: 400;
210+
--text-code-x-small-regular: 325;
211211

212-
--text-heading-x-large-fontfamily: "Rhymes Display", "Montserrat", sans-serif;
212+
--text-code-x-small-fontfamily: "Operator Mono", monospace;
213213

214-
--text-heading-large-font: 20px;
214+
--text-code-large-font: 16px;
215215

216-
--text-heading-large-lineheight: 1.2;
216+
--text-code-large-lineheight: 1.4;
217217

218-
--text-heading-large-medium: 500;
218+
--text-code-large-medium: 350;
219219

220-
--text-heading-large-bold: 600;
220+
--text-code-large-bold: 400;
221221

222-
--text-heading-large-regular: 400;
222+
--text-code-large-regular: 325;
223223

224-
--text-heading-large-fontfamily: "Rhymes Display", "Montserrat", sans-serif;
224+
--text-code-large-fontfamily: "Operator Mono", monospace;
225225

226-
--text-heading-x-small-font: 12px;
226+
--text-code-small-font: 12px;
227227

228-
--text-heading-x-small-lineheight: 1.2;
228+
--text-code-small-lineheight: 1.4;
229229

230-
--text-heading-x-small-medium: 500;
230+
--text-code-small-medium: 500;
231231

232-
--text-heading-x-small-bold: 600;
232+
--text-code-small-bold: 400;
233233

234-
--text-heading-x-small-regular: 400;
234+
--text-code-small-regular: 325;
235235

236-
--text-heading-x-small-fontfamily: "Newsreader", "Montserrat", sans-serif;
236+
--text-code-small-fontfamily: "Inter", monospace;
237237

238-
--text-heading-medium-font: 16px;
238+
--text-code-x-large-font: 20px;
239239

240-
--text-heading-medium-lineheight: 1.2;
240+
--text-code-x-large-lineheight: 1.4;
241241

242-
--text-heading-medium-medium: 500;
242+
--text-code-x-large-medium: 350;
243243

244-
--text-heading-medium-bold: 600;
244+
--text-code-x-large-bold: 400;
245245

246-
--text-heading-medium-regular: 400;
246+
--text-code-x-large-regular: 325;
247247

248-
--text-heading-medium-fontfamily: "Rhymes Display", "Montserrat", sans-serif;
248+
--text-code-x-large-fontfamily: "Operator Mono", monospace;
249249

250-
--text-para-x-small-font: 10px;
250+
--text-heading-small-font: 14px;
251251

252-
--text-para-x-small-lineheight: 1.4;
252+
--text-heading-small-lineheight: 1.2;
253253

254-
--text-para-x-small-medium: 500;
254+
--text-heading-small-medium: 350;
255255

256-
--text-para-x-small-bold: 700;
256+
--text-heading-small-bold: 400;
257257

258-
--text-para-x-small-regular: 400;
258+
--text-heading-small-regular: 325;
259259

260-
--text-para-x-small-fontfamily: "ABC Oracle", "Montserrat", sans-serif;
260+
--text-heading-small-fontfamily: "Gotham", "Montserrat", sans-serif;
261261

262-
--text-para-small-font: 12px;
262+
--text-heading-x-large-font: 24px;
263263

264-
--text-para-small-lineheight: 1.4;
264+
--text-heading-x-large-lineheight: 1.2;
265265

266-
--text-para-small-medium: 500;
266+
--text-heading-x-large-medium: 350;
267267

268-
--text-para-small-bold: 700;
268+
--text-heading-x-large-bold: 400;
269269

270-
--text-para-small-regular: 400;
270+
--text-heading-x-large-regular: 325;
271271

272-
--text-para-small-fontfamily: "ABC Oracle", "Montserrat", sans-serif;
272+
--text-heading-x-large-fontfamily: "Gotham", "Montserrat", sans-serif;
273273

274-
--text-para-medium-font: 14px;
274+
--text-heading-large-font: 20px;
275275

276-
--text-para-medium-lineheight: 1.4;
276+
--text-heading-large-lineheight: 1.2;
277277

278-
--text-para-medium-medium: 500;
278+
--text-heading-large-medium: 350;
279279

280-
--text-para-medium-bold: 700;
280+
--text-heading-large-bold: 400;
281281

282-
--text-para-medium-regular: 400;
282+
--text-heading-large-regular: 325;
283283

284-
--text-para-medium-fontfamily: "ABC Oracle", "Montserrat", sans-serif;
284+
--text-heading-large-fontfamily: "Gotham", "Montserrat", sans-serif;
285285

286-
--text-para-large-font: 16px;
286+
--text-heading-x-small-font: 12px;
287287

288-
--text-para-large-lineheight: 1.4;
288+
--text-heading-x-small-lineheight: 1.2;
289289

290-
--text-para-large-medium: 500;
290+
--text-heading-x-small-medium: 350;
291291

292-
--text-para-large-bold: 700;
292+
--text-heading-x-small-bold: 400;
293293

294-
--text-para-large-regular: 400;
294+
--text-heading-x-small-regular: 325;
295295

296-
--text-para-large-fontfamily: "ABC Oracle", "Montserrat", sans-serif;
296+
--text-heading-x-small-fontfamily: "Gotham", "Montserrat", sans-serif;
297297

298-
--text-para-x-large-font: 20px;
298+
--text-heading-medium-font: 16px;
299299

300-
--text-para-x-large-lineheight: 1.4;
300+
--text-heading-medium-lineheight: 1.2;
301301

302-
--text-para-x-large-medium: 500;
302+
--text-heading-medium-medium: 350;
303303

304-
--text-para-x-large-bold: 700;
304+
--text-heading-medium-bold: 400;
305305

306-
--text-para-x-large-regular: 400;
306+
--text-heading-medium-regular: 325;
307307

308-
--text-para-x-large-fontfamily: "ABC Oracle", "Montserrat", sans-serif;
308+
--text-heading-medium-fontfamily: "Gotham", "Montserrat", sans-serif;
309309

310-
--text-code-medium-font: 14px;
310+
--text-para-x-small-font: 10px;
311311

312-
--text-code-medium-lineheight: 1.4;
312+
--text-para-x-small-lineheight: 1.4;
313313

314-
--text-code-medium-medium: 350;
314+
--text-para-x-small-medium: 350;
315315

316-
--text-code-medium-bold: 400;
316+
--text-para-x-small-bold: 400;
317317

318-
--text-code-medium-regular: 325;
318+
--text-para-x-small-regular: 325;
319319

320-
--text-code-medium-fontfamily: "Operator Mono", monospace;
320+
--text-para-x-small-fontfamily: "Gotham", "Montserrat", sans-serif;
321321

322-
--text-code-x-small-font: 10px;
322+
--text-para-x-large-font: 20px;
323323

324-
--text-code-x-small-lineheight: 1.4;
324+
--text-para-x-large-lineheight: 1.4;
325325

326-
--text-code-x-small-medium: 350;
326+
--text-para-x-large-medium: 350;
327327

328-
--text-code-x-small-bold: 400;
328+
--text-para-x-large-bold: 400;
329329

330-
--text-code-x-small-regular: 325;
330+
--text-para-x-large-regular: 325;
331331

332-
--text-code-x-small-fontfamily: "Operator Mono", monospace;
332+
--text-para-x-large-fontfamily: "Gotham", "Montserrat", sans-serif;
333333

334-
--text-code-large-font: 16px;
334+
--text-para-small-font: 12px;
335335

336-
--text-code-large-lineheight: 1.4;
336+
--text-para-small-lineheight: 1.4;
337337

338-
--text-code-large-medium: 350;
338+
--text-para-small-medium: 350;
339339

340-
--text-code-large-bold: 400;
340+
--text-para-small-bold: 400;
341341

342-
--text-code-large-regular: 325;
342+
--text-para-small-regular: 325;
343343

344-
--text-code-large-fontfamily: "Operator Mono", monospace;
344+
--text-para-small-fontfamily: "Gotham", "Montserrat", sans-serif;
345345

346-
--text-code-small-font: 12px;
346+
--text-para-medium-font: 14px;
347347

348-
--text-code-small-lineheight: 1.4;
348+
--text-para-medium-lineheight: 1.4;
349349

350-
--text-code-small-medium: 500;
350+
--text-para-medium-medium: 350;
351351

352-
--text-code-small-bold: 400;
352+
--text-para-medium-bold: 400;
353353

354-
--text-code-small-regular: 325;
354+
--text-para-medium-regular: 325;
355355

356-
--text-code-small-fontfamily: "Inter", monospace;
356+
--text-para-medium-fontfamily: "Gotham", "Montserrat", sans-serif;
357357

358-
--text-code-x-large-font: 20px;
358+
--text-para-large-font: 16px;
359359

360-
--text-code-x-large-lineheight: 1.4;
360+
--text-para-large-lineheight: 1.4;
361361

362-
--text-code-x-large-medium: 350;
362+
--text-para-large-medium: 350;
363363

364-
--text-code-x-large-bold: 400;
364+
--text-para-large-bold: 400;
365365

366-
--text-code-x-large-regular: 325;
366+
--text-para-large-regular: 325;
367367

368-
--text-code-x-large-fontfamily: "Operator Mono", monospace;
368+
--text-para-large-fontfamily: "Gotham", "Montserrat", sans-serif;
369369

370-
--flow-font: "ABC Oracle", "Montserrat", sans-serif;
370+
--flow-font: "Gotham", "Montserrat", sans-serif;
371371

372372
--flow-code-font: "Operator Mono", monospace;
373373
}

‎packages/flow-log/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
# Change Log
44

5+
## [2.1.0] - 2024-03-28
6+
7+
### Features
8+
9+
- f-log : `label` property introduced to display label at top-left.
10+
- f-log : `header` slot introduced to display meta info after search bar.
11+
- f-log : `actions` slot introduced to display additional actions menu or icons at top-right.
12+
- f-log : formatting colors updated.
13+
- f-log : search bar and log level selection elements style updated.
14+
515
## [2.0.6] - 2024-03-23
616

717
### Bug Fixes

0 commit comments

Comments
 (0)