Skip to content

Commit 1168ccc

Browse files
author
Luke Bowerman
authored
Deprecate customizable input attribute support (#802)
* Remove support for `Customizable` on all Form & Action components
1 parent 91db584 commit 1168ccc

File tree

24 files changed

+372
-413
lines changed

24 files changed

+372
-413
lines changed

‎packages/components/src/Button/ButtonBase.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@
2626

2727
import {
2828
CompatibleHTMLProps,
29-
radii,
30-
RadiusSizes,
3129
reset,
3230
SemanticColors,
3331
space,
@@ -47,14 +45,6 @@ import {
4745
import { buttonSize, ButtonSizes, ButtonSizeProps } from './size'
4846
import { ButtonIcon, buttonIcon, ButtonIconProps } from './icon'
4947

50-
export interface CustomizableButtonAttributes {
51-
borderRadius: RadiusSizes
52-
}
53-
54-
export const CustomizableButtonAttributes: CustomizableButtonAttributes = {
55-
borderRadius: 'medium',
56-
}
57-
5848
type ButtonColors = keyof SemanticColors
5949

6050
export interface ButtonBaseProps
@@ -105,7 +95,7 @@ export const buttonCSS = css<ButtonBaseProps>`
10595
`}
10696
10797
align-items: center;
108-
border-radius: ${radii[CustomizableButtonAttributes.borderRadius]};
98+
border-radius: ${({ theme }) => theme.radii.medium};
10999
cursor: pointer;
110100
display: inline-flex;
111101
font-weight: 600;

‎packages/components/src/Form/Fields/Field.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
import React, { FunctionComponent, ReactNode } from 'react'
2828
import styled from 'styled-components'
2929
import { ResponsiveValue, TLengthStyledSystem } from 'styled-system'
30-
import { CustomizableAttributes, SpacingSizes } from '@looker/design-tokens'
3130
import omit from 'lodash/omit'
3231
import pick from 'lodash/pick'
3332
import { inputHeight } from '../Inputs/InputText/InputText'
@@ -39,15 +38,6 @@ import { FieldBaseProps, RequiredStar } from './FieldBase'
3938

4039
type ResponsiveSpaceValue = ResponsiveValue<TLengthStyledSystem>
4140

42-
export interface CustomizableFieldAttributesInterface
43-
extends CustomizableAttributes {
44-
labelMargin: SpacingSizes
45-
}
46-
47-
export const CustomizableFieldAttributes: CustomizableFieldAttributesInterface = {
48-
labelMargin: 'xsmall',
49-
}
50-
5141
export interface FieldProps extends FieldBaseProps {
5242
/*
5343
* optional extra description

‎packages/components/src/Form/Fields/FieldColor/Swatch/Swatch.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import {
3535
WidthProps,
3636
} from 'styled-system'
3737
import {
38-
CustomizableInputTextAttributes,
3938
inputTextDefaults,
4039
inputTextDisabled,
4140
inputTextHover,
@@ -70,8 +69,7 @@ export const Swatch = styled.div<SwatchProps>`
7069
`
7170

7271
Swatch.defaultProps = {
73-
...inputTextDefaults,
74-
...omit(CustomizableInputTextAttributes, 'fontSize'),
72+
...omit(inputTextDefaults, 'fontSize'),
7573
color: 'white',
76-
width: CustomizableInputTextAttributes.height,
74+
width: inputTextDefaults.height,
7775
}

‎packages/components/src/Form/Fields/FieldInline.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,10 @@
2626

2727
import React, { FC } from 'react'
2828
import styled from 'styled-components'
29-
import { CustomizableAttributes, SpacingSizes } from '@looker/design-tokens'
3029
import { Label } from '../Label/Label'
3130
import { ValidationMessage } from '../ValidationMessage/ValidationMessage'
3231
import { FieldBaseProps, RequiredStar } from './FieldBase'
3332

34-
export interface CustomizableFieldAttributesInterface
35-
extends CustomizableAttributes {
36-
labelMargin: SpacingSizes
37-
}
38-
3933
/**
4034
* `<FieldInline />` allows the rendering of a label (for FieldCheckbox, FieldRadio and FieldToggleSwitch),
4135
* and can render a validation message.

‎packages/components/src/Form/Fields/FieldSelect/__snapshots__/FieldSelect.test.tsx.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ exports[`A FieldSelect 1`] = `
1010
}
1111
1212
.c5 {
13-
border-radius: 0.25rem;
1413
border: solid 1px;
1514
border-color: #DEE1E5;
15+
border-radius: 0.25rem;
1616
width: 100%;
17+
padding-right: 0.25rem;
1718
padding-top: 2px;
1819
padding-bottom: 2px;
19-
padding-right: 0.25rem;
2020
font-size: 0.875rem;
2121
display: -webkit-box;
2222
display: -webkit-flex;
@@ -82,11 +82,11 @@ exports[`A FieldSelect 1`] = `
8282
}
8383
8484
.c10 {
85-
border-radius: 0.25rem;
8685
border: solid 1px;
8786
border-color: #DEE1E5;
88-
width: 100%;
87+
border-radius: 0.25rem;
8988
height: 36px;
89+
width: 100%;
9090
padding-right: 0.75rem;
9191
padding-left: 0.75rem;
9292
padding-top: 0rem;
@@ -281,13 +281,13 @@ exports[`A FieldSelect with an error validation aligned to the left 1`] = `
281281
}
282282
283283
.c5 {
284-
border-radius: 0.25rem;
285284
border: solid 1px;
286285
border-color: #DEE1E5;
286+
border-radius: 0.25rem;
287287
width: 100%;
288+
padding-right: 0.25rem;
288289
padding-top: 2px;
289290
padding-bottom: 2px;
290-
padding-right: 0.25rem;
291291
font-size: 0.875rem;
292292
display: -webkit-box;
293293
display: -webkit-flex;
@@ -353,11 +353,11 @@ exports[`A FieldSelect with an error validation aligned to the left 1`] = `
353353
}
354354
355355
.c10 {
356-
border-radius: 0.25rem;
357356
border: solid 1px;
358357
border-color: #DEE1E5;
359-
width: 100%;
358+
border-radius: 0.25rem;
360359
height: 36px;
360+
width: 100%;
361361
padding-right: 0.75rem;
362362
padding-left: 0.75rem;
363363
padding-top: 0rem;
@@ -597,13 +597,13 @@ exports[`A FieldSelect with an error validation aligned to the right 1`] = `
597597
}
598598
599599
.c5 {
600-
border-radius: 0.25rem;
601600
border: solid 1px;
602601
border-color: #DEE1E5;
602+
border-radius: 0.25rem;
603603
width: 100%;
604+
padding-right: 0.25rem;
604605
padding-top: 2px;
605606
padding-bottom: 2px;
606-
padding-right: 0.25rem;
607607
font-size: 0.875rem;
608608
display: -webkit-box;
609609
display: -webkit-flex;
@@ -669,11 +669,11 @@ exports[`A FieldSelect with an error validation aligned to the right 1`] = `
669669
}
670670
671671
.c10 {
672-
border-radius: 0.25rem;
673672
border: solid 1px;
674673
border-color: #DEE1E5;
675-
width: 100%;
674+
border-radius: 0.25rem;
676675
height: 36px;
676+
width: 100%;
677677
padding-right: 0.75rem;
678678
padding-left: 0.75rem;
679679
padding-top: 0rem;
@@ -913,13 +913,13 @@ exports[`A required FieldSelect 1`] = `
913913
}
914914
915915
.c6 {
916-
border-radius: 0.25rem;
917916
border: solid 1px;
918917
border-color: #DEE1E5;
918+
border-radius: 0.25rem;
919919
width: 100%;
920+
padding-right: 0.25rem;
920921
padding-top: 2px;
921922
padding-bottom: 2px;
922-
padding-right: 0.25rem;
923923
font-size: 0.875rem;
924924
display: -webkit-box;
925925
display: -webkit-flex;
@@ -985,11 +985,11 @@ exports[`A required FieldSelect 1`] = `
985985
}
986986
987987
.c11 {
988-
border-radius: 0.25rem;
989988
border: solid 1px;
990989
border-color: #DEE1E5;
991-
width: 100%;
990+
border-radius: 0.25rem;
992991
height: 36px;
992+
width: 100%;
993993
padding-right: 0.75rem;
994994
padding-left: 0.75rem;
995995
padding-top: 0rem;
@@ -1196,13 +1196,13 @@ exports[`FieldSelect supports labelWeight 1`] = `
11961196
}
11971197
11981198
.c5 {
1199-
border-radius: 0.25rem;
12001199
border: solid 1px;
12011200
border-color: #DEE1E5;
1201+
border-radius: 0.25rem;
12021202
width: 100%;
1203+
padding-right: 0.25rem;
12031204
padding-top: 2px;
12041205
padding-bottom: 2px;
1205-
padding-right: 0.25rem;
12061206
font-size: 0.875rem;
12071207
display: -webkit-box;
12081208
display: -webkit-flex;
@@ -1268,11 +1268,11 @@ exports[`FieldSelect supports labelWeight 1`] = `
12681268
}
12691269
12701270
.c10 {
1271-
border-radius: 0.25rem;
12721271
border: solid 1px;
12731272
border-color: #DEE1E5;
1274-
width: 100%;
1273+
border-radius: 0.25rem;
12751274
height: 36px;
1275+
width: 100%;
12761276
padding-right: 0.75rem;
12771277
padding-left: 0.75rem;
12781278
padding-top: 0rem;

‎packages/components/src/Form/Fields/FieldText/__snapshots__/FieldText.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ exports[`A FieldText with default label 1`] = `
5959
}
6060
6161
.c5 {
62-
border-radius: 0.25rem;
6362
border: solid 1px;
6463
border-color: #DEE1E5;
65-
width: 100%;
64+
border-radius: 0.25rem;
6665
height: 36px;
66+
width: 100%;
6767
padding-left: 0.75rem;
6868
padding-right: 0.75rem;
6969
padding-top: 0rem;
@@ -214,11 +214,11 @@ exports[`A FieldText with label inline 1`] = `
214214
}
215215
216216
.c5 {
217-
border-radius: 0.25rem;
218217
border: solid 1px;
219218
border-color: #DEE1E5;
220-
width: 100%;
219+
border-radius: 0.25rem;
221220
height: 36px;
221+
width: 100%;
222222
padding-left: 0.75rem;
223223
padding-right: 0.75rem;
224224
padding-top: 0rem;

0 commit comments

Comments
 (0)