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

Commit 6d8db26

Browse files
valerybugakovvalerybugakov
authored
web: drop bootstrap depenedency (#41401)
1 parent c59895a commit 6d8db26

File tree

21 files changed

+176
-403
lines changed

21 files changed

+176
-403
lines changed

Diff for: ‎.stylelintrc.json

-6
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@
77
{
88
"regexp": "^.+\\.module(\\.scss)$"
99
}
10-
],
11-
"@sourcegraph/no-restricted-imports": [
12-
true,
13-
{
14-
"paths": ["bootstrap*"]
15-
}
1610
]
1711
}
1812
}

Diff for: ‎client/branded/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
# Branded
2+
13
This folder contains client code that is **branded**, i.e. it implements the visual design language we use across our web app and e.g. in the options menu of the browser extension.
2-
Code in here can use Bootstrap and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)).
4+
Code here can use global classes and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)).
35

46
Any code that is code host agnostic should go into [`../shared`](../shared) instead.

Diff for: ‎client/branded/src/components/Form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface FormState {
1313
/**
1414
* Form component that handles validation.
1515
* If the user tries to submit the form and one of the inputs is invalid,
16-
* Bootstrap's `was-validated` class will be assigned so the invalid inputs get highlighted.
16+
* the global `was-validated` class will be assigned so the invalid inputs get highlighted.
1717
*/
1818
export class Form extends React.PureComponent<FormProps, FormState> {
1919
constructor(props: FormProps) {

Diff for: ‎client/branded/src/components/panel/TabbedPanelContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export const TabbedPanelContent = React.memo<TabbedPanelContentProps>(props => {
304304
<ActionsNavItems
305305
{...props}
306306
extensionsController={extensionsController}
307-
// TODO remove references to Bootstrap from shared, get class name from prop
307+
// TODO remove references to global branded classes from shared, get class name from prop
308308
// This is okay for now because the Panel is currently only used in the webapp
309309
listClass="d-flex justify-content-end list-unstyled m-0 align-items-center"
310310
listItemClass="px-2 mx-2"

Diff for: ‎client/branded/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx

+2-169
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,19 @@
22
// documentation of all the Bootstrap classes we have available in our app, please see refer to the Bootstrap
33
// documentation for that. Its primary purpose is to show what Bootstrap's componenents look like with our styling
44
// customizations.
5-
import { useState } from 'react'
6-
75
import { action } from '@storybook/addon-actions'
86
import { DecoratorFn, Meta, Story } from '@storybook/react'
9-
import classNames from 'classnames'
107
import 'storybook-addon-designs'
118

129
import { highlightCodeSafe, registerHighlightContributions } from '@sourcegraph/common'
13-
import {
14-
TextArea,
15-
Button,
16-
ButtonGroup,
17-
Link,
18-
Select,
19-
BUTTON_SIZES,
20-
Checkbox,
21-
Input,
22-
Text,
23-
Code,
24-
H1,
25-
H2,
26-
H3,
27-
H4,
28-
} from '@sourcegraph/wildcard'
10+
import { TextArea, Button, Link, Select, Checkbox, Input, Text, Code, H1, H2, H3, H4 } from '@sourcegraph/wildcard'
2911

3012
import { BrandedStory } from '../../components/BrandedStory'
3113
import { CodeSnippet } from '../../components/CodeSnippet'
3214
import { Form } from '../../components/Form'
3315

3416
import { ColorVariants } from './ColorVariants'
3517
import { FormFieldVariants } from './FormFieldVariants'
36-
import { TextStory } from './TextStory'
3718
import { preventDefault } from './utils'
3819

3920
registerHighlightContributions()
@@ -53,25 +34,6 @@ const config: Meta = {
5334

5435
export default config
5536

56-
export const TextTypography: Story = () => (
57-
<>
58-
<H1>Typography</H1>
59-
60-
<TextStory />
61-
</>
62-
)
63-
64-
TextTypography.parameters = {
65-
design: {
66-
name: 'Figma',
67-
type: 'figma',
68-
url:
69-
'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=998%3A1515',
70-
},
71-
}
72-
73-
type ButtonSizesType = typeof BUTTON_SIZES[number] | undefined
74-
7537
export const CodeTypography: Story = () => (
7638
<>
7739
<H1>Code</H1>
@@ -253,136 +215,6 @@ export const Layout: Story = () => (
253215
</>
254216
)
255217

256-
export const ButtonGroups: Story = () => {
257-
const [active, setActive] = useState<'Left' | 'Middle' | 'Right'>('Left')
258-
const buttonSizes: ButtonSizesType[] = ['lg', undefined, 'sm']
259-
return (
260-
<>
261-
<H1>Button groups</H1>
262-
<Text>
263-
Group a series of buttons together on a single line with the button group.{' '}
264-
<Link to="https://getbootstrap.com/docs/4.5/components/buttons/">Bootstrap documentation</Link>
265-
</Text>
266-
267-
<H2>Example</H2>
268-
<div className="mb-2">
269-
<Text>
270-
Button groups have no styles on their own, they just group buttons together. This means they can be
271-
used to group any other semantic or outline button variant.
272-
</Text>
273-
<div className="mb-2">
274-
<ButtonGroup aria-label="Basic example">
275-
<Button variant="secondary">Left</Button>
276-
<Button variant="secondary">Middle</Button>
277-
<Button variant="secondary">Right</Button>
278-
</ButtonGroup>{' '}
279-
Example with <Code>btn-secondary</Code>
280-
</div>
281-
<div className="mb-2">
282-
<ButtonGroup aria-label="Basic example">
283-
<Button outline={true} variant="secondary">
284-
Left
285-
</Button>
286-
<Button outline={true} variant="secondary">
287-
Middle
288-
</Button>
289-
<Button outline={true} variant="secondary">
290-
Right
291-
</Button>
292-
</ButtonGroup>{' '}
293-
Example with <Code>btn-outline-secondary</Code>
294-
</div>
295-
<div className="mb-2">
296-
<ButtonGroup aria-label="Basic example">
297-
<Button outline={true} variant="primary">
298-
Left
299-
</Button>
300-
<Button outline={true} variant="primary">
301-
Middle
302-
</Button>
303-
<Button outline={true} variant="primary">
304-
Right
305-
</Button>
306-
</ButtonGroup>{' '}
307-
Example with <Code>btn-outline-primary</Code>
308-
</div>
309-
</div>
310-
311-
<H2 className="mt-3">Sizing</H2>
312-
<Text>
313-
Just like buttons, button groups have <Code>sm</Code> and <Code>lg</Code> size variants.
314-
</Text>
315-
<div className="mb-2">
316-
{buttonSizes.map(size => (
317-
<div key={size} className="mb-2">
318-
<ButtonGroup aria-label="Sizing example">
319-
<Button size={size} outline={true} variant="primary">
320-
Left
321-
</Button>
322-
<Button size={size} outline={true} variant="primary">
323-
Middle
324-
</Button>
325-
<Button size={size} outline={true} variant="primary">
326-
Right
327-
</Button>
328-
</ButtonGroup>
329-
</div>
330-
))}
331-
</div>
332-
333-
<H2 className="mt-3">Active state</H2>
334-
<Text>
335-
The <Code>active</Code> class can be used to craft toggles out of button groups.
336-
</Text>
337-
<div className="mb-2">
338-
<ButtonGroup aria-label="Basic example">
339-
{(['Left', 'Middle', 'Right'] as const).map(option => (
340-
<Button
341-
key={option}
342-
className={classNames(option === active && 'active')}
343-
onClick={() => setActive(option)}
344-
aria-pressed={option === active}
345-
outline={true}
346-
variant="secondary"
347-
>
348-
{option}
349-
</Button>
350-
))}
351-
</ButtonGroup>{' '}
352-
Example with <Code>btn-outline-secondary</Code>
353-
</div>
354-
<div className="mb-2">
355-
<ButtonGroup aria-label="Basic example">
356-
{(['Left', 'Middle', 'Right'] as const).map(option => (
357-
<Button
358-
key={option}
359-
className={classNames(option === active && 'active')}
360-
onClick={() => setActive(option)}
361-
aria-pressed={option === active}
362-
outline={true}
363-
variant="primary"
364-
>
365-
{option}
366-
</Button>
367-
))}
368-
</ButtonGroup>{' '}
369-
Example with <Code>btn-outline-primary</Code>
370-
</div>
371-
</>
372-
)
373-
}
374-
375-
ButtonGroups.storyName = 'Button groups'
376-
377-
ButtonGroups.parameters = {
378-
design: {
379-
type: 'figma',
380-
name: 'Figma',
381-
url:
382-
'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=908%3A2514',
383-
},
384-
}
385-
386218
export const InputGroups: Story = () => (
387219
<>
388220
<H1>Input groups</H1>
@@ -613,6 +445,7 @@ export const Meter: Story = args => (
613445
</div>
614446
</>
615447
)
448+
616449
Meter.argTypes = {
617450
min: {
618451
type: 'number',

0 commit comments

Comments
 (0)